Networked A-frame替换dynamic-room后视频流白屏故障排查求助

排查解决思路 #

• 第一步先确认dynamic-room组件是否正确注册：打开浏览器控制台，查看是否存在The component 'dynamic-room' has not been registered这类报错，优先检查scene.html中是否正确引入了public/js/dynamic-room.component.js，确认引入路径没有拼写错误。
• 第二步核对组件参数兼容性：不要直接照搬networked-scene的所有配置项，打开dynamic-room.component.js查看组件的schema定义，确认你传入的adapter、audio、video等参数都是dynamic-room支持的属性，同时检查是否有遗漏的必填参数，部分dynamic-room实现需要额外指定房间加入成功的回调函数，未配置的话不会触发后续的视频流挂载逻辑。
• 第三步核查dynamic-room.component.js的内部逻辑：
  • 确认组件初始化时是否正确调用了networked-aframe的媒体采集接口，有没有正常请求用户的摄像头、麦克风权限
  • 确认远端用户加入房间的事件回调是否绑定正确，收到远端媒体流后，有没有将流对象正确挂载到场景中对应的视频展示实体上
  • 开启debug模式查看控制台输出，是否存在stream is undefined、DOM节点操作失败之类的报错，白屏绝大多数情况是媒体流对象未正常获取，或者流没有正确绑定到渲染节点上
• 第四步验证房间连接逻辑：部分dynamic-room实现不会自动加入配置的房间，需要手动调用joinRoom()方法才会触发房间连接流程，两个标签页没有成功加入同一个房间的话，自然无法互相接收视频流。你可以打开浏览器的WebRTC内部面板查看连接是否正常建立，是否有媒体流数据传输。

内容的提问来源于stack exchange，提问作者Aidan Young