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

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

javascripthtmlaudiohtml5-audioaudio-streaming

8

 

 

我们需要用无插件的解决方案替换我们的NPAPI浏览器插件。我们有第三方输入设备，以Opus“帧”的形式提供给我们实时音频。我们使用二进制WebSockets将这些帧传输到浏览器，然后将数据转发到我们的NPAPI插件进行解码和音频播放。请参见图片。 应考虑以下要求，采取何种方法来满足这些要求，以用HTML5代替NPAPI插件： 1.将端到端延迟最小化，不超过3-5秒（假设网络延迟为200毫秒）。 2.提供一种应用音频过滤器的方法（客户端/浏览器端）。 使用html5音频标记似乎会引入大量延迟，因为各种浏览器在开始播放之前需要缓冲一定数量的音频（15-30秒）。我们了解到Opus可能不被所有浏览器支持。如果需要（尽管我们宁愿不减少带宽），我们可以在发送数据到浏览器之前，在Web服务中将Opus帧封装到Ogg容器中。从html5rocks的一个演示中HTML5 Audio Playground，看起来#2是可能的。 如果这是一个不合适的地方来提出这样的设计问题，请建议其他更合适的论坛/群组。 感谢您提供的任何帮助或建议。

- Tony

 

3个回答

---

3

 

 

我有一个类似的情况。我一直在使用WebSockets和媒体源扩展来在Google Chrome中播放MP3音频，延迟很小，但是当与MSE一起使用时，某些其他浏览器不支持MP3编解码器。事实证明，大多数浏览器（至少是Chrome、Firefox、Opera和Edge）可以通过MSE本地播放Opus，只要它被正确地封装在MP4或WebM容器中。 将Opus打包到Ogg中非常简单，我从JavaScript转换了一些代码到C#。 在WebM中打包Opus有些复杂。我从头开始编写了这段C#代码，基于WebM/Matroska和EBML规范。通过HTTP服务，在Chrome和Firefox中播放时正常，但是VLC似乎无法通过HTTP流式传输Opus/WebM。至少Chrome要求时间序列从0开始，因此在服务器端打包不是一个好的选择，因为那将需要修改分发系统。 最后，我将其转换为JavaScript，这样每个客户端都可以正确地在WebM中打包Opus帧并以0开始的时间戳启动实时流，从而在Chrome和Firefox中不需要预缓冲即可开始直播。请注意，我在传入的websocket数据包上使用了4字节的头部，因为现有的分发系统不能保留数据包边界（它是为MP3流构建的）。如果您每个opus帧使用一个websocket帧，并且每帧使用固定数量的采样，则可以删除此标题。 现在，唯一剩下的问题就是找到IE11、Safari和某些旧的移动浏览器的解决方案...

- Ivo Smits

---

 

如果您在答案中添加有效示例，我将奖励价值100声望的赏金。 - undefined

---

1

 

 

由于您需要自己管理所有的缓冲区等内容，我认为最好的选择是在JavaScript中解码Opus帧。作为奖励，您将获得更好的浏览器支持。 Aurora.js项目支持此功能: https://github.com/audiocogs/opus.js不过目前还是有些实验性质的。 如果您不必使用Opus和WebSocket，则可以有更多可用选项。在大多数情况下，标准<audio>标签不需要超过几秒钟的音频缓冲即可开始播放。当需要更长时间时，通常是因为内容类型标头错误，播放器软件必须确定它是什么，需要更大的缓冲区才能工作。或者，存在某种其他同步问题。

- Brad

---

 

有趣的是，我尝试使用音频标签，但总是在播放之前缓冲15-30秒。 - Tony

 

@Tony 请尝试页面右上方附近的音频标签：http://waug.fm/。你在那里有同样的问题吗？这是我其中一个流媒体服务器上托管的流，当我点击播放时，它会立即开始播放。 - Brad

 

但我们不知道数据源中有多少延迟。流媒体提供商可能会缓冲相当多的数据。当我为浏览器准备了250K-500K的音频时，我也可以获得“即时”播放，但那是15-30秒的音频。 - Tony

 

我刚刚查看了你的网站，情况正是如此，即使你没有点击“播放”，页面也会加载流（基本上是在本地排队），即使我点击播放，页面渲染时浏览器已经下载了500K。 - Tony

 

@Tony 是的，在这种情况下，有一个20秒的服务器端缓冲区，尽可能快地向客户端刷新。我只是想排除网络问题，但如果该站点在点击播放前进行缓冲，那么你是对的，这不是一个好的测试。无论如何，在完全未缓冲的流上，我已经能够使用音频标签满足您的延迟要求。我没有现成的未缓冲的流，但如果您想尝试，我可以设置一个。基本上，如果编解码器被正确识别并且帧被对齐，它将启动得很快。 - Brad

 

你是否有其他SO文章或其他地方的链接，讨论<audio>标签中的“缓冲 vs 编解码器”问题？我将挖掘我的旧<audio>测试站点/工具（最初使用PCM-to-mp3），看看是否可以使用opus（我假设需要将其放置在Ogg容器中）。 - Tony

---

0

 

 

为什么不直接在客户端使用JS解码OPUS并播放PCM呢？所有主流浏览器都支持PCM。在这里你可以找到解码器工作线程 - https://github.com/samirkumardas/another-libopus.js 和播放器 - https://github.com/samirkumardas/pcm-player。我亲自进行了测试。