Node.js 视频流式传输 WEBM 直播到 HTML

Question

我有一个 node.js 服务器通过 socket.io 从网页接收 WEBM blob 二进制数据小数据包！

(navigator.mediaDevices.getUserMedia -> stream -> mediaRecorder.ondataavailable -> DATA 。我正在将该 DATA 发送回服务器。因此包括时间戳和二进制数据。

如何通过在 HTML 网页中添加 URL 视频标签，在永无止境的直播流中通过 http 请求返回这些内容？

像这样：

<video src=".../video" autoplay></video>

我想创建一个实时视频流，基本上将我的网络摄像头流回一个 html 页面，但我有点不知该怎么做。请帮忙。谢谢

编辑：我正在使用 express.js 来为应用程序提供服务。

我只是不确定我需要在服务器上用即将到来的 webm 二进制 blob 做什么才能正确地服务它以供端点 /video

上的 html 页面使用

请帮忙:)

Answer 1

在多次失败的尝试之后，我终于能够构建我想要构建的东西：

通过 socket.io 直播视频流。

所以我所做的是：

1. 启动getUserMedia启动网络摄像头
2. 启动 mediaRecorder 设置为 100 毫秒的记录间隔
3. 在每个可用块上通过 socket.io 向服务器发出一个事件，并将 blob 转换为 base64 字符串
4. 服务器将 base64 转换后的 100 毫秒视频块发送回所有连接的套接字。
5. 网页获取块并使用mediaSource和sourceBuffer将块添加到缓冲区
6. 将媒体源附加到视频元素，瞧 :) 视频将流畅播放。只要你按顺序附加每个块并且你不跳过块（在这种情况下它停止播放）

成功了！但是无法使用.. :(

问题是 mediaRecorder 进程 CPU 密集，页面 cpu 使用率跃升至 15%，整个进程太慢了。

通过 socket.io 的视频流有 2.5 秒的延迟，即使不通过 socket.io 发送 blob 但在同一页面上呈现它们也几乎相同。

我发现这很有效，但不适用于可持续的视频聊天服务。它不是为此而设计的。 mediaRecorder 可以录制网络摄像头视频供稍后播放，但不能用于直播。

我想对于直播来说，WebRTC 是没有办法的，您必须使用 WebRTC 将视频流发送到对等点或服务器以发送到其他对等点。 请勿尝试使用 mediaRecorder 构建实时视频聊天服务。你只会浪费你的时间。我为你做了那件事 :) 所以你不必这样做。 看看 webRTC。您可能必须使用 TURN 服务器。 Twilio 提供 STUN、TURN 服务器，但需要花钱。但是您可以 运行 您自己的带有 Coturn 和其他服务的 TURN 服务器，但我尚未对此进行调查。

谢谢。希望对某人有所帮助。