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

Question

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

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

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

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

标签： javascriptchromiummediastream

Answer 1

如果可以的话，最好的可能是流式传输两个 MediaStream：一个用于相机，另一个用于截屏。
然后它只是两个 <video> 元素的 css 叠加。

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