如何在Video.js中正常实现WebRTC视频流播放

现有方案的失败根因 #

两种已尝试方案的报错、无响应问题，核心是和Video.js的API设计逻辑不匹配导致的：

• 直接调用player.src({src: mediaStream})报(CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED)：player.src()的设计逻辑是处理URL类的媒体资源，本身不会识别传入的MediaStream对象，会默认判定为不支持的媒体格式，触发源解析错误。
• 直接给底层原生video元素设置srcObject后无画面、player.play()无响应：
• Video.js的内部状态机没有同步源变化：绕过播放器API直接修改原生元素属性，不会触发Video.js内部的源加载流程，播放器会始终判定当前无有效媒体源，player.play()的内部校验逻辑会直接拦截播放指令，不会把指令透传给底层元素。
• 未处理浏览器自动播放限制：无用户交互触发的页面中，未设置静音的video元素会被浏览器拦截播放请求，就算绑定了MediaStream也无法启动播放。
• 未触发原生媒体加载流程：仅给video元素赋值srcObject不执行load()，原生媒体管线不会完成和媒体流的绑定，后续播放调用找不到有效媒体轨道。

正确实现路径 #

按照如下顺序操作即可完成WebRTC流的正常播放：

1. 获取Video.js绑定的原生video元素，注意不要获取外层包裹容器的DOM节点：

   const techEl = player.tech().el();
   

2. 先设置静音属性，绕过浏览器自动播放策略拦截：

   techEl.muted = true;
   

3. 绑定MediaStream后触发原生媒体加载流程：

   techEl.srcObject = webRTCAdaptor.remoteVideo.srcObject;
   techEl.load();
   

4. 监听原生元素的加载事件，同步Video.js内部状态，待元数据加载完成后再触发播放：

   techEl.addEventListener('loadedmetadata', () => {
     // 手动触发事件通知Video.js当前媒体已完成加载
     player.trigger('loadedmetadata');
     // 此时调用播放指令才会被正确执行
     player.play().catch(err => {
       // 捕获自动播放、权限类的异常
     });
   });
   

常见避坑提示 #

• 不要在srcObject刚赋值完成就同步调用player.play()，此时原生媒体管线还未完成初始化，播放请求会直接失败。
• 初始设置静音只是为了通过自动播放校验，后续可以在用户主动触发的点击、触摸事件里，手动将techEl.muted设为false开启声音，不会触发浏览器的播放拦截。
• 生产环境不建议长期使用直接修改底层元素属性的实现方式，这种写法会绕过Video.js的资源销毁逻辑，容易出现流断开后原生video依然占用媒体轨道的内存泄漏问题。

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