What is WebRTC? How does it work?

Tram Ho

WebRTC is used for peer-to-peer networking on the web, what does that mean? That means your browser, for example, can connect to another browser and share different types of data between them, like video, audio stream or just some JSON data fragments … For today’s example, we will learn how WebRTC works.

Divide & Conquer

WebRTC contains many classes and objects such as MediaStream, RTCPeerConnection, RTCDataChannel, etc. There are also some difficult words like NATS, Stunt, Signaling Server …


Before we start streaming video from one browser to another, the first thing we have to do is use the webcam data somehow. Because, we will be using the MediaStream API MediaStream API which provides the ability to capture microphone or webcam streaming on the device. Even if the data is not being sent, we can still display the webcam view inside the web page. All we have to do is ask our users if we want to give us that kind of permission, here’s how we do it using javascript.

Whenever we call this function. The browser will pop up a warning popup saying the app is trying to access the camera.

And if the user accepts, then we take the stream of using the camera session and integrate it into the web browser. So we can watch the video immediately.


After we have the public camera session in place, we can now send that session to any other browser, but how do we do that? We will use RTCPeerConnection for that Before explaining how RTCPeerConnection works, first we need to know a few points after the following line:

Signaling Servers

We cannot avoid some servers, even when the browsers are communicating with each other.

First of all, the browser needs to find another browser somehow to start talking to each other, that’s where the Signaling Server is.

This is a simplified version of starting to communicate with webRTC.

Suppose we want to stream video from Browser “Darth Vader” to browser “luke skywalker”, this is how the conversation will start Darth Vader hey Signaling Server, I want to connect with someone I know, you can also grant my Unique Identifier? (we call createOffer method)

Signaling Server

hey Darth Vader, sure i can give you a unique identifier, here’s one (this method will return a unique identifier number)

Darth Vader

thank you Signaling Server I have set this unique identifier for my “local descriptor” so It becomes my Unique Identifier (call the setLocalDescription method with the createOffer response returned)

Hello Luke skywalker, I am trying to start WebRTC connection with you, this is my Unique Identifier (currently we are sending this Unique Identifier to Luke skywalker browser, we can send the way we want, we can send it over the socket.the problem, the important part is that Luke skywalker somehow gets this data)

Luke skywalker

Hello Dad (Darth Vader), I heard you want to pass some data with me. I already have your unique ID, I will put that code in my remote descriptor so you know who I’m talking to (call setRemoteDescription with Darth Vaders’s unique identifier)

Hi Signaling Server, I want to accept an offer from my dad and I also want a Unique Identifier so my dad can find me (call the “generate answer” method)

Hello, Luke skywalker, sure you can get a unique Identifier below.

Thanks Luke skywalker, Signaling Server, I’ll put it in my local descriptor (call the setLocalDescriptor method with the response “createAnswer”).

Hey dad, it’s my unique identifier (send identifier in the same way).

Darth Vader

great son, i have cached, i will put it in my remote descriptor (call setRemoteDescriptor with Unique Identifier)

Now we can finally share our stream

Let’s do it together

Here is how we can implement the communication with the above description as follows

So we have 2 instances of RTCPeerConnection and they are just sharing their unique identifier with each other.


WebRTC may seem intimidating, but it’s really nothing but starting a chat with two browsers that have a unique identifier. The joy you’ll get when you first share some video streams between two browsers is really worth spending a few hours or days learning it.

You can read more about webrtc through this course: https://www.tutorialspoint.com/webrtc/index.htm

Share the news now

Source : Viblo