如何在WebRtc中流式傳輸畫布元素？

Question

我正在尋找有關的WebRTC，我發現在GitHub上這一偉大工程：

https://github.com/mexx91/basicVideoRTC

2個攝像頭之間的通信使用node.js中的偉大工程

它可能在流之前getuserMedia修改它在一個畫布元素，因此流這個對象？

感謝

Answer 1

通過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/

所以，你可以做各種事情有關視頻和canvas元素在一起。我們可以在一個網站上得到這個很好的例子http://html5doctor.com/video-canvas-magic/

Answer 2

它似乎目前這是不可能在跨瀏覽器兼容的方式。

但是它可能在未來，您可以看看最近的Firefox瀏覽器實現的HTMLCanvasElement.captureStream界面，請參閱https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/captureStream。

它允許您將畫布的內容捕獲到可以通過WebRTC發送給對等的流。