使用 WebRTC 從畫布元素流式傳輸視頻

Question

我正在使用 WebRTC 進行點對點視頻通信，並且我想在將視頻過濾器發送到遠程對等點之前將視頻過濾器應用於本地網絡攝像頭視頻。

我正在考慮的方法是將本地網絡攝像頭視頻發送到畫布元素，在那里我將 javascript 過濾器應用於視頻。 然后我想使用 WebRTC 將視頻從畫布元素流式傳輸到對等方。 但是，我不清楚這是否可能。

是否可以使用 WebRTC 從畫布元素流式傳輸視頻？ 如果是這樣，如何做到這一點？ 或者，我是否可以考慮其他任何方法來實現我的目標？

Answer 1

現在是 2020 年 4 月； 您可以使用canvas.captureStream()方法來實現這一點。

有一篇關於如何使用它的優秀文章，以及 github 上的幾個演示。 請參閱以下鏈接：

捕獲流

從畫布元素流式傳輸到對等連接

因此，基本上，您可以在畫布上應用所有轉換，並從畫布流式傳輸到遠程對等點。

Answer 2

Firefox 支持mozCaptureStreamUntilEnded ，但生成的流無法附加到對等連接。

通過<canvas>播放更容易，但是來自<video>元素的流媒體需要媒體處理 API（capture-stream-until-ended）和 RTCPeerConnection（支持所有功能）。

我們可以從<canvas>獲取圖像，但是我不確定我們是否可以從<canvas>生成 MediaStream。

因此， mozCaptureStreamUntilEnded 僅對預先錄制的媒體流有用。

Answer 3

我的解決方案是，將普通流發送到對等方，也傳輸，它必須如何修改，所以在另一方面，而不是直接在視頻元素中顯示（播放視頻 n 隱藏元素），你會保持使用 settimeout/requestAnimationFrame 在畫布中繪制（處理后）。