Question

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

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

在流式传输getuserMedia之前，可以在canvas元素中对其进行修改，然后传输此对象吗？

由于

Answer 1

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

但可能在将来，您可以瞥见最近的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/

上找到很好的例子

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

2 个答案: