What is WebRTC?

WebRTC (Web Real-Time Communication) is an open-source project that provides web browsers and mobile applications with real-time communication capabilities via APIs. It enables audio, video, and data to be transmitted peer-to-peer between browsers without requiring plugins, downloads, or intermediate servers for media relay (in ideal conditions).

Originally developed by Google and standardized by W3C and IETF, WebRTC has revolutionized web-based communication. It powers applications like Google Meet, Facebook Messenger video calls, Discord voice chat, and thousands of other real-time communication applications. WebRTC handles the complex networking, codec negotiation, and media processing automatically.

WebRTC Performance Calculator

20.0 Mbps
Upload
70ms
Latency
20%
CPU Usage
95%
Success Rate

Memory: 150 MB

Packet Loss: 0.5%

Jitter: 5ms

WebRTC Architecture

MediaStream API

Captures audio/video from user devices

• getUserMedia()
• getDisplayMedia()
• Audio/Video tracks
• Device enumeration
• Constraints handling

RTCPeerConnection

Core API for peer-to-peer connections

• Connection establishment
• ICE negotiation
• Media transport
• DTLS encryption
• Statistics/monitoring

RTCDataChannel

Peer-to-peer data transfer

• Arbitrary data transfer
• Low latency messaging
• Reliable/unreliable modes
• Binary/text data
• Gaming and file transfer

Connection Flow

WebRTC Connection Flow
1. Signaling Server Setup
  ↓
2. Media Capture (getUserMedia)
  ↓
3. Create PeerConnection
  ↓
4. Add Local Media Streams
  ↓
5. Create Offer/Answer (SDP)
  ↓
6. Exchange SDP via Signaling
  ↓
7. ICE Candidate Exchange
  ↓
8. DTLS/SRTP Handshake
  ↓
9. Media/Data Flow Established

NAT Traversal & ICE

The NAT Problem

Most devices are behind NAT/firewalls, making direct peer connections impossible.

Challenge: Peers behind different NATs can't directly reach each other
Solution: ICE framework with STUN/TURN servers

STUN Servers

Session Traversal Utilities for NAT

• Discover public IP address
• Determine NAT type
• Enable hole punching
• Lightweight and fast
• Works for ~80% of cases

TURN Servers

Traversal Using Relays around NAT

• Media relay server
• Fallback for symmetric NAT
• Higher bandwidth cost
• 99%+ success rate
• Increased latency

ICE Candidate Types

Host Candidates:
• Local network addresses
• Direct LAN connections
• Lowest latency
Server Reflexive:
• Public IP via STUN
• NAT hole punching
• Most common type
Relay Candidates:
• Via TURN server
• Guaranteed connectivity
• Highest latency/cost

Signaling & Session Negotiation

Offer/Answer Model

Peers negotiate capabilities through SDP (Session Description Protocol) exchange.

SDP Offer/Answer Exchange
// Caller creates offer
const offer = await peerConnection.createOffer();
await peerConnection.setLocalDescription(offer);

// Send offer via signaling server
signalingSocket.send(JSON.stringify({
  type: 'offer',
  sdp: offer
}));

// Callee receives offer, creates answer
await peerConnection.setRemoteDescription(offer);
const answer = await peerConnection.createAnswer();
await peerConnection.setLocalDescription(answer);

// Send answer back
signalingSocket.send(JSON.stringify({
  type: 'answer',
  sdp: answer
}));

SDP Example

Session Description Protocol contains media capabilities and network information.

v=0
o=- 123456789 2 IN IP4 192.168.1.100
s=-
t=0 0
a=group:BUNDLE 0 1

m=audio 9 UDP/TLS/RTP/SAVPF 111
a=rtpmap:111 opus/48000/2
a=sendrecv

m=video 9 UDP/TLS/RTP/SAVPF 96
a=rtpmap:96 VP8/90000
a=sendrecv

a=candidate:1 1 UDP 2130706431 192.168.1.100 54400

WebRTC Implementation Example

Basic Video Call Setup

Basic WebRTC Video Call Implementation
class VideoCall {
  constructor(signalingSocket) {
    this.socket = signalingSocket;
    this.peerConnection = new RTCPeerConnection({
      iceServers: [
        { urls: 'stun:stun.l.google.com:19302' },
        {
          urls: 'turn:turn.example.com:3478',
          username: 'user',
          credential: 'pass'
        }
      ]
    });
    this.setupEventHandlers();
  }

