I'm looking at a way to implement video encoder using web browser. Youtube and Facebook already allow you to go live directly from the web browser. I'm wondering how do they do that?

There are a couple of solutions I've researched:

• Using web socket: using web browser to encode the video (using mediarecorder api) and push the encoded video to the server to be broadcast.
• Using WebRTC: web browser as a WebRTC peer and another server as the other end to receive the stream and re-broadcast (transcode) using other means (rtmp, hls).

Is there any other tech to implement this that those guys (YouTube, Facebook) are using? Or they also use one of these things?

Thanks

I'm looking at a way to implement video encoder using web browser. Youtube and Facebook already allow you to go live directly from the web browser. I'm wondering how do they do that?

There are a couple of solutions I've researched:

• Using web socket: using web browser to encode the video (using mediarecorder api) and push the encoded video to the server to be broadcast.
• Using WebRTC: web browser as a WebRTC peer and another server as the other end to receive the stream and re-broadcast (transcode) using other means (rtmp, hls).

Is there any other tech to implement this that those guys (YouTube, Facebook) are using? Or they also use one of these things?

Thanks

• javascript
• html
• webrtc

• i'd think websocket is used, webrtc is for peer to peer direct but last time i checked it wasn't guaranteed so you'd need to setup intermediary server called TURN? server. which would act like relay. Take a look at discord websocket scaling – Muhammad Umer Commented Apr 3, 2019 at 1:07
• @MuhammadUmer WebRTC can be used to connect between a browser and a server just fine. The server is just one of the "peers" in this scenario. – Brad Commented Apr 3, 2019 at 1:09
• yea to server, but not to other users if they are behind NAT. server works because you provide url to connect to just like in websocket. – Muhammad Umer Commented Apr 3, 2019 at 1:13
• Duplicated to stackoverflow./questions/56238148/… – Winlin Commented Mar 8, 2023 at 10:46

2 Answers 2

WebRTCHacks has a "how does youtube use webrtc" post here which examines some of the technical details of their implementation.

In addition one of their engineers gave a Talk at WebRTC Boston describing the system which is available on Youtube

Correct, you've hit on two ways to do this. (Note that for the MediaRecorder method, you can use any other method to get the data to the server. Web Sockets is one way... so is a regular HTTP PUT of segments. Or, you could even use a data channel of a WebRTC connection to the server.)

Pretty much everyone uses the WebRTC method, as there are some nice built-in benefits:

• Low latency (at the cost of some quality)
• Dynamic bitrate
• Well-optimized on the client
• Able to automatically scale output if there are not enough system resources to continue encoding at a higher frame size

The downsides of the WebRTC method:

• Ridiculously plicated stack to maintain server-side.
• Lower quality (due to emphasis on low latency, BUT you can tweak this by fiddling with the SDP yourself)

If you go the WebRTC route, consider gstreamer. If you want to go the Web Socket route, I've written a proxy to receive the data and send it off to FFmpeg to be copied over to RTMP. You can find it here: https://github./fbsamples/Canvas-Streaming-Example