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. 在每个可用块上，通过 socket.io 向服务器发出一个事件，并将 Blob 转换为 Base64 字符串
4. 服务器将 Base64 转换后的 100ms 视频块发送回所有连接的套接字。
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 服务器，但我还没有研究这一点。

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

Answer 2

我正在使用 Socket.io 和 MediaSource 构建一个屏幕共享应用程序，但在构建它时遇到了问题，你能帮我看看吗？具体问题情况在我发的issue里。谢谢。