用于向用户的 Youtube 直播视频添加叠加层的 Web 应用程序架构?

Architecture for a web app to add overlays to users' Youtube live stream video?

我正在尝试为用户构建一个网络应用程序,以便在我的应用程序中轻松地添加文本(作为开放式字幕)和其他资产,作为实时覆盖到他们的 YouTube 直播视频。

他们将使用相机录制视频,并select从我的应用中将哪些文本添加到视频中。

然后,视频将通过他们的 API 发送到 Youtube 直播。

这是我的问题:

首先,我想知道是否可以在客户端将视频+字幕混合并发送到 Youtube 的 rtmp url,所以它简单且轻量级。

其次,我应该对发送到 Youtube 的输出进行编码吗?这也可以从浏览器完成吗? 我只看到一些 node.js 框架,甚至它们都不是很成熟(或者是用于此目的的 Webcodecs?)。网络应用程序是完成此任务的糟糕选择吗?

最后,如果我确实需要一个服务器来处理视频,应该在哪里进行编码(从用户的机器上,还是在服务器上,或者两者都有?)?考虑到 YouTube 的基础设施,我的服务器是否很可能成为瓶颈,因为视频文件很大而我的服务器有限?

我是视频流的新手,所以请原谅我对这个主题的不了解。另外,如果有任何好的资源可以解决我的问题,请与我分享。

First of all, I was wondering if mixing video + subtitle and sending it to Youtube's rtmp url can be done from the client side, so it's simple and lightweight.

您可以进行视频合成和音频混合等等,但是浏览器不支持 RTMP。要将数据发送到 RTMP 服务器,您需要将其发送到代理到最终 URL.

的服务器

They will use their camera to record their video, and select from my app which text should be added to the video.

是的,这完全没问题。每帧将所有内容绘制到 canvas。

Second, should I encode the output being sent to Youtube?

是的,你必须这样做。查看媒体记录器 API。

Lastly, if I do need a server to process the video, where should the encoding happen (from the user's machine, or in the server, or both?)?

视频必须在客户端进行编码才能首先到达服务器。然后服务器可以希望用 flv 重新打包并发送它。如果浏览器在其媒体记录器中不支持 H.264 API,那么您将拥有一个像 VP8 这样的中间编解码器,并且您必须在服务器端进行转码。

几年前,我在这里写了一篇关于如何完成所有这些步骤的教程:https://github.com/fbsamples/Canvas-Streaming-Example请注意,该教程是在 Facebook 的上下文中,但这应该教给你概念。