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

Question

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

我考虑的方法是将本地摄像头视频发送到画布元素，在那里我会应用JavaScript滤镜到视频中。然后，我想通过WebRTC从画布元素流式传输视频给同行。但是，我不确定这是否可行。

是否可以使用WebRTC从画布元素流式传输视频？如果可以，如何实现？或者，是否有其他方法可以实现我的目标？

- Alexander Marquardt

---

如果标准的滤镜（如灰度、模糊、墨色等）已经足够，你可以在远程对等方的端上应用 CSS3 滤镜，而不是发送处理后的流。 - Oleg

Answer 1

现在是2020年4月，您可以使用canvas.captureStream()方法来实现此目的。

有一篇非常好的文章介绍了如何使用它，并提供了几个github上的演示。请参阅以下链接： 捕获流 从画布元素流到对等连接 因此，基本上您可以在画布上应用所有转换并从画布流式传输到远程对等方。

- Prince Odame

Answer 2

我的解决方案是，将普通流发送给对等端，同时传输如何进行修改，因此在另一侧，而不是直接显示在视频元素中（播放视频并隐藏元素），您将保持在画布中绘制（处理后）使用setTimeout / requestAnimationFrame。

- mido

Answer 3

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

使用 <canvas> 播放更容易，但从 <video> 元素流媒体需要 Media Processing API（capture-stream-until-ended）以及 RTCPeerConnection（支持所有功能）。

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

因此，mozCaptureStreamUntilEnded 仅在预录制媒体流中有用。

- Muaz Khan