使用 WebRTC 从画布元素流式传输视频

Question

我正在使用 WebRTC 进行点对点视频通信，并且我想在将视频过滤器发送到远程对等点之前将视频过滤器应用于本地网络摄像头视频。

我正在考虑的方法是将本地网络摄像头视频发送到画布元素，在那里我将 javascript 过滤器应用于视频。 然后我想使用 WebRTC 将视频从画布元素流式传输到对等方。 但是，我不清楚这是否可能。

是否可以使用 WebRTC 从画布元素流式传输视频？ 如果是这样，如何做到这一点？ 或者，我是否可以考虑其他任何方法来实现我的目标？

Answer 1

现在是 2020 年 4 月； 您可以使用canvas.captureStream()方法来实现这一点。

有一篇关于如何使用它的优秀文章，以及 github 上的几个演示。 请参阅以下链接：

捕获流

从画布元素流式传输到对等连接

因此，基本上，您可以在画布上应用所有转换，并从画布流式传输到远程对等点。

Answer 2

Firefox 支持mozCaptureStreamUntilEnded ，但生成的流无法附加到对等连接。

通过<canvas>播放更容易，但是来自<video>元素的流媒体需要媒体处理 API（capture-stream-until-ended）和 RTCPeerConnection（支持所有功能）。

我们可以从<canvas>获取图像，但是我不确定我们是否可以从<canvas>生成 MediaStream。

因此， mozCaptureStreamUntilEnded 仅对预先录制的媒体流有用。

Answer 3

我的解决方案是，将普通流发送到对等方，也传输，它必须如何修改，所以在另一方面，而不是直接在视频元素中显示（播放视频 n 隐藏元素），你会保持使用 settimeout/requestAnimationFrame 在画布中绘制（处理后）。