Skip to main content

WebRTC - What the heck?

Over the past few weeks, I happened to work on stuff that enabled me to understand what WebRTC is and how useful it is. 

The full form?

Web Real-Time Communication

The history

It's first release was by 2011. If you want to know more, well, please read the wikipedia.

WebRTC  has been a boon to web developers who want to build streaming applications or video calling applications. As you move downward, you'll just may be understand how WebRTC works but nothing technicals. 

The story

Let's begin with a short story. Long long ago, so long ago, nobody knew how long ago, there lived two shop keeper farmers John & Finch. It was that old point in time when barter system was a thing and money wasn't invented. 

These shopkeepers lived in different cities across a river and the cities were connected by a rock solid bridge. Like how the golden gate connects the San Francisco city and the Marin County. Finch is a very private person and takes hard time to trust people. John on the other hand, is a very cautious man and does not easily make deals or trusts traders. He somehow gets to know about John and he decides to make a deal with John. Therefore he prepares a letter with a lot of information like his shop address, his name, his farm address and stuff. In this letter he also writes an offer to John stating that he is willing to send across couple of items that are straight out of his farm and in exchange he wanted to know what he could send. Finch attaches this letter to a pigeon's leg and sends it across. He could have sent a man with the letter or tried to use the budding postal system as well. Let's just say, it was simply his preference of sending medium.

John reads the offer sent by Finch and was impressed just for the fact that it was so detailed with various addresses, names and stuff. He verifies them and sends out a letter to Finch in the same format of addresses and names and it has answer to Finch's offer that he is willing to accept two of five items that Finch offered. In return, he was ready to give Finch two different items.

They happily kept trading for months. Now, John has a new product cultivated in his farm in addition to what he has already been sending. Therefore, John takes out the same format of letter and writes a new one stating, in addition to existing things, he'd like to offer one more. Finch reads it and sends out an answer stating that he agrees.

Once again, they happily keep trading for months. Now comes the hard month of winter where they cannot cultivate or move items. Therefore, Finch sends out another letter telling he cannot send anything for now. John agrees and responds with an answer saying he cannot either.

This system of sending out a letter and the other replying kept continuing giving them good trust on each other to trade things forever.

The concept

What did the story has to do with WebRTC? You might be curious. Let's break the story down to know what's underneath.

The two shopkeepers are none but two web clients waiting to talk to each other. It could be two different browser instances from the same computer or two different browsers from two different computers.

The bridge is nothing but the network that pass message to one another.

The letter is nothing but the SDP expanded as Session Description Protocol. Now, let's get back to the story, the two clients wanted to talk to each other but only when they trust each other. This is where the WebRTC protocol comes into picture. 

ClientA decides to interact with ClientB. Therefore it creates an SDP, this SDP will contain all the necessary information like source server address / source IP address, track codec, timing information etc., With this it also says, what all it wants to share, audio track / video track / content track. This SDP is what is called an offer. Now, this offer is sent to ClientB through a floppy disk. ClientA could have used a whatsapp message, an email or a websocket. SDP is simply a string message. However it chose floppy disk. Let's call it simply as it's preference of messaging medium. As soon as ClientB receives this offer, it creates another SDP that has all its information along with an answer on whether it accepts the sharing or not. This SDP is called the Answer and is sent back to ClientA.

Once ClientA receives this Answer, they share information happily with each other. Similarly, whenever there is a change in audio track or when audio track is muted, or when video track is enabled, an SDP Offer is sent across to the other end and an SDP Answer is received as part of acceptance. This Offer and Answer can also happen if they want to make the session inactive. Now, please go back and read the story above and it all should make sense. If not, pardon me for my poor creativity :-( 

The following is a basic diagram on how the SDP Offer / Answer mechanism works,

I hope this article now gave a basic idea of how WebRTC works. Code around it or technicals, we will go through in a different article. 


  1. Really like the story and i think a school kid can understand what webrtc is more easily now


Post a Comment

Popular posts from this blog

Git - Removing a file from a commit

Once again, another git magic that might be of help to some of you. This research came up when I accidentally added a couple of unwanted files and wanted to remove them from a commit. We all know that to update an existing commit, we shall follow this git magic to amend commits . However, how do we drop changes to a particular file in a commit? While that is easy, it is also tricky. This blog post covers scenarios and respective commands that help you understand what should be done. /**  *  @disclaimer  * Please read this post fully before executing any command. My scenario might not be the same as yours. */ There are two scenarios to be handled here, Remove a newly added file Remove changes to an existing file Let's look at them separately, Remove a newly added file This is the scenario where an unwanted file added to the commit. This file might be some config.json that got generated while doing a research on a new testing tool or a bundling tool. Such scenarios are easier. 1. Re

Git worktree - guide to flexible folder structure

As always, let's start with a story why I have written this one down. I have been using git for almost 5 years now and in one of my work places I had to work on the same project but different features in parallel.  Switching between branches back and forth was a costly operation given that I didn't discover commit amend until recently. Even though I'd have discovered commit amend, I'd still have did this. Still did what? I can sense that question deep from your throats. So, whenever I am in a situation to work on multiple features or a feature and a bug fix, I'd have two clones of my repo each with different branches, Whenever a feature is merged or the fixes are merged, I'll delete the clone in my machine and branch in my origin (Gitlab / Github etc.,) Recently when I started writing these git articles, my manager suggested me to learn about Git Worktree and it'll be useful. And when I got free and good understanding of git commit, rebase and stuff, I decid

Confluence: 5 quick things that you need

As part of my work experiments, this week I would like to write down the things that one needs to know in confluence that can up-skill their documentation works. I will cover the following 5 things, How to Anchor link a title? How to Anchor link to a section? How to create a dashing dashboard? Panel - Confluence Macro Layouts - Confluence Tools Content by Label - Confluence Macro 1. How to Anchor link a title? This is the most required thing. Most useful when one has to refer to a section internally on the same confluence page. Let's consider you have a page with three different sections and titles as shown below, In this, if you want to add an internal anchor from a text in paragraph 3 to a title in paragraph 1, you can add it as follows, Choose the word that needs Anchor Click on the link icon from the Toolbar above In the link box, enter #Page Title 1 Click Insert That is it. Your anchor from the selected text to Page Title 1 is ready. This can be tested out in the preview itsel