Introduction to WebRTC: Real-Time Communication on the Web

Steve Kim
2 min readDec 17, 2024

--

Imagine you are making a video call through a web browser without installing any extra software. Traditionally, real-time communication required specialized software or hardware-based solutions such as landline phones, cellular networks, or desktop applications like Skype. These methods often involved complex setups, high costs, or platform-specific requirements. WebRTC (Web Real-Time Communication) changes this by enabling real-time audio, video, and data sharing directly through web browsers.

What Is WebRTC?

WebRTC is an open-source project supported by major tech companies like Google, Mozilla, and Microsoft. It allows direct peer-to-peer communication between web browsers. This means users can share audio, video, and data without needing a central server to manage the media stream.

This is how WebRTC Works

WebRTC involves three main components:

  1. Media Capture: WebRTC uses the browser’s built-in capabilities to access a device’s camera and microphone. Users are prompted to allow permission before sharing audio or video.
  2. Signaling: Before browsers can communicate, they need to exchange information about how to connect. This process, called signaling, happens through a separate server using protocols like WebSocket. Browsers exchange: Session descriptions (SDP) to describe the media format and Network details to establish a direct connection.
  3. Peer-to-Peer Connection: Once signaling is complete, WebRTC establishes a direct connection between browsers. This is done using protocols like ICE (Interactive Connectivity Establishment), STUN (Session Traversal Utilities for NAT), and TURN (Traversal Using Relays around NAT). These protocols help browsers locate each other and establish a working connection:
  • ICE (Interactive Connectivity Establishment): This framework finds the best path for data transfer by gathering potential network paths called ICE candidates.
  • STUN Server: A STUN server helps a device determine its public IP address and figure out how it can be reached behind a router or firewall.
  • TURN Server: If direct peer-to-peer communication fails due to strict network configurations, a TURN server acts as a relay, forwarding media between devices. In this setup, the connection is not truly peer-to-peer because the TURN server sits in the middle, relaying data between users to ensure the communication works even when direct connectivity is blocked.
  • ICE Candidates: These are possible network routes that browsers collect and test to establish the most efficient connection. The browsers exchange ICE candidates during the signaling process to agree on the best path.

Decision to Use TURN Servers: During the ICE candidate exchange process, the decision to use a TURN server is made:

  • ICE Candidate Gathering: Both peers collect potential network routes, including local IP addresses, public IPs (via STUN), and TURN server relays if configured.
  • Candidate Exchange: Peers exchange these candidates through the signaling server.
  • Connectivity Checks: WebRTC tests all gathered candidates to find the best working path:
  • If a direct route using STUN-derived public IPs works, TURN is bypassed.
  • If direct paths fail due to restrictive NAT/firewall configurations, WebRTC falls back to the TURN server.

Thus, whether a TURN server is used depends on the success of these connection tests.

After the connection is established, audio, video, and other data are transmitted securely using end-to-end encryption.

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

--

--

Steve Kim
Steve Kim

Written by Steve Kim

A Certified Public Accountant / Hobbyist-programmer-but-dead-serious-specializing JavaScript, ReactJS, NextJS, Rust and AWS.

No responses yet

Write a response