合並捕獲的視頻 stream of 2 html5 canvas

Question

我正在為 web 會議應用程序構建一個白板應用程序。 我調查過的所有庫都使用 2 個 canvas，頂部有 1 個用於繪圖，底部有 1 個用於保存舊圖紙（為了獲得更好的性能，因為上部 canvas 在每次繪制時都會被清除）。

現在我需要 stream 將這些畫布的內容用於其他用途，以便他們可以實時看到內容。

選項1：

captureStream from each canvas and merge the videtracks into a single stream, new MediaStream([...bottomTracks, ...topTracks]) , transfer the stream using webrtc and then extract the tracks from the stream, create a new stream for each track new MediaStream([stream.getVideoTracks()[0]])並在絕對定位的視頻元素上播放流。 它有效，但我的老板不喜歡它，不知道為什么？ 然而！
這有缺點嗎？

選項2：

創建第三個屏幕外 canvas 並定期在屏幕外drawImage上繪制兩個畫布的圖像，然后從該畫布中captureStream流！

那么有沒有更好的方法或另一種方法來實現這一目標？

更新：為什么我使用 2 個畫布？

只有一個原因，如果我想改變已經繪制的東西，不要重新繪制所有東西，你可能會問什么會改變？
對我來說有兩種情況：

1. 通過鼠標拖動、觸摸移動或鋼筆平滑已完成繪制的線條（使其感覺更像自然書寫，請查看 http://fabricjs.com/freedrawing ）
2. 通過鼠標拖動、觸摸移動或筆繪制形狀

我知道我可以在每次更改時重新繪制所有內容，但我相信它在低端設備上的性能會很低。

2 幅畫布絕對位於彼此之上，實際用戶繪圖在上部 canvas 上完成，完成並對其應用任何所需的增強功能后，線條/形狀將繪制在底部 canvas 上，上部 ZFCC790C72A86190DDC1B54 被清除.

Answer 1

正如kaiido 在評論中指出的那樣，屏幕上只需要一個canvas。

在record.a.video 中，我將 2 個視頻流（屏幕視頻和攝像頭視頻）疊加到一個 canvas 上。 然后我使用另一個媒體 Stream 從 canvas 中提取視頻並作為 VOD 共享或直播。

請注意，音頻必須以不同方式處理，因為它在 Canvas 中播放。