【发布时间】：2021-06-08 13:42:49
【问题描述】：
我正在为网络会议应用程序构建白板应用程序。我研究过的所有库都使用 2 个 canvas ，顶部的 1 个用于绘图，底部的 1 个用于保存较旧的绘图（为了获得更好的性能，因为每次绘图都会清除上部的画布）。
现在我需要流式传输这些画布的内容以供其他用途，以便他们可以实时查看内容。
选项1：
captureStream 从每个画布中合并视频轨道到单个流 new MediaStream([...bottomTracks, ...topTracks])，使用 webrtc 传输流，然后从流中提取轨道，为每个轨道创建一个新流 new MediaStream([stream.getVideoTracks()[0]]) 并播放流在绝对定位的视频元素上。它有效，但我的老板不喜欢它，不知道为什么？还没有！
这有缺点吗？
选项2：
创建第三个屏幕外画布并定期在屏幕外画布上drawImage 两个画布，然后从该画布上captureStream！
那么有没有更好的方法或其他方法来实现这一点？
更新：为什么我使用 2 个画布？
只有一个原因，如果我想改变已经绘制的东西，不要重新绘制所有东西，你可能会问会改变什么？
对我来说有两种情况：
- 通过鼠标拖动、触摸移动或钢笔平滑已完成绘制的线条（使其更像自然书写，请查看http://fabricjs.com/freedrawing）
- 通过鼠标拖动、触摸移动或钢笔绘制形状
我知道我可以在每次更改时重新绘制所有内容，但我相信它在低端设备上的性能会很低。
2 个画布绝对位于彼此之上，实际的用户绘图是在上部画布上完成的，当它完成并对其应用任何所需的增强时，线条/形状将绘制在底部画布和上部画布上画布被清除。
【问题讨论】：
-
最好的方法是先将一个画布渲染到屏幕上。不知道有人认为展示两幅不同的画布会有什么好处，但无论如何它们都必须由画家合成，所以最好直接自己做。此外，对于第一个解决方案，明显的缺点是您通过网络发送了两倍以上的数据。您可以获得两个，而不是只有一个视频源。 （此外，不确定您的两个视频轨道都会像这样保存，但无论如何您都可以将它们作为自己的 MediaStream 发送）。
-
@Kaiido 2 画布主要用于绘制形状，在绘制完线条后通过拖动平滑线条
-
没有解释为什么在屏幕上呈现两个画布。合成可以直接由您的代码在渲染的画布上完成。
-
@Kaiido 一旦你在画布上渲染了一些东西，你就不能再改变它了（比如在纸上画画）你必须清除整个画布并重新渲染所有东西，你还必须保留一个列表之前绘制的所有内容，以便您可以再次绘制它们
标签： javascript canvas webrtc mediastream