Node.js 视频流 WEBM Live Feed 到 HTML

Question

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

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

如何将这些流返回到永无止境的实时流中的 http 请求，只需在 VIDEO 标记中添加 URL 即可由 HTML 网页使用？

像这样:

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

我想创建一个实时视频流，基本上将我的网络摄像头流回 html 页面，但我有点迷失了如何做到这一点。请帮忙。谢谢

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

我只是不确定我需要在服务器上对即将到来的 webm 二进制 blob 执行什么操作，才能正确提供服务以供端点/video 上的 html 页面使用

请帮忙:)

Answer 1

经过多次失败的尝试，我终于能够构建我想要的东西:

通过 socket.io 进行实时视频流传输。

所以我正在做的是:

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

它成功了!但无法使用..:(

问题是 mediaRecorder 进程是 CPU 密集型的，页面 cpu 使用率跳至 15%，整个过程太慢。

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

我发现这可行，但不适用于可持续的视频聊天服务。它只是不是为此而设计的。为了录制网络摄像头视频以便稍后播放，mediaRecorder 可以工作，但不能用于实时流式传输。

我想对于实时流媒体来说，没有办法绕过 WebRTC，您必须使用 WebRTC 将视频流发送到对等方或服务器以发送给其他对等方。 不要尝试使用 mediaRecorder 构建实时视频聊天服务。你只会浪费你的时间。我为你做了这个:)所以你不必这样做。 只需查看 webRTC。您可能必须使用 TURN 服务器。 Twilio 提供 STUN、TURN 服务器，但需要花钱。但是您可以使用 Coturn 和其他服务运行您自己的 TURN 服务器，但我还没有研究这一点。

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