May 28, 2021

Architecture for a web app to add overlays to user’s Youtube live stream video?

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

Hi guys, I am trying to build a web app for users to easily add text (as open caption) and other assets in my app as overlays in real-time to their YouTube live stream video.

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

Then, the video will be sent to Youtube live through their API.

Here are my questions:

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.

Second, should I encode the output being sent to Youtube? Can this be done from the browser too?

I'm only seeing a few node.js frameworks, and even they're not very mature (or is Webcodecs for this purpose?). Is a web app a poor choice for this task?

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?)? Is my server most likely going to be the bottleneck given YouTube's infrastructure, since video files are huge and my server is limited?

I am new to video streaming, so please excuse my lack of understanding of the subject. Also, if there's any good resource for my problem, please share them with me.

Thank you in advance!

submitted by /u/baincs
[link] [comments]