合并捕获的视频 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 中播放。