WebRTC播放器通过js Video标签拉流播放有时无法刷新视频画面的原因排查

对于WebRTC的研究，TSINGSEE青犀视频已经进入一个更深的阶段，不仅仅满足于播放或者分屏此类功能，还需要视频的连贯、自动刷新等功能。

 

 

 

在WebRTC播放器的开发中，我们使用的是js Video标签，在播放WebRTC拉到流时，有大部分几率出现下图状况，图像刷新不出来。

 

 

在界面中点击开始按钮，流可以播放出来。但是在代码添加video.onloadedmetadata方法，里面写入video.load()和video.play()函数，再多次刷新页面也会出现视频没有刷新出来的情况。

 

这里我们想到用定时器去刷新video标签，使用的是video.load()方法，通过这种方法测试后，视频流的播放确实可以刷新出来，但是会导致视频播放界面闪烁，造成卡顿的假象，体验不好。

因此我们上网查询了一下，导致这个问题的主要原因，是浏览器不允许用户对网页进行触发之前播放音频，而视频不受限制。但因为视频文件同时包含了音频，所以也同样被禁止。

这个问题比较常见的做法是在video标签加上muted属性，或者使用js加上video.muted = false，这样即可解决WebRTC的播放问题了。

 

 

WebRTC的播放仍需我们进一步的拓展，我们也会不定期将我们的开发过程通过博文进行记录，大家可以关注我们获取最新消息。