  async startCall() {
    // Get user media
    const stream = await navigator.mediaDevices.getUserMedia({
      video: { width: 1280, height: 720 },
      audio: true
    });

    // Add tracks to peer connection
    stream.getTracks().forEach(track => {
      this.peerConnection.addTrack(track, stream);
    });

    // Create and send offer
    const offer = await this.peerConnection.createOffer();
    await this.peerConnection.setLocalDescription(offer);
    this.socket.send(JSON.stringify({ type: 'offer', offer }));
  }

  setupEventHandlers() {
    // Handle ICE candidates
    this.peerConnection.onicecandidate = (event) => {
      if (event.candidate) {
        this.socket.send(JSON.stringify({
          type: 'ice-candidate',
          candidate: event.candidate
        }));
      }
    };

    // Handle remote stream
    this.peerConnection.ontrack = (event) => {
      const remoteVideo = document.getElementById('remoteVideo');
      remoteVideo.srcObject = event.streams[0];
    };

    // Handle connection state
    this.peerConnection.onconnectionstatechange = () => {
      console.log('Connection state:', this.peerConnection.connectionState);
    };
  }
}

Data Channel Example

WebRTC Data Channel Implementation
// Create data channel
const dataChannel = peerConnection.createDataChannel('messages', {
  ordered: true,
  maxRetransmits: 3
});

dataChannel.onopen = () => {
  console.log('Data channel opened');
  dataChannel.send('Hello from peer!');
};

dataChannel.onmessage = (event) => {
  console.log('Received:', event.data);
};

// Handle incoming data channel
peerConnection.ondatachannel = (event) => {
  const channel = event.channel;
  channel.onmessage = (event) => {
    console.log('Data received:', event.data);
  };
};

Scaling WebRTC Applications

Mesh Topology

Every peer connects to every other peer

• Simple implementation
• Low latency
• High bandwidth usage (N²)
• Limited to ~4-6 participants
• CPU scales poorly
Best for: Small group calls, gaming

SFU (Selective Forwarding Unit)

Central server forwards streams between peers

• Scales to hundreds
• Bandwidth efficient
• Low server CPU usage
• Simulcast support
• Quality adaptation
Best for: Large conferences, webinars

MCU (Multipoint Control Unit)

Server mixes all streams into composite output

• Single stream per client
• Lowest bandwidth
• High server CPU usage
• Centralized processing
• Layout control
Best for: Traditional conferencing

Hybrid Approaches

Combine multiple topologies based on needs

• Cascaded SFUs
• P2P + SFU fallback
• Regional distribution
• Edge computing
• CDN integration
Best for: Global applications

WebRTC in Production

Google Meet

Large-scale video conferencing with advanced features.

  • • SFU architecture with simulcast
  • • AI-powered noise cancellation
  • • Adaptive bitrate streaming
  • • 100+ participants support

Discord Voice

Low-latency voice chat for gaming communities.

  • • Opus codec optimization
  • • Push-to-talk and voice activity
  • • Global edge server network
  • • Mobile battery optimization

Telemedicine

HIPAA-compliant video consultations.

  • • End-to-end encryption
  • • Screen sharing for records
  • • Recording capabilities
  • • Bandwidth adaptation

Online Education

Interactive classrooms and virtual labs.

  • • Whiteboard collaboration
  • • Screen sharing and recording
  • • Breakout room support
  • • Mobile-friendly interfaces

WebRTC Best Practices

āœ… Do

  • • Implement proper error handling and fallbacks
  • • Use both STUN and TURN servers
  • • Implement bandwidth adaptation
  • • Add connection quality monitoring
  • • Handle mobile/battery considerations
  • • Use simulcast for scalability
  • • Implement proper security measures

āŒ Don't

  • • Rely only on P2P for large groups
  • • Ignore network conditions
  • • Skip TURN server provisioning
  • • Forget about mobile constraints
  • • Neglect codec negotiation
  • • Hardcode media constraints
  • • Skip connection state monitoring

šŸ“ WebRTC Quiz

1 of 6Current: 0/6

What does WebRTC primarily enable?