Node.js 视频流 WEBM Live Feed 到 HTML

Question

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

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

我如何通过在 VIDEO 标记中添加 URL 来将这些内容以永无止境的实时流中的 HTTP 请求流回 HTML 网页？

像这样：

<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 服务器，但我尚未对此进行研究。

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