HTML5：在没有浏览器插件的情况下播放实时 Opus 音频帧

Question

我们需要用无插件的解决方案替换我们的 NPAPI 浏览器插件。我们有第 3 方输入设备，它以 Opus '帧' 的形式为我们提供 实时 音频。我们使用二进制 WebSocket 将这些帧传输到浏览器；然后，将数据转发到我们的 NPAPI 插件进行解码和音频播放。见图片。

考虑到这些要求，我们应该采取什么方法将 NPAPI 插件替换为类似 HTML5 的解决方案？

1. 将端到端延迟降至不超过 3-5 秒（假设 200 毫秒往返网络延迟）。
2. 提供一种应用音频过滤器的方法（客户端/浏览器端）

使用 html5 音频标签似乎会引入大量延迟，因为各种浏览器在开始播放之前都需要一定量的缓冲（15-30 秒的音频）。我们了解 Opus 可能会或可能不会在所有浏览器上受支持。如果需要（尽管我们不想减少带宽），我们可以在将数据发送到浏览器之前将 Opus 帧封装到 Web 服务内的 Ogg 容器中。查看来自 html5rocks 的演示之一，HTML5 Audio Playground，似乎 #2 是可能的。

如果在这里提出这样的设计问题不合适，请推荐其他可能更合适的论坛/小组。

感谢您提供的任何帮助或建议。

Answer 1

我也有类似的情况。我一直在使用 WebSockets 和媒体源扩展在 Google Chrome 中播放 MP3 提要，几乎没有延迟，但是当与 MSE 一起使用时，其他一些浏览器不支持 MP3 编解码器。事实证明，只要将 Opus 正确封装在 MP4 或 WebM 容器中，大多数浏览器（至少 Chrome、Firefox、Opera 和 Edge）都可以使用 MSE 原生播放 Opus。

在 Ogg 中打包 Opus 非常简单，我 converted some code I found from JavaScript to C#。

在 WebM 中打包 Opus 有点复杂。我根据 WebM/Matroska 和 EBML 规范从头开始编写 this C# code。通过 HTTP 提供服务时，它可以在 Chrome 和 Firefox 中正常播放，但 VLC 似乎无法通过 HTTP 流式传输 Opus/WebM。至少 Chrome 要求时间序列从 0 开始，因此在服务器端打包并不是一个好的选择，因为这需要对分发系统进行修改。

最后我ported this to JavaScript 所以每个客户端都可以在 WebM 中打包 Opus 帧，时间戳正确地从 0 开始。这会在 Chrome 和 Firefox 中在一秒钟内启动实时流而无需预缓冲。请注意，我在传入的 websocket 数据包上使用了 4 字节的标头，因为现有的分发系统不保留数据包边界（它是为 MP3 流构建的）。如果您在每个 opus 帧中使用一个 websocket 帧，并且每帧使用固定数量的样本，则可以删除此标头。

现在剩下的就是为 IE11、Safari 和一些较旧的移动浏览器寻找解决方案...

Answer 2

由于您需要管理所有的缓冲而不是您自己，我认为最好的选择是在 JavaScript 中实际解码 Opus 帧。作为奖励，您将获得更好的浏览器支持。

Aurora.js 项目对此提供了支持：https://github.com/audiocogs/opus.js 虽然在这个阶段还有些实验性。

如果您不必使用 Opus 和 WebSocket，您将有更多选择。在大多数情况下，标准<audio> 标记不会花费超过几秒钟的音频缓冲区来开始播放。当它出现时，通常是因为内容类型标头错误，播放器软件必须弄清楚它是什么，需要更大的缓冲区才能使用。或者，存在某种其他同步问题。