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

Posted 2023-05-07

【中文标题】如何保持实时 MediaSource 视频流同步？

【英文标题】：How to keep a live MediaSource video stream in-sync?

【发布时间】：2014-06-11 15:53:57

【问题描述】：

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

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

客户端还创建一个MediaSource，并在接收到来自 WS 的帧时，将内容附加到其活动缓冲区。 <video> 在添加第一帧后立即开始播放。

一切运行良好。我唯一的问题是网络抖动会导致播放位置在一段时间后偏离实际时间。我目前的解决方案是挂钩updateend 事件，检查video.currentTime 和传入集群上的时间码之间的差异，如果它超出可接受的范围，则手动更新currentTime。不幸的是，这会导致播放中出现明显的暂停和跳跃，这非常令人不快。

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

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

【问题讨论】：

你找到解决办法了吗？

我已经意识到您更改 currentTime 的解决方案是最好的，它导致的故障是可以接受的，因为在此之前网络故障导致缓冲区增加，所以另一个故障来修复它是正常的...只有在流期间出现连续连接问题时才会出现故障。

有什么方法可以将 WebM SimpleBlock 转换为带有 h​​eader 的独立 webm 文件？

【参考方案1】：

网络抖动导致播放位置漂移

这不是你的问题。如果您在流中遇到中断，则在开始播放之前您没有足够的缓冲，并且播放只有一个适当大小的缓冲区，即使比实时慢几秒钟（这是正常的）。

我目前的解决方案是挂钩 updateend 事件，检查 video.currentTime 和传入集群上的时间码之间的差异

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

不幸的是，这会导致播放中出现明显的暂停和跳跃，这非常令人不快。

你会怎么做呢？您可以跳转到实时，也可以提高播放速度以赶上实时。不管怎样，如果你想赶上实时，你必须及时跳过。

解决方案也感觉有点奇怪：我确切地知道最新的关键帧在哪里

您可以，但播放器在该媒体被解码之前不会。在任何情况下，关键帧都是无关紧要的......您可以寻找非关键帧位置。浏览器将根据需要在 P/B 帧之前解码。

我必须将其转换为一整秒（根据 W3C 规范），然后才能将其传递给 currentTime

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

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

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

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

此外，您期望任何东西都与系统时钟保持同步并不是一个好主意，而且是不合理的。不同的设备具有不同的刷新率，将以不同的速率处理视频。只需点击播放并让它播放。如果您最终延迟了几秒钟，请继续设置currentTime，但在这样做之前对您缓冲的内容非常有信心。

【讨论】：

不确定您是否遇到了问题，但是如果您从节点传送一个 mp3 文件，例如，在 2.7 秒的数据包中使用套接字，播放器会正常启动，但如果您暂停它手动缓冲区将开始增加，当您再次播放时，它将从您停止的位置开始。这会导致播放与 nodejs 流不同步。如果你让播放几个小时就会发生这种情况，它会由于故障而自动暂停并且缓冲区开始增加。

nodejs发送2.7秒，等待播放完毕再发送下一个数据包。但是随着缓冲区的增加，您无法再控制流数据是否已播放。我试图发送一个“确认”，告诉数据包已播放，以便下一个可以传递但遇到其他问题。就像播放停止一样。所以问题是流式传输数据并立即连续播放数小时。

@KeyneViana 为什么要等待发送下一个数据块？继续发送就行了。此外，您不应该等待 2.7 秒...... MP3 帧可以小至 576 个样本。

因为是直播的，所以在不同的浏览器中传输应该是同步的。如果我只发送将要播放的帧，任何开始收听传输的人都会得到它的位置，例如 00:56。如果您不等待就交付所有帧，则无法控制此方面。

@KeyneViana 不。正是因为它是实时的，您应该继续流式传输数据。你不能发送一个块，等待它播放，得到这个确认，然后发送下一个块。数据无法即时发送、解析和解码。互联网不是电路交换网络。如果您希望连续播放数据，则必须连续发送数据。对于中途连接的任何人，您只需从该点向前发送数据。