Skip to main content

WebRTC - What the heck?

Published on

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. 

Labels:

Comments

  1. arun35285 May 2022 at 19:08

    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

Git magic - Squash commits

Published on
Back with another git magic. When it comes to merging a pull request on Github, there are two options Rebase and Merge Squash and Merge What is Rebase and Merge? When one chooses Rebase and Merge, all the commits in the PR are added to the target branch. For example, if the PR has 5 commits, all of those commits will be visible in the PR history of the target branch. What is Squash and Merge? When a PR is merged by choosing Squash and Merge, all the commits in the PR are combined into one PR and then added to the target branch. Once again, if the PR has 5 commits or any number of commits, they are combined and added to the target branch. Therefore, this is what Squash means. Combining 'n' different commits into one single commit is called squashing. In this blog post, we will go through the commands that can squash commits.  Advantages of Squashing commits No more redundant commits In a pull request, one may have 'n' different commits for one change. They might have bee...
Post a Comment
Read more

Confluence: 5 quick things that you need

Published on
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...
Post a Comment
Read more

npm-link | What NPM won't tell you!

Published on
Hello readers. So back with another easy yet unexplored feature of npm/yarn packages. We as frontend developers / SDK developers, have to deal with more than one repositories where we actually code contribute. Most SDK developers would know this already or they use the not-so-well documented 'npm link' command . /**  *  @disclaimer  * Please read this post fully before executing any command. My scenario might not be the same as yours.  * This article below uses a repo from my current workplace as an example which is open-source and does not violate the Cisco Confidentiality Policies */ To make this article easier to understand, some representations, Host - Package that needs another local package as part of its node modules. Let's assume the path to this package is  ~/Documents/Repos/demo-app Adhoc - Local package that is added into another package as a dependency. Let's assume the path to this package is  ~/Documents/Repos/semver-monorepo What is...
Post a Comment
Read more