在浏览器中显示 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 网站
• 如何通过 Web 应用程序获取 RTSP 流
• 适用于 JavaScript/HTML5 的 RTSP 解决方案
• 在 HTML5 中通过 RTSP 或 RTP 流式传输

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

此外，我还阅读了 2014 年的一篇非常好的文章（！），内容详细且颇具前瞻性。

因此，截至今天，最好的解决方案是：

1. 解析 RTSP 并提取 h264 流
2. 重组流（将其转换为分段 MP4）
3. websocket（见后文）
4. 如果浏览器有MSE ，fMP4 可以很容易地通过 HTML5 视频播放（替代方法是使用很酷但 CPU 密集型的Broadway.js ）

有些解决方案是在服务器端执行第 1 步和第 2 步，然后将 fMP4 推送到 websocket 中。 客户端使用来自 websocket 的数据并将其传递给 MSE 组件进行显示。

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

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

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

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

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

回到我的列表，步骤 2 可以用MP4Box完成——至少我相信/希望。

第3 步和第4 步很简单，有很多关于这些的方法。

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

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

Answer 1

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