快速入门
优质
小牛编辑
128浏览
2023-12-01
开发准备
引入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推、拉流模式
- 推流模式
// 创建预览画面
let localVideo = document.getElementById('localVideo');
// 创建推流对象
let broadcaster = new Mrtc.Broadcaster(localVideo, {
type: "camera", // 推流类型
audioDeviceId: audioSource, // 音频设备
videoDeviceId: videoSource, // 视频设备(使用js接口获取设备id)
bitrate: 200, // 推流码率
})
// 错误消息
broadcaster.on("error", err => {
console.log("error:", err)
})
// 推流成功回调
broadcaster.on("published", () => {
console.log("推流成功")
})
// 开启推流
broadcaster.startPublish("mrtc://mrtc.myun.tv/live/test")
- 拉流模式
// 创建拉流画面
let video = document.getElementById('remoteVideo');
// 创建拉流对象
var player = new Mrtc.Player("mrtc://mrtc.myun.tv/live/test", video, {
autoReconnect: true, // 是否自动播放(原始流断流后,不断重试)
video: true, // 是否拉去视频流
audio: true, // 是否拉去音频流
})
// 监听错误消息
player.on("error", err => {
console.log("@@@@error:", err)
})
// 拉流成功回调
player.on("stream_ready", (stream) => {
console.log("拉流成功")
})
// 开始拉流
player.startPlay()
互动直播
互动直播接口油两种模式:
- 简单模式:主播嘉宾只能使用摄像头或者屏幕分享来进行互动。
混流模式:主播嘉宾能随意的组合各类元素,进行多元素混流后的互动。
简单模式
// 初始化互动对象
let interactiveClient = new Mrtc.InteracitveClient("service.myun.tv", containerDom, {
type: "camera",
bitrate: 2000
})
// 在控制台创建互动直播,如需要自动获取加入房间参数,需要使用互动直播服务接口(链接)。
interactiveClient.join(roomid, "main", "password") // main 为主播,其它字符串为嘉宾,join并且立马推流
interactiveClient.on("error", err => {
// 出错回调
})
interactiveClient.on("published", () => {
// 本地推流成功
})
interactiveClient.on("publisher_list", list => {
// 根据嘉宾列表播放嘉宾
list.forEach(client => {
if (client.role != "main" && client.status == "publish") {
// 为每一个嘉宾创建观看画面
let container = document.getElementById('video'+client.role)
interactiveClient.playClient(client.role, container)
}
});
})
interactiveClient.on("publish_event", client => {
// 播放房间的嘉宾
if (client.role != "main" && client.status == "publish") {
// 为每一个嘉宾创建观看画面
let container = document.getElementById('video'+client.role)
interactiveClient.playClient(client.role, container)
}
})
interactiveClient.on("unpublish_event", client => {
// 嘉宾停止推流时停止播放,移除dom
if (client.role != "main") {
interactiveClient.stopClient(client.role)
}
})
- 混流模式
混流模式可以添加丰富的元素,元素详情查看详细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)
}
})