我想使用canvas元素作为webrtc通信视频部分的mediastreamsource，任何方向都将是有帮助的，对网络进行了搜索，没有找到太多讨论此主题的资源
*长背景故事*
问题是，我无法直接从摄像机发送视频，这是显示之前我处理视频的要求的一部分(某些图像处理内容，超出此问题的范围)。
以前，在另一个对等方的浏览器上，我没有使用<video>标签直接显示视频，而是对一个隐藏的canvas元素进行了一些处理，然后将详细信息复制到了另一个 Canvas 上(我使用settimeout来保持绘图，这给出了illusion of live video )。
现在，客户端希望在传输视频之前完成处理，因此我使用webrtc直接传递音频流(以前，音频和视频都是通过webrtc发送的)。对于视频流，我有两种解决方案:
脚步:
a)使用websockets( yes, goes through server)，这带来了可怕的滞后并最终导致浏览器崩溃。
b)使用RTCDataChannel，它的性能要好得多，但有时会无故失败。我还遇到了其他一些问题(例如，由于发送了jpeg而不是webp，因此使用了额外的带宽)。
另一个主要问题是，因为我正在使用超时:当我切换选项卡时，帧速率在另一侧下降。
因此，有什么方法可以代替我手动将隐藏的 Canvas 用作mediastreamsource吗？
最佳答案
mozCaptureStreamUntilEnded将成为Martin Thompson正在为工作组工作的提案的基础，该提案应直接连接到MediaStream。在Firefox中，根据此处的注释，一种变通方法是mozCaptureStreamUntilEnded，它来自从MediaStream捕获的 Canvas 中提供的feed。一个丑陋的序列，这就是为什么我们将允许a的直接输出到MediaStream的部分原因(同时还对captureStream进行了标准化)。
请注意，将mozCaptureStream(UntilEnded)馈送到PeerConnection已中断了一段时间(部分原因是到目前为止它是非标准的)。它已在Firefox 36中修复(由于发布 channel 将在6周内发布；下周将发布Beta版)。请参阅错误1097224和错误1081409
在Chrome和Firefox上，令人难以置信的骇人听闻的方式是将视频放在一个窗口中，然后对该窗口进行屏幕捕获。我不建议这样做，因为它需要屏幕共享权限，选择窗口等。
Chrome(或Firefox)的唯一其他选择是将视频帧另存为JPEG(如您所述)并通过DataChannel发送。有效的Motion-JPEG，但由JS运行。帧速率和质量(以及延迟)将受到影响。您可能想使用一个不可靠的 channel ，因为发生错误时，您可以丢弃该帧并仅解码下一帧(毕竟是MJPEG)。另外，如果延迟过高，请减小帧尺寸!您将需要估计端到端延迟；最好的方法是将数据 channel 上的解码时间反馈给发送方，并让其使用该数据包的接收时间来估计延迟。您更关心延迟的变化，而不是绝对值!!
关于javascript - 在webrtc中创建和传输自定义媒体流，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27834217/