首页
产品
帮助文档
博客
控制台

快速入门

开发准备

引入js

<script src="https://static.mudu.tv/static/mrtc-js-sdk/1.2.10/mrtc-js-sdk.js"></script>
版本号 更新内容
1.2.9 优化画布操作样式
1.2.10 更新画笔功能

MRTC推、拉流模式

互动直播

互动直播接口油两种模式:

混流模式可以添加丰富的元素,元素详情查看详细API文档

// 初始化互动对象
let interactiveMixClient = new Mrtc.InteracitveMixClient("service.myun.tv", containerDom, {
    type: "camera",
    bitrate: 2000
})

// 在控制台创建互动直播,如需要自动获取加入房间参数,需要使用互动直播服务接口(链接)。
interactiveMixClient.join(roomid, "main", "password") // main 为主播,其它字符串为嘉宾,join并且立马推流

// 添加共享桌面元素
let element = new Mrtc.ElementScreen()
element.loadSrc().then(() => {
    interactiveMixClient.addElement(element)
}).catch(err => {
    console.log(err)
})

// 添加共享窗口元素
element = new Mrtc.ElementCamera()
element.loadSrc({
    // device id
}).then(() => {
    interactiveMixClient.addElement(element)
})

interactiveMixClient.on("error", err => {
    // 出错回调
})

interactiveMixClient.on("published", () => {
    // 本地推流成功
})

interactiveMixClient.on("publisher_list", list => {
    // 根据嘉宾列表播放嘉宾
    list.forEach(client => {
        if (client.role != "main" && client.status == "publish") {
            // 为每一个嘉宾创建观看画面
            let container = document.getElementById('video'+client.role)
            interactiveMixClient.playClient(client.role, container)
        }
    });
})

interactiveMixClient.on("publish_event", client => {
    // 播放房间的嘉宾
    if (client.role != "main" && client.status == "publish") {
        // 为每一个嘉宾创建观看画面
        let container = document.getElementById('video'+client.role)
        interactiveMixClient.playClient(client.role, container)
    }
})

interactiveMixClient.on("unpublish_event", client => {
    // 嘉宾停止推流时停止播放,移除dom
    if (client.role != "main") {
        interactiveMixClient.stopClient(client.role)
    }
})