如何在WebRtc中流式传输canvas元素？

Question

我正在搜索WebRtc，我在GitHub上发现了这个伟大的项目：

https://github.com/mexx91/basicVideoRTC

使用node.js，两台摄像机之间的通信效果很好。

流式传输getuserMedia之前可以在canvas元素中修改它，然后传输这个对象吗？

谢谢

Answer 1

目前看来这在跨浏览器兼容的方式中是不可能的。

但是可能在将来，您可以HTMLCanvasElement.captureStream最近的Firefox浏览器实现的HTMLCanvasElement.captureStream接口，请参阅https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/captureStream 。

它允许您将画布的内容捕获到可以通过WebRTC发送给您的同级的流。

Answer 2

通过getUserMedia（）方法，我们可以分别通过麦克风和网络摄像头获取编解码格式的音频和视频流。

在用户视频的url中转换此编解码器格式后，它将被分配到视频元素下的源标记中以制作完整的视频。

因此，我们从getUserMedia（）api获取的视频与其他常见视频一样，例如： -

<video width="320" height="240" controls>
  <source src="http://www.w3schools.com/tags/movie.mp4" type="video/mp4">
  <source src="http://www.w3schools.com/tags/movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

http://jsfiddle.net/ez3pA/2/

所以你可以一起做有关视频和画布元素的各种事情。 我们可以在网站上找到很好的例子http://html5doctor.com/video-canvas-magic/