Skip to main content

RTCPeerConnection - How John and Finch actually connect

In my previous article, WebRTC - What the heck?, we met two shopkeeper farmers, John and Finch, who trade goods across a river using detailed letters (SDPs). If you haven't read it, I'd strongly recommend you read that first.

I promised we'd get into the technicals. Here it is. But don't worry, no code. We're sticking with John and Finch to understand what really happens under the hood.

The postal service - Signaling server

In the first article, Finch sent his letter via a pigeon. But John and Finch can't just throw letters across the river and hope it lands. Someone has to carry the letter. That's the postal service. It doesn't read the letter. It doesn't care what's inside. It just delivers.

In WebRTC, this is the Signaling Server. It carries the SDP offer from one client to the other and brings back the SDP answer. It could be a WebSocket server, an HTTP server, or anything that can pass a message between two endpoints. WebRTC doesn't define how signaling should work. It just says you need one.

The key thing? The postal service helped John and Finch start trading but the actual goods moved over the bridge directly between them. The postal service never carried the goods. Same with the signaling server, it never touches the actual audio or video data.

Finding the best route - ICE candidates

What if the main bridge is blocked because of heavy snow? Does trading stop? Not necessarily. There could be a smaller bridge downstream, a longer route through a neighbouring town, or even a ferry service.

In WebRTC, these possible routes are called ICE candidates (Interactive Connectivity Establishment). Each client gathers all possible routes:

  • A direct local path (the main bridge on a sunny day)
  • A path discovered through STUN that reveals your public address (like asking a traveller, "how do I get to the other side?")
  • A relay path through TURN that forwards your goods when no direct bridge exists (hiring a middleman boat service)

Both sides share their route options alongside their letters, pick the best one and start moving goods. This process is called ICE gathering.

The offer and answer - What really happens

Here's the step-by-step when Finch decides to start trading:

  1. Finch creates an offer - writes a detailed letter with his address, what he can send, and all routes he knows. He keeps a copy for himself. In WebRTC: creating an offer and setting the local description.
  2. Postal service delivers - carries the letter to John. In WebRTC: the signaling server delivers the SDP offer.
  3. John reads and remembers - notes down Finch's details. In WebRTC: setting the remote description.
  4. John creates an answer - writes his own letter in the same format with his details and routes. Keeps a copy. In WebRTC: creating an answer and setting the local description.
  5. Postal service delivers again - John's answer reaches Finch.
  6. Finch reads and remembers - notes down John's details. In WebRTC: setting the remote description.

Now both sides know their own details (local description), the other person's details (remote description), and all possible routes (ICE candidates). They pick the best route and trade directly. The postal service's job is done.

Adding goods to trade - Media tracks

Before writing the offer, Finch has to take stock of what he actually has available on his farm. He might have fruits and grains ready but his spices might not be in season yet. He can only offer what he has. And here's the important part, John might look at the offer and say, "I'll take the grains but I don't need the fruits." The other side can decline items.

In WebRTC, these goods are media tracks. Before creating an offer, the client checks what's available, camera, microphone, screen, and adds them as tracks. But the user might deny camera access or the other client might reject a video stream. Not every track offered gets accepted.

Now say midway through trading, Finch starts producing silk and wants to add it to the deal. He writes a fresh offer letter including silk alongside the existing goods. John reviews it and sends back an updated answer. In WebRTC, this is exactly what happens when you start a screen share during an ongoing call. A new track gets added and an SDP renegotiation (new offer/answer exchange) happens to accommodate it.

The connection lifecycle


Quick Summary

  • Signaling server = postal service. Delivers letters, never carries goods.
  • ICE candidates = all possible routes. Both sides share and pick the best.
  • STUN = asking for directions. TURN = hiring a middleman.
  • Local description = your own letter. Remote description = the other person's letter.
  • Media tracks = goods you take stock of before offering. The other side can decline.

All of this happens in milliseconds. The goods (audio, video, data) flow directly between the two sides without the signaling server ever touching them. Next time someone mentions RTCPeerConnection, you'll know it's just John and Finch figuring out the best bridge to trade over.

Comments

Popular posts from this blog

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...

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

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...

Git magic - Squash commits

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...