带有网络摄像头覆盖的 MediaStream 桌面捕获

Question

我目前正在尝试使用 MediaStream 构建基于 WebRTC 的应用程序来捕获计算机屏幕并将其保存到视频文件中。我有它的工作，但是，现在我正在尝试为录制的视频添加一个额外的图层，以便出现网络摄像头。

据我了解，使用 Media Streams API，我不能同时使用两个视频源。所以我决定将捕捉到的视频绘制到 Canvas 元素上，并在上面放置网络摄像头，然后从 Canvas 获取流。但我遇到了问题，无法正常工作

我正在尝试构建类似于 Loom 的东西，桌面捕获和网络摄像头在一个圆圈的顶部分层。

我想知道我是否朝着正确的方向前进如果你要构建这样的东西，你会如何处理它？

Answer 1

如果可以，最好的方法可能是流式传输两个 MediaStream：一个用于摄像头，另一个用于截屏。
然后它只是两个

当然，您也可以在发射器端进行合成，将两个视频都绘制到 HTMLCanvasElement，然后使用其captureStream 方法流式传输从此画布生成的 MediaStream，但我想它最终会比两个流选项，画布流质量通常很差...