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

最新推荐文章于 2025-12-17 19:50:06 发布

原创最新推荐文章于 2025-12-17 19:50:06 发布 · 422 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#经验分享

本文档介绍了在实时互动流媒体场景中遇到的问题及其解决方案，包括canvas和video流的合并，观众端混流布局的动态设置，屏幕共享时的断流策略，以及推流刷新页面时的文档消息同步问题。同时，文中还提到在排查问题时需要注意的独立性和全面性，并举例说明了错误的代码实现和修复方法。

采集图片推流

官方文档：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
}