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. 

Comments

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

    ReplyDelete

Post a Comment

Popular posts from this blog

TDD - How to go about it? - A quick start example

So, it's only recently I've been doing TDD. I have written unit tests before but those were all tests after writing the actual code. Confusing statement right? /**  * @disclaimer  * I'm just preaching what I practice and some parts of it could be wrong.  * Please feel free to leave comments if am wrong  * And I would be happy to stand corrected */ What is TDD? TDD, expanded as Test Driven Development could have this statement as one of the definitions. "TDD is nothing but the art of writing down the business use case one by one and write code based on it paralelly" It would feel like why do I need to write test for that? We could do the same with pen & paper and write codes. But then, you again circle back to write tests for the same. So why not do it this way?  Therefore, let's start with an example, Write a method that accepts two positive numbers as input and returns their sum Let's try and do a mock TDD for the above problem.  Case 1 - Function add

Git magic - Make commits disappear

So fellas, it's been a while since I wrote and I hope this article is of help to whoever reads this.  Let's start with bit of an introduction. Until my previous employment, there wasn't much guideline on how we write Github's commit message. One single feature could have n number of commits and it doesn't bother the repository.  Now, am part of  @webex 's  webex-js-sdk  team where committing guidelines are very strict and having a bit more deep knowledge of git commands has become essential. This made me explore git commands on regular basis. So I thought why keep them to myself while I can share them. It was my first ever PR and my changes were approved except for a few minor changes. I honestly didn't know how to make changes to existing commit and now, I had two choices.  Create a new branch from master and re-do the work manually Do some git magic and make the current branch work well.  If it were old times, I'd have gone with option 1. It's very