如何在不使用画布的情况下将摄像头和屏幕分享视频结合起来？

Question

我有一个webrtc react应用程序，用户可以将他们的流同时直播到youtube，facebook等(像restream.io)。

我想发送两个流(屏幕共享和网络摄像头)作为一个视频(一半屏幕共享和一半网络摄像头，网络摄像头叠加在屏幕共享，字幕在视频顶部)，如studio.restream.io

在画布上绘制数据流，并使用websocket将数据输送到后端，在后端将其转码为rtmp并发送到fb、yt等，一切都很正常(此方法仅适用于高端PC)。

但这种方法唯一的问题是，当我在画布上绘制流时，它需要大量的cpu和浏览器挂起(只有当你有gpu的时候才有效)。

问题是如何优化这一点？

我们是否需要一个后端服务来使用ffmpeg合并视频？或者有没有办法在浏览器中做到这一点？

Answer 1

通常，浏览器中的canvas操作(以及许多其他与绘图相关的操作)假定有GPU可用，并且当它们必须在CPU上运行时非常慢。

对于您正在做的事情，您可能确实需要在具有GPU的硬件上运行浏览器。

你说得对，你可以使用ffmpeg或GStreamer更灵活地进行这种合成。在Daily.co中，我们已经广泛地使用了ffmpeg和GStreamer。

对于我们的生产实时流媒体工作人员，我们使用在没有GPU的亚马逊网络服务实例上运行的GStreamer。我们的媒体服务器将WebRTC rtp曲目作为原始rtp转发到GStreamer进程，该进程对曲目进行解码、合成视频曲目、混合音频曲目并编码为RTMP。GStreamer有一个陡峭的学习曲线，是一个与浏览器完全不同的工具包，但它的效率和灵活性也是在浏览器中运行所不能达到的。