问题描述
我有一个 webrtc react 应用程序，用户可以在其中将他们的流同时广播到 youtube、facebook 等（如 restream.io）。
我想将两个流（屏幕共享和网络摄像头）作为一个视频（一半屏幕共享和一半网络摄像头，网络摄像头叠加在屏幕共享上，视频顶部的字幕）发送，例如 studio.restream.io
在画布上绘制流并使用 websocket 将数据传输到后端，然后将其转码为 rtmp 并发送到 fb、yt 等（此方法仅适用于高端 PC），一切正常。
但这种方法的唯一问题是当我在画布上绘制流时，它需要大量的 cpu 和浏览器挂起（仅当你有 GPU 时才有效）。
问题是如何优化这个？
我们是否需要后端服务来使用 ffmpeg 合并视频？要么 有没有办法在浏览器中做到这一点？
解决方法
一般来说，浏览器中的画布操作（以及许多其他与绘图相关的操作）假设 GPU 可用，并且当它们必须在 CPU 上运行时速度非常慢。
对于您正在做的事情，您可能确实需要在具有 GPU 的硬件上运行浏览器。
您是对的，您可以使用 ffmpeg 或 GStreamer 更灵活地进行这种合成。我们在 Daily.co 上广泛使用了 ffmpeg 和 GStreamer。
对于我们的生产直播工作人员，我们使用在没有 GPU 的 AWS 实例上运行的 GStreamer。我们的媒体服务器将 WebRTC rtp 轨道作为原始 rtp 转发到 GStreamer 进程，该进程对轨道进行解码、合成视频轨道、混合音频轨道并编码为 RTMP。 GStreamer 具有陡峭的学习曲线，是一个与浏览器完全不同的工具包，但它也以在浏览器中运行的方式无法完全高效和灵活。