在webrtc中创建和传输自定义媒体流

Question

我想使用canvas元素作为webrtc通信的视频部分的mediastreamsource,任何方向都会有所帮助,搜索网络,找不到讨论这个主题的资源

*长篇背景故事*

问题是,我无法直接从相机发送视频,这是我在显示之前处理视频(一些图像处理内容,超出此问题的范围)的要求的一部分.

以前,在另一个对等的浏览器上<video>,我没有使用标签直接显示视频,而是对隐藏的画布元素进行了一些处理,然后将细节复制到另一个画布(我使用了settimeout来保持绘图,这给了它illusion of live video).

现在,客户希望在传输视频之前完成处理,因此我使用webrtc直接传递音频流(之前音频和视频都是通过webrtc发送的).对于视频流,我有两个解决方案:

脚步:

1. 在本地对等体上处理视频,在隐藏的画布上绘制.简单的部分.

2. 使用超时重复捕获图像数据并传输
   a)使用websockets( yes, goes through server),这带来了可怕的延迟和浏览器的最终崩溃.
   b)使用RTCDataChannel,具有更好的性能,但有时无故失败.我还有其他几个问题(例如使用额外带宽,因为发送jpeg而不是webp).

另一个主要问题是,因为我正在使用超时:当我切换标签时,帧速率在另一侧下降.

那么,有什么方法可以将隐藏的画布用作mediastreamsource而不是我手动操作吗？

Answer 1

mozCaptureStreamUntilEnded 将成为 Martin Thompson 正在为工作组制定的一项提案的基础，以直接连接到 MediaStream。根据此处的评论，Firefox 中的解决方法是 mozCaptureStreamUntilEnded，它来自从 MediaStream 捕获的画布的馈送。一个丑陋的序列，这就是我们允许直接将 a 输出到 MediaStream（并对 captureStream 进行标准化）的部分原因。

请注意，向 PeerConnection 提供 mozCaptureStream(UntilEnded) 的操作暂时中断（部分原因是迄今为止它还不是标准的）；该问题已在 Firefox 36 中得到修复（将于 6 周后发布渠道；下周将进入 Beta 版）。请参阅错误 1097224 和错误 1081409

Chrome 和 Firefox 上令人难以置信的黑客方式是将视频放入窗口中，然后对窗口进行屏幕截图。我不建议这样做，因为它需要屏幕共享权限、选择窗口等。

Chrome（或 Firefox）的唯一其他选项是将视频帧保存为 JPEG（正如您提到的）并通过 DataChannel 发送。实际上是 Motion-JPEG，但由 JS 运行。帧速率和质量（和延迟）将会受到影响。您可能想要使用不可靠的通道，因为出现错误时您可以丢弃该帧并只解码下一个帧（毕竟它是 MJPEG）。另外，如果延迟太高，请减小帧大小！您需要估计端到端延迟；最好的方法是通过数据通道将解码时间反馈给发送方，并让它使用该数据包的接收时间来估计延迟。你更关心延迟的变化而不是绝对值！