如何在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/