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

Question

我正在使用WebRTC进行点对点视频通信，我想将视频过滤器应用到本地网络摄像头视频，然后再将其发送到远程对等端。

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

是否可以使用WebRTC从canvas元素流式传输视频？如果是这样，怎么办呢？或者，我可以考虑采取任何其他方法来实现我的目标吗？

Answer 1

现在是2020年4月；您可以使用https://docs.typo3.org/m/typo3/reference-coreapi/master/en-us/ApiOverview/JavaScript/RequireJS/Index.html方法来实现。

有一篇很棒的文章，介绍如何使用它，以及github上的一些演示。请参阅以下链接：

canvas.captureStream()

Capture Stream

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

Answer 2

firefox支持

mozCaptureStreamUntilEnded，但生成的流不能连接到对等连接。

播放<canvas>更容易，但来​​自<video>元素的流媒体需要媒体处理API（捕获流直到结束）以及RTCPeerConnection（支持所有功能）。

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

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

Answer 3

我的解决方案是，将普通流发送给对等体，也发送，如何修改，所以在另一边，而不是直接在视频元素中显示（播放视频n隐藏元素），你可以使用settimeout / requestAnimationFrame继续在画布上绘图（处理后）。