DEV Community

Cover image for The Magic Behind Video Calls: A Simple Guide to WebRTC
Drian
Drian

Posted on

The Magic Behind Video Calls: A Simple Guide to WebRTC

Have you ever wondered, when you make a video call through a browser, how your friend’s face can appear on your screen so quickly?

Does the video have to “fly” first to a company server overseas, and only then come back down to your phone?

The answer is: not always.

Welcome to the world of WebRTC, or Web Real-Time Communication. It is a powerful technology that allows our browsers to “talk” directly to each other.

Let’s break down how it works without getting lost in complicated terms.

1. The Basic Concept: Peer-to-Peer (P2P)

In the traditional web, communication is like sending a letter through a post office.

You, as the client, send a letter to the post office, which acts as the server. Then, the post office delivers it to your friend.

It is safe, but it can be slower.

WebRTC works differently. It uses the Peer-to-Peer concept.

Imagine you and your friend are in the same room, talking directly to each other. No middleman. No post office.

The result?

Real-time communication and high-quality video.

But on the internet, “meeting in the same room” is not that easy. There are many obstacles.

2. The Challenge: “Where Are You?”

The main problem with the internet is this: our computers are often “shy.”

They hide behind a home or office Wi-Fi router. This is called NAT, or Network Address Translation.

Because of NAT, our computer often does not know its own real public address.

For example, if Computer A says to Computer B:

“Hi, my address is 192.168.1.5”

Computer B will not be able to find it, because that is only a local private address.

So, what is the solution?

WebRTC has a special team to handle this.

A. The Matchmaker: Signaling

Before Browser A and Browser B can talk directly, they need a temporary helper to exchange contact information.

This process is called signaling.

They exchange information such as:

  • “I support HD video.”
  • “My network can be reached from this address.”

After the contact information is exchanged, the matchmaker steps aside and lets A and B communicate directly.

B. The Magic Mirror: STUN Server

Since our computer does not know its own public address, it asks a STUN server.

The conversation looks something like this:

Computer: “Hey STUN, what address do I look like from the outside?”

STUN: “You appear to be using the IP address 203.0.113.5.”

With this information, our computer can tell its friend the correct address.

C. The Emergency Route: TURN Server

Sometimes, an office network or firewall is very strict.

It is like a tall wall blocking direct communication, even after using STUN.

This is where the TURN server comes in.

If the direct route is blocked, TURN acts as a relay.

The flow looks like this:

  • Computer A sends data to TURN.
  • TURN forwards the data to Computer B.

This is Plan B.

The connection may become a little slower and it may require more server cost, but the most important thing is that the call can still connect.

D. The Manager: ICE

The protocol that manages route selection is called ICE, or Interactive Connectivity Establishment.

ICE decides whether the connection can go directly or must go through TURN.

It intelligently chooses the best and fastest route available.

3. The Main Weapons of WebRTC: APIs

For developers, WebRTC provides three main “weapons” in JavaScript.

1. MediaStream / getUserMedia

This is the gateway to the user’s camera and microphone.

This API asks for permission to turn on the camera and microphone, then converts them into a digital media stream.

2. RTCPeerConnection

This is the main engine of WebRTC.

It manages the connection, checks the bandwidth, and makes sure the video reaches the other side safely.

3. RTCDataChannel

WebRTC is not only for audio and video.

It can also send any kind of data, such as image files, chat messages, or multiplayer game data.

The advantage?

The data can be sent directly through P2P, making it very fast and more private because it does not need to pass through a database server.

Conclusion

WebRTC is a technology that cuts through the bureaucracy of internet communication.

With the help of STUN to discover public addresses, TURN to get through strict firewalls, and powerful APIs, our browsers can become advanced communication tools without requiring extra applications to be installed.

So, the next time you join a video call, remember the hard work of “ICE,” quietly searching for the best hidden path so your friend’s face does not keep buffering.

Top comments (0)