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

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

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

是否可以使用WebRTC从画布元素流式传输视频？如果是，如何做到这一点？或者，我还有其他的方法来完成我的目标吗？ firefox支持，但生成的流无法连接到对等连接

播放

更容易，但是来自

元素的流媒体需要媒体处理API（捕获流直到结束）以及RTPeerConnection（支持所有功能）

我们可以从

获取图像，但我不确定是否可以从

生成MediaStream

---

因此，MozCaptureStreamUntellend仅在预录制的流媒体时才有用

我的解决方案是，将正常流发送给对等方，并传输它必须如何修改，因此在另一方面，您将不直接在视频元素中显示（播放视频并隐藏元素），而是在画布中继续绘制（处理后）使用settimeout/requestAnimationFrame。

现在是2020年4月；您可以使用该方法实现这一点

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

---

因此，基本上，您可以应用画布上的所有转换，并从画布流到远程对等方。

如果标准过滤器（如灰度、模糊、深褐色等）足够，您可以在远程对等方应用处理后的流，而不是发送处理后的流。