如何在连接延迟后保持HTML5实时视频流同步?

时间:2016-07-22 23:04:31

标签: angularjs html5 video video-streaming html5-video

我正在构建一个包含IP cam视频的小型网络应用。我通过HTML5代码流式传输:

<video muted id="video_0" src="SOURCEURL" type="video/ogg" autoplay="autoplay"  width="100%" preload="none" controls/>

视频使用Netcam Studio托管在我的电脑上,采用WebM格式。

对于网络应用,视频尽可能接近实时非常重要。我通过降低流媒体质量和fps实现这一目标。但是,经过几个小时的流式传输后,它可能比实时时间晚了15秒。

保持最新状态的最佳方法是什么?我想我可以每隔几分钟重装一次,但不确定是否有更好的方法。

我的大部分工作都是在AngularJS中完成的,如果这会影响你的答案。

谢谢!

1 个答案:

答案 0 :(得分:1)

您可以定期检查HTML5视频元素的buffered属性,并将其与currentTime属性进行比较。如果缓冲范围大于某个增量,则只需将当前时间设置为接近缓冲范围末尾的某个值,以便更接近结束。至少这对我们提供了实时MP4视频输入。

Chrome有一个bug我报告当前时间没有正确更新MP4的情况,你应该检查你的ogg视频是否有相同的情况,然后这个解决方案将无济于事。