HTML5：播放没有浏览器插件的现场Opus音频帧

Question

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

根据这些要求，我们应该采用什么方法将NPAPI插件替换为HTML5-ish解决方案？

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

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

如果这是一个提出这样一个设计问题的不好的地方，请建议其他可能更合适的论坛/小组。

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

Answer 1

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

Aurora.js项目支持：https://github.com/audiocogs/opus.js虽然现阶段有点实验性。

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

Answer 2

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

用Ogg打包Opus很简单，我converted some code I found from JavaScript to C#。

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

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

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