如何在不使用画布的情况下结合网络摄像头和屏幕共享视频？答案

【问题标题】：How to combine webcam and screen share video without using canvas?如何在不使用画布的情况下结合网络摄像头和屏幕共享视频？
【发布时间】：2021-09-20 02:12:00
【问题描述】：

我有一个 webrtc react 应用程序，用户可以在其中将他们的流同步到 youtube、facebook 等（如 restream.io）。

我想将两个流（屏幕共享和网络摄像头）作为一个视频（一半屏幕共享和一半网络摄像头，网络摄像头覆盖在屏幕共享上，视频顶部的字幕）发送，例如 studio.restream.io

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

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

问题是如何优化这个？

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

【问题讨论】：

需要记住的是，如果您将这些视频合二为一，您的屏幕共享视频的质量可能会受到影响。大多数时候，屏幕共享在高分辨率、低帧率下效果更好。网络摄像头在相反的情况下可以正常工作...分辨率较低，帧速率较高。

标签： javascript webrtc video-streaming media

【解决方案1】：

一般而言，浏览器中的画布操作（以及许多其他与绘图相关的操作）假定 GPU 可用，并且当它们必须在 CPU 上运行时非常慢。

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

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

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

【讨论】：