采集图片推流
官方文档:http://www.vhallyun.com/docs/show/1275
遇到的问题:
-
dom 生成了一个 <canvas> 图片流 和 一个 <video>视频流 两个标签,生成了两个流
解决方案:将互动sdk 版本升级到支持 采集图片推流的版本 v2.2.5
-
控制观众端混流布局,触发点:speakerList 上麦人数发生改变时,动态设置旁路布局
// publish.vue
watch: {
speakerList(val) {
console.log("上麦列表改变了", val)
if (this.sdkInstance && this.liveStatus === 1){
this.setBroadCastLayout()
}
}
}
methods: {
// 设置旁路布局
setBroadCastLayout () {
let opt = {}
if (this.openNoCamera) { // 不关联摄像头
// 当只有一个嘉宾上麦时放在右下角
// 当超过一个嘉宾上麦时放在右下角
if (this.speakerList.length === 1) { // 只有主播布局
opt.layout = VhallRTC.CANVAS_LAYOUT_PATTERN_GRID_1 // 一人铺满
} else if (this.speakerList.length === 2) { // 有一个嘉宾上麦
opt.layout = VhallRTC.CANVAS_LAYOUT_PATTERN_FLOAT_2_1DR // 大屏铺满,小屏悬浮右下角 } else {
opt.layout = VhallRTC.CANVAS_LAYOUT_PATTERN_FLOAT_6_5D // 大屏铺满,一行5个悬浮于下面
}
} else {
if (this.speakerList.length === 1) { // 关联摄像头 浮动在右下角
opt.layout = VhallRTC.CANVAS_LAYOUT_PATTERN_FLOAT_2_1DR
} else { // 浮动在左下角
opt.layout = VhallRTC.CANVAS_LAYOUT_PATTERN_FLOAT_6_5D
}
}
// 配置旁路布局
this.sdkInstance.setBroadCastLayout(opt, (res) => {
console.log('配置旁路布局成功', res)
}, (error) => {
console.error('配置旁路布局失败', error)
});
}
}
- 屏幕共享,不保持摄像头连接,选择共享屏幕 (主播端会收到 live_over 事件)结束了直播
断流方式:
1. 在 /publish 页面主动结束直播
2. 当pass 检测到直播间断流,发送消息给后端,后端发送结束直播事件
解决方案: 增加一个接口告诉后端这个时候不断流,不发结束直播事件
-
屏幕共享,不保持摄像头连接,选择共享屏幕,这个时候主播和观众会黑屏一段时间
拟解决方案,将断流方法放在 点击了 “分享” 之后
无法实现: 没有办法捕获到谷歌桌面 “共享” 的回调 -
演示文档 - 推流刷新页面时,观众端收不到任何文档消息(ws 中没有消息)
原因:刷新页面时,创建文档白板SDK, opt 选项 role = 2 取值错误,role = 2 观众演示文档不会向外发消息
// publish.vue
// initDocSDK() 方法 这个地方 使用了 === 符号 “4” === 4 所以错误了
if (this.docPermission == this.roomInfo.third_party_user_id) {
mode = VHDocSDK.PlayMode.INTERACT
role = roleTypeMap[1]
} else if (this.roomInfo.role_name == 1 || this.roomInfo.role_name == 4) {
mode = VHDocSDK.PlayMode.INTERACT
role = roleTypeMap[4]
} else if (this.roomInfo.role_name == 3) {
role = roleTypeMap[3]
}
- 观众端观看文档,文档区域黑屏(css display:none 做了隐藏)
// isDesktopScreenSharing: true 这个值导致的 要判断当前是否是房间所属人,如果是的话,就赋值
let index = this.speakerList.findIndex(item => item.account_id == this.roomInfo.third_party_user_id)
if (index >= 0) {
this.isDesktopScreenSharing = data.is_desktop == 1
}
-
obs 推流,直播间状态没有改变 => 直播中
解决步骤:后端查日志,是否报错 => pass 是否有发消息给后端 -
主播间无法发送聊天消息
-
针对这个动画复杂的ppt 演示,在某些微信里面无法播放;忽略; X5 同层播放
解决步骤:是否开启了 “手动过滤” => chat 是否有调用 /send 接口 => ws 中是否有发送聊天消息
在项目过程中的不足:
1. 独立性不够强
2. 排查问题没有全面(文档演示的问题:H5 正常,PC 不正常,应该找PC 观看端代码的问题),从 sdk 初始化 opt 参数排查, 角色,频道等参数
3. 缺乏独立思考,大多数听取别人的意见,说风就是雨。应该先自己验证