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

【问题标题】：Stream video from a canvas element using WebRTC使用 WebRTC 从画布元素流式传输视频
【发布时间】：2014-09-18 01:11:32
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：