微吼直播-国信证劵-采集图片推流问题总结

采集图片推流

官方文档：http://www.vhallyun.com/docs/show/1275
遇到的问题：

1. dom 生成了一个 <canvas> 图片流 和 一个 <video>视频流 两个标签，生成了两个流
   解决方案：将互动sdk 版本升级到支持 采集图片推流的版本 v2.2.5
   

2. 控制观众端混流布局，触发点：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)
      });
	}
}

3. 屏幕共享，不保持摄像头连接，选择共享屏幕 （主播端会收到 live_over 事件）结束了直播

断流方式：
1. 在 /publish 页面主动结束直播
2. 当pass 检测到直播间断流，发送消息给后端，后端发送结束直播事件

解决方案： 增加一个接口告诉后端这个时候不断流，不发结束直播事件

4. 屏幕共享，不保持摄像头连接，选择共享屏幕，这个时候主播和观众会黑屏一段时间
   拟解决方案，将断流方法放在 点击了 “分享” 之后
   无法实现： 没有办法捕获到谷歌桌面 “共享” 的回调

5. 演示文档 - 推流刷新页面时，观众端收不到任何文档消息（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]
}

6. 观众端观看文档，文档区域黑屏（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
}

7. obs 推流，直播间状态没有改变 => 直播中
   解决步骤：后端查日志，是否报错 => pass 是否有发消息给后端

8. 主播间无法发送聊天消息

9. 针对这个动画复杂的ppt 演示，在某些微信里面无法播放；忽略； X5 同层播放

解决步骤：是否开启了 “手动过滤” => chat 是否有调用 /send 接口 => ws 中是否有发送聊天消息

在项目过程中的不足：
1. 独立性不够强
2. 排查问题没有全面（文档演示的问题：H5 正常，PC 不正常，应该找PC 观看端代码的问题），从 sdk 初始化 opt 参数排查， 角色，频道等参数
3. 缺乏独立思考，大多数听取别人的意见，说风就是雨。应该先自己验证