如何在不使用 canvas 的情况下合并网络摄像头和屏幕共享视频？
How to combine webcam and screen share video without using canvas?
我有一个 webrtc React 应用程序，用户可以在其中同时将他们的流传输到 youtube、facebook 等（例如 restream.io）。
我想像工作室一样将两个流（屏幕共享和网络摄像头）作为一个视频发送（一半屏幕共享和一半网络摄像头，网络摄像头覆盖在屏幕共享上，字幕在视频顶部）。restream.io
在 canvas 上绘制流并使用 websocket 将数据传输到后端，在后端将数据转码为 rtmp 并发送到 fb、yt 等，一切正常（此方法仅适用于高端 PC） .
但是这种方法的唯一问题是当我在 canvas 上绘制流时它需要很多 cpu 并且浏览器挂起（只有当你有 gpu 时才有效）。
问题是如何优化这个？
我们是否需要后端服务来使用 ffmpeg 合并视频？或者
有什么办法可以在浏览器中实现吗？
一般来说，浏览器中的 canvas 操作（以及许多其他与绘图相关的操作）假定 GPU 可用，并且当它们必须 运行 CPU.
对于您正在做的事情，您可能确实需要 运行 具有 GPU 的硬件上的浏览器。
你说得对，使用ffmpeg或GStreamer可以更灵活地进行这种合成。我们在 Daily.co.
处广泛使用了 ffmpeg 和 GStreamer
对于我们的生产直播工作人员，我们在没有 GPU 的 AWS 实例上使用 GStreamer 运行ning。我们的媒体服务器将 WebRTC rtp 轨道作为原始 rtp 转发到 GStreamer 进程，该进程解码轨道、合成视频轨道、混合音频轨道并编码为 RTMP。 GStreamer 有一个陡峭的学习曲线，是一个与浏览器完全不同的工具包，但它的效率和灵活性也是 运行在浏览器中无法做到的。
我有一个 webrtc React 应用程序，用户可以在其中同时将他们的流传输到 youtube、facebook 等（例如 restream.io）。
我想像工作室一样将两个流（屏幕共享和网络摄像头）作为一个视频发送（一半屏幕共享和一半网络摄像头，网络摄像头覆盖在屏幕共享上，字幕在视频顶部）。restream.io
在 canvas 上绘制流并使用 websocket 将数据传输到后端，在后端将数据转码为 rtmp 并发送到 fb、yt 等，一切正常（此方法仅适用于高端 PC） .
但是这种方法的唯一问题是当我在 canvas 上绘制流时它需要很多 cpu 并且浏览器挂起（只有当你有 gpu 时才有效）。
问题是如何优化这个？
我们是否需要后端服务来使用 ffmpeg 合并视频？或者 有什么办法可以在浏览器中实现吗？
一般来说，浏览器中的 canvas 操作（以及许多其他与绘图相关的操作）假定 GPU 可用，并且当它们必须 运行 CPU.
对于您正在做的事情，您可能确实需要 运行 具有 GPU 的硬件上的浏览器。
你说得对，使用ffmpeg或GStreamer可以更灵活地进行这种合成。我们在 Daily.co.
处广泛使用了 ffmpeg 和 GStreamer对于我们的生产直播工作人员，我们在没有 GPU 的 AWS 实例上使用 GStreamer 运行ning。我们的媒体服务器将 WebRTC rtp 轨道作为原始 rtp 转发到 GStreamer 进程，该进程解码轨道、合成视频轨道、混合音频轨道并编码为 RTMP。 GStreamer 有一个陡峭的学习曲线，是一个与浏览器完全不同的工具包，但它的效率和灵活性也是 运行在浏览器中无法做到的。