在浏览器中显示 RTSP H264 流的现代方式 (HTML5)

Question

是的，这个话题也时不时地出现在SO上。

我已经阅读了很多有关该主题的内容，也尝试了一些解决方案，但我有一些限制：

1. 浏览器独立性（大多数浏览器应该可以工作）
2. 平台无关（各大平台均应支持）
3. 开箱即用（无插件！）
4. 低延迟（最好在1秒以下）
5. 带宽有限（MJPEG不是一个选项）
6. 无转码！

所以展望未来：H264 流似乎非常适合约束 1 和 2。

我的源还生成实时 H264（确切地说：MPEG-4 AVC，第 10 部分）到 RTSP 容器中。

但是浏览器仍然不支持RTSP。

我检查过的内容：

• 如何将流式rtsp媒体嵌入到html5页面中
• 如何在网页中显示RTSP视频流？
• 将 RTSP 流式传输到 HTML 网站
• 在网站上显示 RTSP
• 将 RTSP 流式传输到 HTML 网站
• 如何通过网络应用程序获取 RTSP 流
• 适用于 JavaScript/HTML5 的 RTSP 解决方案
• 在 HTML5 中通过 RTSP 或 RTP 进行流式传输

上面所有的帖子都与这个问题相关，并且有很多有价值的信息。

我还读过 2014 年的一篇非常好文章（！），内容详细且很有前瞻性。

所以，从今天开始，最好的解决方案是这样的：

1. 解析RTSP并提取h264流
2. 重组流（将其转换为碎片MP4）
3. websocket（见下文）
如果浏览器具有
4. MSE，fMP4 可以轻松地通过 HTML5 视频播放（另一种方法是使用 broadway.js，它很酷，但占用大量 CPU 资源）

有一些解决方案，其中步骤 1 和 2 发生在服务器端，然后 fMP4 被推送到 websocket 中。客户端消费来自websocket的数据并将其传递给MSE组件进行显示。

2014年的文章表明，步骤2也可以发生在客户端。在这种情况下，只有步骤 1 发生在服务器上，然后 h264 被推送到 websocket 中，当然在客户端有重组和显示。

Streamedian 乍一看似乎是一个很好的解决方案，但他们没有发布他们的服务器端代码，而且他们的网站返回了一天 502 错误。

我不想使用GStreamer或ffmpeg，它们都太重了。

但是有一些不错的物品可以提供帮助：

• MP4Box.js - 对 MP4 文件进行分段以与媒体源扩展 API 一起使用
• mux.js - 视频文件的检查和操作工具

回到我的列表，step2可以用 MP4Box 完成 - 至少我相信/希望。

Step3 和 step4 很简单，有大量关于这些的操作方法。

但是我对step1有点困惑。它应该在服务器端完成，最好使用可以轻松与 websocket 交互的语言（例如 java）。

这就是我的问题的重点：我需要在java中从RTSP中提取h264流，我怎样才能做到简单而不调用外部程序？

Answer 1

在浏览器中使用WebCodecs API解码H.264包怎么样？ 该 API 将利用现代浏览器提供的硬件加速。 顺便说一句，在我看来，延迟主要发生在解码过程中。