使用WebRTC流HTML5畫布活動

Question

我想使用WebRTC流式傳輸HTML5畫布的活動。 一個用戶廣播了他的畫布，並且連接的對等方看到遠程對等方在其畫布上正在做什么，如果他正在畫一條線或其他任何東西，我希望連接的對等方在自己的畫布上看到更改。

我的問題是，WebRTC是否可以立即使用？ 搜索之后，我會說不是這樣。

如果沒有，您將如何處理這樣的系統？

謝謝。

Answer 1

就在這里; CANVAS元素帶有captureStream方法，該方法允許您將畫布捕獲為與RTC對等通道兼容的MediaStream。 就像將攝像機流發送給另一個對等方一樣，您也可以將捕獲的流發送給對等方以使其正常工作。

參考： https : //developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/captureStream

當然，並非所有瀏覽器都支持它； 但它是一項有用的技術，因為它可以按照您提到的方式用於CANVAS流式傳輸。

我很驚訝地看到一個2015年的回答說這是不可能的-畫布上的captureStream方法自2014-2015年就出現了……今天有很多演示可用，也許可以幫助您入門。

Answer 2

不幸的是，由於畫布不能用作視頻源，因此無法開箱即用。

必須通過在每個客戶端上本地安裝偽攝像機（模擬攝像機的驅動程序）來解決此問題，該偽攝像機記錄屏幕。 然后，可以將其用作WebRTC的源。

您可以使用WebSocket之類的方法通過服務器發送繪制命令並在接收器端重播它們來模擬流傳輸，但是它當然不會成為WebRTC的集成部分（或使用其數據通道）。

更新
這個答案是1.5年前寫的，盡管有一個captureStream()接口的初稿，但它還處於初期狀態。 從那時起，該技術已經成熟，可以用於實驗用途。

但是，請注意，頁面也會指出：

這是一項實驗技術

以及

還要注意，隨着規范的更改，實驗技術的語法和行為可能會在將來的瀏覽器版本中發生變化。

此功能僅在Chrome（以及新的Opera）中和Firefox中受支持，並且當前必須通過標志啟用。

換句話說，尚未考慮將其用於生產。

Answer 3

WebRTC幾乎沒有“開箱即用”的東西。 您想要做的也不例外。 但是，可以實現它，這完全取決於畫布應用程序的復雜性。

一個想法可以是渲染代表遠程畫布的本地畫布。 一旦連接了對等方，遠程對等方就可以發送您所需的信息，以便您自己復制遠程畫布的內容。

如果可能的話，則通過WebRTC的DataChannel發送此信息的方法，該方法公開類似於WebSockets的API。 由於對等連接的性質以及以亂序發送和可變數量的重新發送來發送數據包的能力，它肯定比WebSockets更快。

此處的相關信息： http : //www.html5rocks.com/en/tutorials/webrtc/datachannels/