Explain WebRTC like I’m 5?

Hello, 5-year-old. What makes you want to learn WebRTC?

Do you want to create a video chat app with your friends? Do you want to create a clone of Discord? Want to create a private chat with your crush?

Look no further, WebRTC is all you need!

What is WebRTC?

WebRTC is an open framework that enables Real-Time Communication (RTC) across web browsers. You can send several simultaneous streams of data, video, audio, or combinations of them using this resilient and low-latency protocol.

Ok, What is WebRTC ( I’m 5 years old, remember ? )

You wanna talk to another browser or app through the internet without a server? WebRTC.
Wanna send video, audio, images, or text without putting it on a common server? WebRTC.

WebRTC is just a set of rules, you can use it in any programming language or framework if someone wrote a library that strictly follows those rules.

Can you tell me WebRTC like it’s a teenage drama?

Imagine you want to talk to your girlfriend who moved to a different school and her parents HATE you. You could talk via mail, passing notes, or phones. Assume you and your girlfriend both have old-school landlines that your entire family shares.

You ask what your own landline number is from the phone company and pass this number as a note to your girlfriend through a mutual friend. Then when she rings, she makes an offer for a call that you answer. Now you can set up a direct connection with each other’s landline and talk about sweet nothings instead of studying.

When your parents inevitably find out and block both of your phone access, your messenger would be another common friend who supports this forbidden love.

Translating that story to keywords:

WebRTC flow

Read the above story again with these translations. And that’s all WebRTC is!

• Peer — You and your girlfriend are peers. You’re the ones who want to communicate with each other.
• NAT — The common landline that you both have. Your router has a local IP address while the router has a global IP address. Network Address Table translates the requests going from your local IP to global IP and vice-versa.
• STUN — The phone company that gives you your own phone number. STUN can be contacted to get your own IP address and port number before you initiate a communication.
• Signaling server — The mutual friend who passes a note with your phone number so you can set up your call.
• SDP — The note that is passed is written in a specific format. Session Description Protocol contains just enough information like candidates, media options, security, etc. to create and establish a session.
• ICE — List all the ways you can connect to your girlfriend like mail, phone, and note passing. Eg. STUN, local IP, TURN, etc. Each method of connection is called an ICE candidate.
• TURN — The messenger friend who relays information when the two NATs can’t connect with each other (as happens in symmetric NATs).

Now again in more technical jargon:

Two peers communicate via WebRTC for bidirectional and real-time media and data transmission.
Each peer gets their IP and port information from a STUN server and sends an ICE candidate via a signaling server.

One of the peers initiates an offer encoded in SDP. Each peer goes through a negotiation process and one of the peers’ offer is answered in SDP. Thus a WebRTC connection is established.

Sometimes a NAT configuration like symmetric NAT prevents getting the right address to establish a connection so WebRTC relays the data through a common server called TURN.

What's WebRTC negotiation?

WebRTC negotiation is the process where two peers establish a connection. Each of the two peers has a role to play.

One becomes an impolite peer and ignores the other’s connection request while spamming its own while the other becomes a polite peer and ignores its own offer while accepting the other’s request.

How to set up a DataChannel?

Here’s the flowchart of how a WebRTC connection is setup :

Negotiation process

1. Local creates an SDP string called “Offer”
2. Local sends it to Remote via signaling server.
3. Remote uses the Offer to create an Answer.
4. Remote sends the Answer to Local.
5. Local establishes a DataChannel for communication.
6. Either local or remote can add a MediaStream at anytime.

Transmitting Video or Audio:

WebRTC is built with streaming media in mind. You can send and receive all sorts of media like video, audio, images and text in realtime and both ways!

Once a DataChannel is established, adding a media stream is as simple as:

RTCPeerConnection.addStream( stream )

Example Use cases:

I’ve personally used WebRTC in several use cases:

1. Whatsup — Personal P2P chat application using WebRTC DataChannel for realtime chat app.

2. YogaVR — Stream Yoga AI Poses into VR environment that got me praise from the Prime Minister of India!

3. VoxVR — Sending Pose Data into VR as videostream to improve public speaking and stage presence by pose correction.

Conclusion:

Well, 5-year-old, how was it? Flew right past your brain? I hope not.
Anyway, that concludes the WebRTC explanation. Read it over a couple of times to fully ingest it. Cheerio!