javascript - 如何保持实时 MediaSource 视频流同步？

Question

我有一个服务器应用程序，它呈现一个 30 FPS 的视频流，然后将其实时编码和多路复用到一个 WebM Byte Stream 中。 .

在客户端，HTML5 页面向服务器打开一个 WebSocket，当连接被接受时服务器开始生成流。传递 header 后，每个后续的 WebSocket 帧都由一个 WebM SimpleBlock 组成。每 15 帧出现一个关键帧，当发生这种情况时，将启动一个新的集群。

客户端还创建了一个 MediaSource ，并在从 WS 接收到帧后，将内容附加到其事件缓冲区。 <video>附加第一帧后立即开始播放。

一切正常。我唯一的问题是网络抖动导致播放位置在一段时间后偏离实际时间。我目前的解决方案是 Hook updateend事件，检查 video.currentTime 之间的区别和传入集群上的时间码并手动更新 currentTime如果它超出了可接受的范围。不幸的是，这会导致播放过程中出现明显的停顿和跳转，令人不快。

该解决方案也感觉有点奇怪:我确切地知道最新的关键帧在哪里，但我必须将它转换为整秒(根据 W3C 规范)，然后才能将其传递给 currentTime ，浏览器大概必须四处寻找最近的关键帧。

我的问题是:有没有办法让媒体元素始终寻找可用的最新关键帧，或者保持播放时间与系统时钟时间同步？

Answer 1

network jitter causes the playback position to drift

那不是你的问题。如果您在流中遇到丢失，则说明您在开始播放之前没有足够的缓冲，并且播放只有适当大小的缓冲区，即使比实时延迟几秒钟(这是正常的)。

My current solution is to hook into the updateend event, check the difference between the video.currentTime and the timecode on the incoming Cluster

这接近于正确的方法。我建议您忽略传入集群的时间码，而是检查您的缓冲时间范围。您在 WebM 集群上收到的内容和已解码的内容是两件不同的事情。

Unfortunately, this causes a noticeable pause and jump in the playback which is rather unpleasant.

否则你会怎么做？您可以跳转到实时，也可以提高播放速度以 catch 实时。无论哪种方式，如果您想 catch 实时，就必须及时跳过。

The solution also feels a bit odd: I know exactly where the latest keyframe is

您可以，但播放器必须等到该媒体被解码后才能播放。在任何情况下，关键帧都是无关紧要的……您可以寻找非关键帧位置。浏览器将根据需要提前解码 P/B 帧。

I have to convert it into a whole second (as per the W3C spec) before I can pass it into currentTime

这完全是错误的。 currentTime 指定为 double。 https://www.w3.org/TR/2011/WD-html5-20110113/video.html#dom-media-currenttime

My question is this: is there a way to tell the Media Element to always seek to the latest keyframe available, or keep the playback time synchronised with the system clock time?

它将自动播放最后一个缓冲区。你不需要做任何事情。您通过确保媒体数据到达缓冲区并将播放设置为尽可能接近合理来完成您的工作。如果网络条件发生变化允许您执行此操作，您始终可以将其向前推进，但坦率地说，这听起来好像您只是遇到了损坏的代码和损坏的缓冲策略。否则，播放会很流畅。

落后追赶不会自动发生，也不应该发生。如果播放器由于缓冲区耗尽而暂停，则需要在恢复播放之前再次建立缓冲区。这就是缓冲区的全部意义所在。

此外，您期望任何事物都与系统时钟保持同步不是一个好主意，也不合理。不同的设备具有不同的刷新率，将以不同的速率处理视频。只需点击播放，让它播放。如果您最终停顿了几秒钟，请继续设置 currentTime，但在执行此操作之前对您缓冲的内容非常有信心。