How to Build Real-Time Video Chat Applications with WebRTC

WebRTC: The Complete Guide to Real-Time Communication in Web Applications (2025)

Table of Contents

1. Introduction to WebRTC
2. Understanding WebRTC Architecture
3. Core WebRTC APIs
4. Building Your First WebRTC Application
5. Advanced WebRTC Concepts
6. Real-World Use Cases
7. Performance Optimization
8. Security Best Practices
9. Troubleshooting Common Issues
10. Future of WebRTC

---

Introduction to WebRTC

WebRTC (Web Real-Time Communication) is a powerful, open-source technology that enables peer-to-peer audio, video, and data sharing directly between web browsers and mobile applications without requiring plugins or third-party software. Since its introduction by Google in 2011 and standardization by the W3C and IETF, WebRTC has revolutionized how we build real-time communication applications.

Why WebRTC Matters in 2025

In today's digital landscape, real-time communication has become essential. From video conferencing platforms like Zoom and Google Meet to live streaming services and collaborative tools, WebRTC powers the interactive web experiences users expect. Here's why every web developer should master WebRTC:

• Zero Plugin Architecture: No need for Flash, plugins, or additional software
• Low Latency: Near-instantaneous communication with sub-second delays
• Cross-Platform Compatibility: Works seamlessly across browsers and mobile devices
• Built-in Security: Mandatory encryption (DTLS and SRTP) for all communications
• Cost-Effective: Peer-to-peer architecture reduces server bandwidth costs

Key Statistics

• Over 3 billion+ WebRTC-enabled devices worldwide (2025)
• 75%+ of all video calls use WebRTC technology
• Sub-500ms latency achievable in optimal conditions
• Supported by 99%+ of modern browsers

---

Understanding WebRTC Architecture

Before diving into code, let's understand the fundamental architecture that makes WebRTC work. WebRTC follows a peer-to-peer (P2P) communication model with signaling servers facilitating the initial connection setup.

The WebRTC Triangle

┌─────────────┐         Signaling Server         ┌─────────────┐
│   Peer A    │◄─────────(SDP Exchange)─────────►│   Peer B    │
│  (Browser)  │                                   │  (Browser)  │
└──────┬──────┘                                   └──────┬──────┘
       │                                                 │
       │          Direct P2P Connection                  │
       │         (Media & Data Streams)                  │
       └─────────────────────────────────────────────────┘

Core Components

1. Signaling Server

Facilitates the exchange of connection metadata (SDP) and ICE candidates between peers. WebRTC doesn't specify a signaling protocol, giving developers flexibility to use WebSockets, Socket.io, or even HTTP polling.

2. STUN Server (Session Traversal Utilities for NAT)

Helps peers discover their public IP addresses and port mappings when behind NAT/firewalls.

const stunServer = {
  urls: 'stun:stun.l.google.com:19302'
};

3. TURN Server (Traversal Using Relays around NAT)

Acts as a relay server when direct P2P connection fails (typically 5-10% of cases due to restrictive firewalls).

const turnServer = {
  urls: 'turn:your-turn-server.com:3478',
  username: 'user',
  credential: 'password'
};

4. ICE (Interactive Connectivity Establishment)

Protocol that finds the best path for peer connection by trying multiple network routes.

---

Core WebRTC APIs

WebRTC provides three primary JavaScript APIs that form the foundation of real-time communication:

1. MediaStream API (getUserMedia)

Captures audio and video from user devices.

// Access user's camera and microphone
async function getLocalStream() {
  try {
    const constraints = {
      video: {
        width: { min: 640, ideal: 1920, max: 1920 },
        height: { min: 480, ideal: 1080, max: 1080 },
        frameRate: { ideal: 30, max: 60 }
      },
      audio: {
        echoCancellation: true,
        noiseSuppression: true,
        autoGainControl: true
      }
    };

    const stream = await navigator.mediaDevices.getUserMedia(constraints);

    // Display in video element
    const videoElement = document.getElementById('localVideo');
    videoElement.srcObject = stream;

    console.log('Local stream obtained:', stream.getTracks());
    return stream;

  } catch (error) {
    console.error('Error accessing media devices:', error);
    throw error;
  }
}

Output:

Local stream obtained: [
  MediaStreamTrack { kind: "video", id: "video-track-1", ... },
  MediaStreamTrack { kind: "audio", id: "audio-track-1", ... }
]

2. RTCPeerConnection API

Manages the peer-to-peer connection, including encoding, decoding, and transmitting audio/video.

// Create and configure peer connection
class WebRTCConnection {
  constructor() {
    this.configuration = {
      iceServers: [
        { urls: 'stun:stun.l.google.com:19302' },
        { urls: 'stun:stun1.l.google.com:19302' }
      ],
      iceCandidatePoolSize: 10
    };

    this.peerConnection = new RTCPeerConnection(this.configuration);
    this.setupEventHandlers();
  }

  setupEventHandlers() {
    // Handle ICE candidate generation
    this.peerConnection.onicecandidate = (event) => {
      if (event.candidate) {
        console.log('New ICE candidate:', event.candidate);
        // Send candidate to remote peer via signaling
        this.sendToSignalingServer({
          type: 'ice-candidate',
          candidate: event.candidate
        });
      }
    };

    // Handle incoming media streams
    this.peerConnection.ontrack = (event) => {
      console.log('Received remote track:', event.track.kind);
      const remoteVideo = document.getElementById('remoteVideo');
      remoteVideo.srcObject = event.streams[0];
    };

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

    // Handle ICE connection state
    this.peerConnection.oniceconnectionstatechange = () => {
      console.log('ICE state:', this.peerConnection.iceConnectionState);
    };
  }

  // Add local media tracks
  addLocalStream(stream) {
    stream.getTracks().forEach(track => {
      this.peerConnection.addTrack(track, stream);
      console.log('Added track:', track.kind);
    });
  }
}

Console Output:

Added track: video
Added track: audio
New ICE candidate: RTCIceCandidate { candidate: "candidate:1 1 UDP 2130706431...", ... }
Connection state: connecting
ICE state: checking
ICE state: connected
Connection state: connected
Received remote track: video
Received remote track: audio

3. RTCDataChannel API

Enables bi-directional data transfer between peers for text, files, or custom data.

// Create and use data channel
class DataChannelManager {
  constructor(peerConnection) {
    this.peerConnection = peerConnection;
    this.dataChannel = null;
  }

  createDataChannel(channelName = 'dataChannel') {
    this.dataChannel = this.peerConnection.createDataChannel(channelName, {
      ordered: true, // Guarantee message order
      maxRetransmits: 3 // Retry failed messages 3 times
    });

    this.setupDataChannelHandlers(this.dataChannel);
    return this.dataChannel;
  }

  setupDataChannelHandlers(channel) {
    channel.onopen = () => {
      console.log('Data channel opened:', channel.label);
      console.log('Ready state:', channel.readyState);
    };

    channel.onclose = () => {
      console.log('Data channel closed');
    };

    channel.onmessage = (event) => {
      console.log('Received message:', event.data);
      this.handleIncomingMessage(event.data);
    };

    channel.onerror = (error) => {
      console.error('Data channel error:', error);
    };
  }

  sendMessage(message) {
    if (this.dataChannel && this.dataChannel.readyState === 'open') {
      this.dataChannel.send(JSON.stringify(message));
      console.log('Sent message:', message);
    } else {
      console.error('Data channel not ready');
    }
  }

  handleIncomingMessage(data) {
    try {
      const message = JSON.parse(data);
      console.log('Parsed message:', message);
      // Handle different message types
      switch (message.type) {
        case 'chat':
          this.displayChatMessage(message.content);
          break;
        case 'file':
          this.handleFileTransfer(message);
          break;
        default:
          console.log('Unknown message type:', message.type);
      }
    } catch (error) {
      console.error('Error parsing message:', error);
    }
  }

  displayChatMessage(content) {
    console.log('Chat message:', content);
  }

  handleFileTransfer(message) {
    console.log('File transfer initiated:', message.fileName);
  }
}

// Usage example
const connection = new WebRTCConnection();
const dataChannelManager = new DataChannelManager(connection.peerConnection);
const channel = dataChannelManager.createDataChannel('chat');

// Send a message
setTimeout(() => {
  dataChannelManager.sendMessage({
    type: 'chat',
    content: 'Hello from WebRTC!',
    timestamp: Date.now()
  });
}, 2000);

Console Output:

Data channel opened: chat
Ready state: open
Sent message: { type: 'chat', content: 'Hello from WebRTC!', timestamp: 1730390400000 }
Received message: {"type":"chat","content":"Hello from WebRTC!","timestamp":1730390400000}
Parsed message: { type: 'chat', content: 'Hello from WebRTC!', timestamp: 1730390400000 }
Chat message: Hello from WebRTC!

---

Building Your First WebRTC Application

Let's build a complete video chat application from scratch. This example demonstrates the full WebRTC workflow including signaling, connection establishment, and media exchange.

Project Structure

webrtc-video-chat/
├── index.html
├── styles.css
├── app.js
├── signaling.js
└── server.js (Node.js signaling server)

Step 1: HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebRTC Video Chat Application</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <header>
      <h1>WebRTC Video Chat</h1>
      <div class="connection-status">
        <span id="status">Disconnected</span>
      </div>
    </header>

    <main>
      <div class="video-container">
        <div class="video-wrapper">
          <video id="localVideo" autoplay muted playsinline></video>
          <label>You</label>
        </div>
        <div class="video-wrapper">
          <video id="remoteVideo" autoplay playsinline></video>
          <label>Remote Peer</label>
        </div>
      </div>

      <div class="controls">
        <button id="startButton" class="btn btn-primary">
          <span>Start Camera</span>
        </button>
        <button id="callButton" class="btn btn-success" disabled>
          <span>Start Call</span>
        </button>
        <button id="hangupButton" class="btn btn-danger" disabled>
          <span>Hang Up</span>
        </button>
        <button id="muteButton" class="btn btn-secondary" disabled>
          <span>Mute Audio</span>
        </button>
        <button id="videoToggle" class="btn btn-secondary" disabled>
          <span>Stop Video</span>
        </button>
      </div>

      <div class="chat-container">
        <div id="chatMessages" class="chat-messages"></div>
        <div class="chat-input">
          <input 
            type="text" 
            id="messageInput" 
            placeholder="Type a message..." 
            disabled
          />
          <button id="sendButton" class="btn btn-primary" disabled>Send</button>
        </div>
      </div>
    </main>
  </div>

  <script src="signaling.js"></script>
  <script src="app.js"></script>
</body>
</html>

Step 2: WebRTC Application Logic

// app.js - Complete WebRTC video chat implementation

class VideoChat {
  constructor() {
    // Media elements
    this.localVideo = document.getElementById('localVideo');
    this.remoteVideo = document.getElementById('remoteVideo');

    // Control buttons
    this.startButton = document.getElementById('startButton');
    this.callButton = document.getElementById('callButton');
    this.hangupButton = document.getElementById('hangupButton');
    this.muteButton = document.getElementById('muteButton');
    this.videoToggle = document.getElementById('videoToggle');
    this.sendButton = document.getElementById('sendButton');

    // Chat elements
    this.messageInput = document.getElementById('messageInput');
    this.chatMessages = document.getElementById('chatMessages');

    // WebRTC objects
    this.localStream = null;
    this.remoteStream = null;
    this.peerConnection = null;
    this.dataChannel = null;

    // States
    this.isAudioMuted = false;
    this.isVideoEnabled = true;

    // Configuration
    this.configuration = {
      iceServers: [
        { urls: 'stun:stun.l.google.com:19302' },
        { urls: 'stun:stun1.l.google.com:19302' },
        { urls: 'stun:stun2.l.google.com:19302' }
      ]
    };

    this.initializeEventListeners();
    this.updateStatus('Disconnected');
  }

  initializeEventListeners() {
    this.startButton.addEventListener('click', () => this.startCamera());
    this.callButton.addEventListener('click', () => this.startCall());
    this.hangupButton.addEventListener('click', () => this.hangup());
    this.muteButton.addEventListener('click', () => this.toggleAudio());
    this.videoToggle.addEventListener('click', () => this.toggleVideo());
    this.sendButton.addEventListener('click', () => this.sendMessage());
    this.messageInput.addEventListener('keypress', (e) => {
      if (e.key === 'Enter') this.sendMessage();
    });
  }

  async startCamera() {
    console.log('Requesting local stream');
    this.updateStatus('Requesting camera access...');

    try {
      const constraints = {
        audio: {
          echoCancellation: true,
          noiseSuppression: true,
          autoGainControl: true
        },
        video: {
          width: { ideal: 1280 },
          height: { ideal: 720 },
          frameRate: { ideal: 30 }
        }
      };

      const stream = await navigator.mediaDevices.getUserMedia(constraints);
      this.localStream = stream;
      this.localVideo.srcObject = stream;

      console.log('Local stream obtained:', stream.getTracks());
      this.updateStatus('Camera ready');

      // Enable call button
      this.startButton.disabled = true;
      this.callButton.disabled = false;
      this.muteButton.disabled = false;
      this.videoToggle.disabled = false;

      // Log track information
      stream.getTracks().forEach(track => {
        console.log(`Track: ${track.kind}, ID: ${track.id}, Label: ${track.label}`);
      });

    } catch (error) {
      console.error('Error accessing media devices:', error);
      this.updateStatus('Camera access denied');
      alert('Could not access camera/microphone. Please grant permissions.');
    }
  }

  async startCall() {
    console.log('Starting call');
    this.updateStatus('Initiating call...');

    this.callButton.disabled = true;
    this.hangupButton.disabled = false;

    // Create peer connection
    this.createPeerConnection();

    // Add local stream tracks to peer connection
    this.localStream.getTracks().forEach(track => {
      console.log('Adding track to peer connection:', track.kind);
      this.peerConnection.addTrack(track, this.localStream);
    });

    // Create data channel for chat
    this.createDataChannel();

    // Create and send offer
    try {
      const offer = await this.peerConnection.createOffer({
        offerToReceiveAudio: true,
        offerToReceiveVideo: true
      });

      console.log('Created offer:', offer);
      await this.peerConnection.setLocalDescription(offer);
      console.log('Set local description');

      // Send offer via signaling server
      this.sendSignalingMessage({
        type: 'offer',
        sdp: offer.sdp
      });

      this.updateStatus('Calling...');

    } catch (error) {
      console.error('Error creating offer:', error);
      this.updateStatus('Call failed');
    }
  }

  createPeerConnection() {
    console.log('Creating peer connection with config:', this.configuration);
    this.peerConnection = new RTCPeerConnection(this.configuration);

    // Handle ICE candidates
    this.peerConnection.onicecandidate = (event) => {
      if (event.candidate) {
        console.log('New ICE candidate:', event.candidate.candidate);
        this.sendSignalingMessage({
          type: 'ice-candidate',
          candidate: event.candidate
        });
      } else {
        console.log('All ICE candidates have been sent');
      }
    };

    // Handle ICE connection state changes
    this.peerConnection.oniceconnectionstatechange = () => {
      console.log('ICE connection state:', this.peerConnection.iceConnectionState);
      this.updateStatus(`ICE: ${this.peerConnection.iceConnectionState}`);

      if (this.peerConnection.iceConnectionState === 'disconnected' ||
          this.peerConnection.iceConnectionState === 'failed') {
        this.handleConnectionFailure();
      }
    };

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

      switch (this.peerConnection.connectionState) {
        case 'connected':
          this.updateStatus('Connected');
          break;
        case 'disconnected':
          this.updateStatus('Disconnected');
          break;
        case 'failed':
          this.updateStatus('Connection failed');
          this.handleConnectionFailure();
          break;
        case 'closed':
          this.updateStatus('Connection closed');
          break;
      }
    };

    // Handle incoming tracks
    this.peerConnection.ontrack = (event) => {
      console.log('Received remote track:', event.track.kind);

      if (!this.remoteStream) {
        this.remoteStream = new MediaStream();
        this.remoteVideo.srcObject = this.remoteStream;
      }

      this.remoteStream.addTrack(event.track);
      console.log('Remote stream now has tracks:', this.remoteStream.getTracks());
    };

    // Handle data channel (for receiving peer)
    this.peerConnection.ondatachannel = (event) => {
      console.log('Data channel received');
      this.dataChannel = event.channel;
      this.setupDataChannelHandlers();
    };
  }

  createDataChannel() {
    console.log('Creating data channel');
    this.dataChannel = this.peerConnection.createDataChannel('chat', {
      ordered: true
    });
    this.setupDataChannelHandlers();
  }

  setupDataChannelHandlers() {
    this.dataChannel.onopen = () => {
      console.log('Data channel opened');
      this.messageInput.disabled = false;
      this.sendButton.disabled = false;
      this.addChatMessage('System', 'Chat connected', 'system');
    };

    this.dataChannel.onclose = () => {
      console.log('Data channel closed');
      this.messageInput.disabled = true;
      this.sendButton.disabled = true;
      this.addChatMessage('System', 'Chat disconnected', 'system');
    };

    this.dataChannel.onmessage = (event) => {
      console.log('Received message:', event.data);
      try {
        const message = JSON.parse(event.data);
        this.addChatMessage('Remote', message.text, 'received');
      } catch (error) {
        console.error('Error parsing message:', error);
      }
    };

    this.dataChannel.onerror = (error) => {
      console.error('Data channel error:', error);
    };
  }

  async handleSignalingMessage(message) {
    console.log('Received signaling message:', message.type);

    if (!this.peerConnection && message.type !== 'offer') {
      console.warn('Peer connection not initialized');
      return;
    }

    try {
      switch (message.type) {
        case 'offer':
          await this.handleOffer(message);
          break;
        case 'answer':
          await this.handleAnswer(message);
          break;
        case 'ice-candidate':
          await this.handleIceCandidate(message);
          break;
        default:
          console.warn('Unknown message type:', message.type);
      }
    } catch (error) {
      console.error('Error handling signaling message:', error);
    }
  }

  async handleOffer(message) {
    console.log('Handling offer');
    this.updateStatus('Receiving call...');

    // Create peer connection if not exists
    if (!this.peerConnection) {
      this.createPeerConnection();

      // Add local stream if available
      if (this.localStream) {
        this.localStream.getTracks().forEach(track => {
          this.peerConnection.addTrack(track, this.localStream);
        });
      }
    }

    // Set remote description
    await this.peerConnection.setRemoteDescription(
      new RTCSessionDescription({ type: 'offer', sdp: message.sdp })
    );
    console.log('Set remote description (offer)');

    // Create and send answer
    const answer = await this.peerConnection.createAnswer();
    console.log('Created answer');

    await this.peerConnection.setLocalDescription(answer);
    console.log('Set local description (answer)');

    this.sendSignalingMessage({
      type: 'answer',
      sdp: answer.sdp
    });

    this.hangupButton.disabled = false;
    this.updateStatus('In call');
  }

  async handleAnswer(message) {
    console.log('Handling answer');
    await this.peerConnection.setRemoteDescription(
      new RTCSessionDescription({ type: 'answer', sdp: message.sdp })
    );
    console.log('Set remote description (answer)');
    this.updateStatus('Connected');
  }

  async handleIceCandidate(message) {
    try {
      const candidate = new RTCIceCandidate(message.candidate);
      await this.peerConnection.addIceCandidate(candidate);
      console.log('Added ICE candidate');
    } catch (error) {
      console.error('Error adding ICE candidate:', error);
    }
  }

  toggleAudio() {
    if (this.localStream) {
      const audioTrack = this.localStream.getAudioTracks()[0];
      if (audioTrack) {
        this.isAudioMuted = !this.isAudioMuted;
        audioTrack.enabled = !this.isAudioMuted;
        this.muteButton.textContent = this.isAudioMuted ? 'Unmute Audio' : 'Mute Audio';
        console.log('Audio muted:', this.isAudioMuted);
      }
    }
  }

  toggleVideo() {
    if (this.localStream) {
      const videoTrack = this.localStream.getVideoTracks()[0];
      if (videoTrack) {
        this.isVideoEnabled = !this.isVideoEnabled;
        videoTrack.enabled = this.isVideoEnabled;
        this.videoToggle.textContent = this.isVideoEnabled ? 'Stop Video' : 'Start Video';
        console.log('Video enabled:', this.isVideoEnabled);
      }
    }
  }

  sendMessage() {
    const text = this.messageInput.value.trim();
    if (text && this.dataChannel && this.dataChannel.readyState === 'open') {
      const message = { text, timestamp: Date.now() };
      this.dataChannel.send(JSON.stringify(message));
      this.addChatMessage('You', text, 'sent');
      this.messageInput.value = '';
      console.log('Message sent:', text);
    }
  }

  addChatMessage(sender, text, type) {
    const messageDiv = document.createElement('div');
    messageDiv.className = `chat-message ${type}`;
    messageDiv.innerHTML = `<strong>${sender}:</strong> ${text}`;
    this.chatMessages.appendChild(messageDiv);
    this.chatMessages.scrollTop = this.chatMessages.scrollHeight;
  }

  hangup() {
    console.log('Hanging up');
    this.updateStatus('Disconnected');

    // Close peer connection
    if (this.peerConnection) {
      this.peerConnection.close();
      this.peerConnection = null;
    }

    // Close data channel
    if (this.dataChannel) {
      this.dataChannel.close();
      this.dataChannel = null;
    }

    // Stop remote stream
    if (this.remoteStream) {
      this.remoteStream.getTracks().forEach(track => track.stop());
      this.remoteStream = null;
      this.remoteVideo.srcObject = null;
    }

    // Reset buttons
    this.callButton.disabled = false;
    this.hangupButton.disabled = true;
    this.messageInput.disabled = true;
    this.sendButton.disabled = true;

    console.log('Call ended');
  }

  handleConnectionFailure() {
    console.error('Connection failed');
    alert('Connection failed. Please try again.');
    this.hangup();
  }

  updateStatus(status) {
    document.getElementById('status').textContent = status;
    console.log('Status updated:', status);
  }

  sendSignalingMessage(message) {
    // This would connect to your signaling server
    console.log('Sending signaling message:', message);
    // Example: signalingSocket.send(JSON.stringify(message));
  }
}

// Initialize the application
const videoChat = new VideoChat();
console.log('Video chat application initialized');

Console Output Example:

Video chat application initialized
Status updated: Disconnected
Requesting local stream
Local stream obtained: MediaStreamTrack { ... }
Track: video, ID: {uuid}, Label: Front Camera
Track: audio, ID: {uuid}, Label: Default Microphone
Status updated: Camera ready
Starting call
Creating peer connection with config: { iceServers: [...] }
Adding track to peer connection: video
Adding track to peer connection: audio
Creating data channel
Created offer: RTCSessionDescriptionInit { type: "offer", sdp: "v=0..." }
Set local description
Sending signaling message: { type: 'offer', sdp: '...' }
Status updated: Calling...
New ICE candidate: candidate:1 1 UDP 2130706431...
ICE connection state: checking
Connection state: connecting
ICE connection state: connected
Connection state: connected
Status updated: Connected
Data channel opened

Step 3: Signaling Server (Node.js + Socket.io)

// server.js - WebSocket signaling server

const express = require('express');
const http = require('http');
const socketIO = require('socket.io');
const path = require('path');

const app = express();
const server = http.createServer(app);
const io = socketIO(server, {
  cors: {
    origin: "*",
    methods: ["GET", "POST"]
  }
});

// Serve static files
app.use(express.static(path.join(__dirname, 'public')));

// Store connected clients
const clients = new Map();

io.on('connection', (socket) => {
  console.log('New client connected:', socket.id);
  clients.set(socket.id, socket);

  // Broadcast current number of connected clients
  io.emit('user-count', clients.size);

  // Handle signaling messages
  socket.on('signal', (data) => {
    console.log('Signal received from', socket.id, ':', data.type);

    // Broadcast to all other clients
    socket.broadcast.emit('signal', {
      ...data,
      senderId: socket.id
    });
  });

  // Handle offer
  socket.on('offer', (data) => {
    console.log('Offer received from', socket.id);
    socket.broadcast.emit('offer', {
      ...data,
      senderId: socket.id
    });
  });

  // Handle answer
  socket.on('answer', (data) => {
    console.log('Answer received from', socket.id);
    socket.broadcast.emit('answer', {
      ...data,
      senderId: socket.id
    });
  });

  // Handle ICE candidates
  socket.on('ice-candidate', (data) => {
    console.log('ICE candidate received from', socket.id);
    socket.broadcast.emit('ice-candidate', {
      ...data,
      senderId: socket.id
    });
  });

  // Handle disconnection
  socket.on('disconnect', () => {
    console.log('Client disconnected:', socket.id);
    clients.delete(socket.id);
    io.emit('user-count', clients.size);
  });
});

const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
  console.log(`Signaling server running on port ${PORT}`);
});

Server Console Output:

Signaling server running on port 3000
New client connected: abc123xyz
Signal received from abc123xyz : offer
Offer received from abc123xyz
New client connected: def456uvw
ICE candidate received from abc123xyz
ICE candidate received from def456uvw

---

Advanced WebRTC Concepts

Screen Sharing

Capture and share screen content with peers.

async function startScreenShare() {
  try {
    const displayMediaOptions = {
      video: {
        cursor: 'always',
        displaySurface: 'monitor' // 'monitor', 'window', 'application', 'browser'
      },
      audio: {
        echoCancellation: true,
        noiseSuppression: true,
        sampleRate: 44100
      }
    };

    const screenStream = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);

    console.log('Screen share started:', screenStream.getTracks());

    // Replace video track in peer connection
    const videoTrack = screenStream.getVideoTracks()[0];
    const sender = peerConnection
      .getSenders()
      .find(s => s.track?.kind === 'video');

    if (sender) {
      await sender.replaceTrack(videoTrack);
      console.log('Video track replaced with screen share');
    }

    // Handle screen share stop
    videoTrack.onended = () => {
      console.log('Screen share stopped by user');
      stopScreenShare();
    };

    return screenStream;

  } catch (error) {
    console.error('Error starting screen share:', error);
    throw error;
  }
}

async function stopScreenShare() {
  // Revert to camera stream
  const cameraStream = await navigator.mediaDevices.getUserMedia({ 
    video: true 
  });

  const videoTrack = cameraStream.getVideoTracks()[0];
  const sender = peerConnection
    .getSenders()
    .find(s => s.track?.kind === 'video');

  if (sender) {
    await sender.replaceTrack(videoTrack);
    console.log('Reverted to camera stream');
  }
}

Output:

Screen share started: [MediaStreamTrack { kind: "video", label: "Screen", ... }]
Video track replaced with screen share
Screen share stopped by user
Reverted to camera stream

Adaptive Bitrate Control

Dynamically adjust video quality based on network conditions.

class AdaptiveBitrateController {
  constructor(peerConnection) {
    this.peerConnection = peerConnection;
    this.targetBitrate = 1000000; // 1 Mbps default
    this.monitor();
  }

  async monitor() {
    setInterval(async () => {
      const stats = await this.getConnectionStats();
      this.adjustBitrate(stats);
    }, 2000);
  }

  async getConnectionStats() {
    const stats = await this.peerConnection.getStats();
    let result = {
      bytesReceived: 0,
      bytesSent: 0,
      packetsLost: 0,
      jitter: 0,
      roundTripTime: 0
    };

    stats.forEach(report => {
      if (report.type === 'inbound-rtp' && report.kind === 'video') {
        result.bytesReceived = report.bytesReceived;
        result.packetsLost = report.packetsLost;
        result.jitter = report.jitter;
      }

      if (report.type === 'outbound-rtp' && report.kind === 'video') {
        result.bytesSent = report.bytesSent;
      }

      if (report.type === 'candidate-pair' && report.state === 'succeeded') {
        result.roundTripTime = report.currentRoundTripTime;
      }
    });

    console.log('Connection stats:', result);
    return result;
  }

  async adjustBitrate(stats) {
    let newBitrate = this.targetBitrate;

    // Reduce bitrate if packet loss is high
    if (stats.packetsLost > 100) {
      newBitrate = Math.max(this.targetBitrate * 0.8, 250000); // Min 250 Kbps
      console.log('High packet loss detected, reducing bitrate');
    }

    // Reduce bitrate if RTT is high
    if (stats.roundTripTime > 0.3) {
      newBitrate = Math.max(this.targetBitrate * 0.7, 250000);
      console.log('High RTT detected, reducing bitrate');
    }

    // Increase bitrate if conditions are good
    if (stats.packetsLost < 10 && stats.roundTripTime < 0.1) {
      newBitrate = Math.min(this.targetBitrate * 1.2, 3000000); // Max 3 Mbps
      console.log('Good conditions, increasing bitrate');
    }

    if (newBitrate !== this.targetBitrate) {
      await this.setBitrate(newBitrate);
      this.targetBitrate = newBitrate;
    }
  }

  async setBitrate(bitrate) {
    const senders = this.peerConnection.getSenders();

    for (const sender of senders) {
      if (sender.track?.kind === 'video') {
        const parameters = sender.getParameters();

        if (!parameters.encodings) {
          parameters.encodings = [{}];
        }

        parameters.encodings[0].maxBitrate = bitrate;

        await sender.setParameters(parameters);
        console.log(`Bitrate set to: ${(bitrate / 1000000).toFixed(2)} Mbps`);
      }
    }
  }
}

// Usage
const bitrateController = new AdaptiveBitrateController(peerConnection);

Console Output:

Connection stats: { bytesReceived: 1048576, bytesSent: 1048576, packetsLost: 5, jitter: 0.002, roundTripTime: 0.05 }
Good conditions, increasing bitrate
Bitrate set to: 1.20 Mbps
Connection stats: { bytesReceived: 2097152, bytesSent: 2097152, packetsLost: 150, jitter: 0.015, roundTripTime: 0.25 }
High packet loss detected, reducing bitrate
Bitrate set to: 0.96 Mbps

Recording Media Streams

Record audio/video streams using MediaRecorder API.

class StreamRecorder {
  constructor(stream) {
    this.stream = stream;
    this.recorder = null;
    this.chunks = [];
  }

  start(mimeType = 'video/webm;codecs=vp9') {
    try {
      // Check if mimeType is supported
      if (!MediaRecorder.isTypeSupported(mimeType)) {
        console.warn(`${mimeType} not supported, falling back to default`);
        mimeType = 'video/webm';
      }

      this.recorder = new MediaRecorder(this.stream, {
        mimeType,
        videoBitsPerSecond: 2500000 // 2.5 Mbps
      });

      this.recorder.ondataavailable = (event) => {
        if (event.data && event.data.size > 0) {
          this.chunks.push(event.data);
          console.log(`Chunk recorded: ${(event.data.size / 1024).toFixed(2)} KB`);
        }
      };

      this.recorder.onstop = () => {
        console.log('Recording stopped');
        this.saveRecording();
      };

      this.recorder.onerror = (error) => {
        console.error('Recorder error:', error);
      };

      // Collect data every second
      this.recorder.start(1000);
      console.log('Recording started with mime type:', mimeType);

    } catch (error) {
      console.error('Error starting recorder:', error);
      throw error;
    }
  }

  stop() {
    if (this.recorder && this.recorder.state !== 'inactive') {
      this.recorder.stop();
    }
  }

  saveRecording() {
    const blob = new Blob(this.chunks, { type: 'video/webm' });
    const url = URL.createObjectURL(blob);

    console.log(`Recording size: ${(blob.size / 1024 / 1024).toFixed(2)} MB`);

    // Create download link
    const a = document.createElement('a');
    a.href = url;
    a.download = `recording-${Date.now()}.webm`;
    a.click();

    console.log('Recording saved');

    // Cleanup
    URL.revokeObjectURL(url);
    this.chunks = [];
  }
}

// Usage
const recorder = new StreamRecorder(localStream);
recorder.start();

// Stop after 10 seconds
setTimeout(() => {
  recorder.stop();
}, 10000);

Console Output:

Recording started with mime type: video/webm;codecs=vp9
Chunk recorded: 256.45 KB
Chunk recorded: 243.12 KB
Chunk recorded: 267.89 KB
... (more chunks)
Recording stopped
Recording size: 12.34 MB
Recording saved

---

Real-World Use Cases

1. Video Conferencing Platform

Key Features:

• Multi-party video calls using Mesh, SFU, or MCU architecture
• Screen sharing with annotation tools
• Virtual backgrounds using Canvas API
• Chat and file sharing
• Recording and playback

Popular Examples: Zoom, Google Meet, Microsoft Teams

2. Live Streaming

Implementation:

• Broadcaster uses WebRTC to send stream to server
• Server transcodes and distributes via HLS/DASH
• Low-latency streaming (1-3 seconds delay)
• Interactive features (chat, polls, reactions)

Popular Examples: Twitch, YouTube Live, Facebook Live

3. Telemedicine Applications

Features:

• HIPAA-compliant encrypted video calls
• File sharing for medical records
• Screen sharing for diagnosis
• Recording with patient consent
• Integration with electronic health records (EHR)

4. Customer Support

Implementation:

• One-click video support from website
• Co-browsing with screen share
• File transfer for documentation
• Integration with CRM systems

Popular Examples: Zendesk, Intercom

5. Online Gaming

Features:

• Voice chat during gameplay
• Low-latency peer-to-peer communication
• Data channels for game state synchronization
• Screen sharing for spectators

---

Performance Optimization

1. Implement Connection Monitoring

class ConnectionMonitor {
  constructor(peerConnection) {
    this.peerConnection = peerConnection;
    this.metrics = {
      latency: 0,
      packetLoss: 0,
      bandwidth: 0,
      fps: 0
    };
  }

  async startMonitoring(callback) {
    this.monitoringInterval = setInterval(async () => {
      const stats = await this.collectStats();
      this.metrics = this.calculateMetrics(stats);

      console.log('Performance metrics:', this.metrics);

      if (callback) {
        callback(this.metrics);
      }
    }, 1000);
  }

  async collectStats() {
    const stats = await this.peerConnection.getStats();
    const data = {
      video: {},
      audio: {},
      connection: {}
    };

    stats.forEach(report => {
      if (report.type === 'inbound-rtp') {
        if (report.kind === 'video') {
          data.video = {
            bytesReceived: report.bytesReceived,
            packetsReceived: report.packetsReceived,
            packetsLost: report.packetsLost,
            framesDecoded: report.framesDecoded,
            framesDropped: report.framesDropped
          };
        } else if (report.kind === 'audio') {
          data.audio = {
            bytesReceived: report.bytesReceived,
            packetsReceived: report.packetsReceived,
            packetsLost: report.packetsLost
          };
        }
      }

      if (report.type === 'candidate-pair' && report.state === 'succeeded') {
        data.connection = {
          currentRoundTripTime: report.currentRoundTripTime,
          availableOutgoingBitrate: report.availableOutgoingBitrate
        };
      }
    });

    return data;
  }

  calculateMetrics(data) {
    const metrics = {};

    // Calculate latency
    if (data.connection.currentRoundTripTime) {
      metrics.latency = (data.connection.currentRoundTripTime * 1000).toFixed(2);
    }

    // Calculate packet loss percentage
    if (data.video.packetsReceived) {
      const totalPackets = data.video.packetsReceived + data.video.packetsLost;
      metrics.packetLoss = ((data.video.packetsLost / totalPackets) * 100).toFixed(2);
    }

    // Calculate bandwidth
    if (data.connection.availableOutgoingBitrate) {
      metrics.bandwidth = (data.connection.availableOutgoingBitrate / 1000000).toFixed(2);
    }

    // Calculate FPS
    if (data.video.framesDecoded) {
      metrics.fps = data.video.framesDecoded;
    }

    return metrics;
  }

  stopMonitoring() {
    if (this.monitoringInterval) {
      clearInterval(this.monitoringInterval);
    }
  }
}

// Usage
const monitor = new ConnectionMonitor(peerConnection);
monitor.startMonitoring((metrics) => {
  // Update UI with metrics
  document.getElementById('latency').textContent = `${metrics.latency} ms`;
  document.getElementById('packetLoss').textContent = `${metrics.packetLoss}%`;
  document.getElementById('bandwidth').textContent = `${metrics.bandwidth} Mbps`;
});

Output:

Performance metrics: { latency: '45.23', packetLoss: '0.12', bandwidth: '2.45', fps: 30 }

2. Optimize Video Quality

const videoConstraints = {
  video: {
    width: { min: 640, ideal: 1280, max: 1920 },
    height: { min: 480, ideal: 720, max: 1080 },
    frameRate: { min: 15, ideal: 30, max: 60 },
    facingMode: 'user',
    aspectRatio: 16/9
  }
};

// Apply constraints dynamically
async function updateVideoQuality(quality) {
  const constraints = {
    low: { width: 640, height: 480, frameRate: 15 },
    medium: { width: 1280, height: 720, frameRate: 30 },
    high: { width: 1920, height: 1080, frameRate: 60 }
  };

  const videoTrack = localStream.getVideoTracks()[0];
  await videoTrack.applyConstraints({
    width: constraints[quality].width,
    height: constraints[quality].height,
    frameRate: constraints[quality].frameRate
  });

  console.log(`Video quality updated to: ${quality}`);
}

3. Implement Simulcast

Send multiple quality streams simultaneously for better scalability.

const sender = peerConnection.addTransceiver('video', {
  direction: 'sendonly',
  streams: [localStream],
  sendEncodings: [
    { rid: 'high', maxBitrate: 2000000, scaleResolutionDownBy: 1 },
    { rid: 'medium', maxBitrate: 1000000, scaleResolutionDownBy: 2 },
    { rid: 'low', maxBitrate: 500000, scaleResolutionDownBy: 4 }
  ]
});

console.log('Simulcast enabled with 3 layers');

---

Security Best Practices

1. Mandatory Encryption

WebRTC enforces encryption by default using:

• DTLS (Datagram Transport Layer Security) for data channels
• SRTP (Secure Real-Time Protocol) for media streams

// Verify encryption
peerConnection.getStats().then(stats => {
  stats.forEach(report => {
    if (report.type === 'transport') {
      console.log('DTLS State:', report.dtlsState);
      console.log('SRTP Cipher:', report.srtpCipher);
      console.log('DTLS Cipher:', report.dtlsCipher);
    }
  });
});

Output:

DTLS State: connected
SRTP Cipher: AES_CM_128_HMAC_SHA1_80
DTLS Cipher: TLS_ECDHE_ECDSA_WITH_AES_128_GCM_SHA256

2. Implement Authentication

// Token-based authentication for signaling
class SecureSignaling {
  constructor(serverUrl, authToken) {
    this.socket = io(serverUrl, {
      auth: { token: authToken }
    });

    this.socket.on('connect_error', (error) => {
      console.error('Authentication failed:', error.message);
    });

    this.socket.on('connect', () => {
      console.log('Authenticated connection established');
    });
  }

  sendMessage(message) {
    this.socket.emit('signal', {
      ...message,
      timestamp: Date.now(),
      signature: this.signMessage(message)
    });
  }

  signMessage(message) {
    // Implement HMAC signing
    return 'signature-hash';
  }
}

3. Validate TURN Server Credentials

const configuration = {
  iceServers: [
    { urls: 'stun:stun.l.google.com:19302' },
    {
      urls: 'turn:your-turn-server.com:3478',
      username: generateTempUsername(),
      credential: generateTempCredential(),
      credentialType: 'password'
    }
  ]
};

function generateTempUsername() {
  // Generate time-limited username
  const timestamp = Math.floor(Date.now() / 1000) + 86400; // 24 hours
  return `${timestamp}:user${Math.random().toString(36).substring(7)}`;
}

function generateTempCredential() {
  // Generate HMAC-based credential
  const secret = 'your-turn-secret';
  const username = generateTempUsername();
  return hmacSHA1(username, secret);
}

4. Content Security Policy

<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self'; 
               connect-src 'self' wss://your-signaling-server.com; 
               media-src 'self' blob:; 
               script-src 'self' 'unsafe-inline';">

---

Troubleshooting Common Issues

Issue 1: Camera/Microphone Not Working

async function troubleshootMediaDevices() {
  try {
    // Check browser support
    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
      console.error('getUserMedia not supported');
      return { error: 'Browser does not support media devices' };
    }

    // Enumerate devices
    const devices = await navigator.mediaDevices.enumerateDevices();
    console.log('Available devices:', devices);

    const videoDevices = devices.filter(d => d.kind === 'videoinput');
    const audioDevices = devices.filter(d => d.kind === 'audioinput');

    if (videoDevices.length === 0) {
      console.warn('No video devices found');
    }
    if (audioDevices.length === 0) {
      console.warn('No audio devices found');
    }

    // Try to get permissions
    const stream = await navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true
    });

    console.log('✓ Media devices working correctly');
    return { success: true, stream };

  } catch (error) {
    console.error('Media device error:', error.name, error.message);

    switch (error.name) {
      case 'NotAllowedError':
        return { error: 'Permission denied. Please allow camera/microphone access.' };
      case 'NotFoundError':
        return { error: 'No camera or microphone found.' };
      case 'NotReadableError':
        return { error: 'Device already in use by another application.' };
      default:
        return { error: `Error: ${error.message}` };
    }
  }
}

// Run diagnostic
troubleshootMediaDevices().then(result => {
  console.log('Diagnostic result:', result);
});

Output:

Available devices: [
  { deviceId: "default", kind: "audioinput", label: "Default - Microphone" },
  { deviceId: "abc123", kind: "videoinput", label: "Front Camera" }
]
✓ Media devices working correctly
Diagnostic result: { success: true, stream: MediaStream {...} }

Issue 2: Connection Fails (ICE Failure)

function diagnoseICEFailure(peerConnection) {
  peerConnection.oniceconnectionstatechange = () => {
    const state = peerConnection.iceConnectionState;
    console.log('ICE Connection State:', state);

    if (state === 'failed') {
      console.error('❌ ICE connection failed');
      console.log('Troubleshooting steps:');
      console.log('1. Check if STUN/TURN servers are accessible');
      console.log('2. Verify firewall settings');
      console.log('3. Ensure valid TURN credentials');

      // Attempt ICE restart
      peerConnection.restartIce();
      console.log('Attempting ICE restart...');
    }
  };

  peerConnection.onicegatheringstatechange = () => {
    console.log('ICE Gathering State:', peerConnection.iceGatheringState);
  };

  peerConnection.onicecandidate = (event) => {
    if (event.candidate) {
      console.log('ICE Candidate Type:', event.candidate.type);
      console.log('ICE Candidate Protocol:', event.candidate.protocol);
      console.log('ICE Candidate Address:', event.candidate.address);
    } else {
      console.log('All ICE candidates gathered');
    }
  };
}

Output:

ICE Gathering State: gathering
ICE Candidate Type: host
ICE Candidate Protocol: udp
ICE Candidate Address: 192.168.1.100
ICE Candidate Type: srflx
ICE Candidate Protocol: udp
ICE Candidate Address: 203.0.113.50
All ICE candidates gathered
ICE Connection State: checking
ICE Connection State: connected

Issue 3: No Audio/Video Received

async function diagnoseMediaIssues(peerConnection) {
  console.log('=== Media Diagnostic ===');

  // Check transceivers
  const transceivers = peerConnection.getTransceivers();
  console.log(`Found ${transceivers.length} transceivers`);

  transceivers.forEach((transceiver, index) => {
    console.log(`Transceiver ${index}:`);
    console.log('  - Media type:', transceiver.mid);
    console.log('  - Direction:', transceiver.direction);
    console.log('  - Current direction:', transceiver.currentDirection);

    if (transceiver.receiver) {
      console.log('  - Receiver track:', transceiver.receiver.track);
    }
  });

  // Check stats
  const stats = await peerConnection.getStats();
  stats.forEach(report => {
    if (report.type === 'inbound-rtp') {
      console.log(`\n${report.kind.toUpperCase()} Stats:`);
      console.log('  - Bytes received:', report.bytesReceived);
      console.log('  - Packets received:', report.packetsReceived);
      console.log('  - Packets lost:', report.packetsLost);

      if (report.kind === 'video') {
        console.log('  - Frames decoded:', report.framesDecoded);
        console.log('  - Frames dropped:', report.framesDropped);
      }
    }
  });

  console.log('\n=== End Diagnostic ===');
}

---

Future of WebRTC

Emerging Trends

1. WebRTC in IoT and Edge Computing

Real-time communication between IoT devices and edge servers for low-latency applications.

2. AI-Powered Enhancements

• Real-time background replacement
• Noise cancellation with ML models
• Automatic framing and gesture recognition
• Live translation and transcription

3. WebTransport Integration

Next-generation transport protocol offering better performance than WebRTC data channels.

// Future: WebTransport API
const transport = new WebTransport('https://example.com/webrtc');
await transport.ready;

const stream = await transport.createBidirectionalStream();
const writer = stream.writable.getWriter();
await writer.write(new TextEncoder().encode('Hello WebTransport!'));

4. Insertable Streams (WebRTC Encoded Transform)

Process audio/video frames before encoding/decoding for custom effects.

// Enable insertable streams
const sender = peerConnection.addTrack(videoTrack, localStream);
const senderStreams = sender.createEncodedStreams();

const transformStream = new TransformStream({
  transform(chunk, controller) {
    // Custom processing (e.g., encryption, watermarking)
    const processed = processFrame(chunk);
    controller.enqueue(processed);
  }
});

senderStreams.readable
  .pipeThrough(transformStream)
  .pipeTo(senderStreams.writable);

5. WebCodecs API

Low-level access to video/audio codecs for advanced use cases.

// Decode video frames
const decoder = new VideoDecoder({
  output: (frame) => {
    // Process decoded frame
    console.log('Decoded frame:', frame);
    frame.close();
  },
  error: (error) => {
    console.error('Decoder error:', error);
  }
});

decoder.configure({
  codec: 'vp09.00.10.08',
  codedWidth: 1920,
  codedHeight: 1080
});

Browser Support Evolution

Feature	Chrome	Firefox	Safari	Edge
Basic WebRTC	✅ 23+	✅ 22+	✅ 11+	✅ 79+
Insertable Streams	✅ 86+	⚠️ Partial	❌	✅ 86+
WebCodecs	✅ 94+	❌	❌	✅ 94+
AV1 Codec	✅ 90+	✅ 67+	❌	✅ 90+

---

Conclusion

WebRTC has fundamentally transformed how we build real-time communication applications on the web. From simple video calls to complex multi-party conferencing systems, WebRTC provides the foundation for seamless, low-latency communication without plugins or third-party software.

Key Takeaways

1. Start Simple: Begin with basic peer-to-peer connections before scaling to complex architectures
2. Master the APIs: Deep understanding of MediaStream, RTCPeerConnection, and RTCDataChannel is essential
3. Plan for Scale: Choose appropriate architecture (Mesh, SFU, MCU) based on your use case
4. Optimize Continuously: Monitor performance metrics and adapt quality dynamically
5. Security First: Always use encryption, authentication, and follow security best practices
6. Handle Edge Cases: Implement robust error handling and fallback mechanisms

Next Steps

1. Build a Demo Project: Create a simple video chat application
2. Explore Advanced Features: Implement screen sharing, recording, and adaptive bitrate
3. Deploy in Production: Set up TURN servers and signaling infrastructure
4. Monitor Performance: Use analytics to track connection quality and user experience
5. Stay Updated: Follow WebRTC standards and emerging technologies

Resources

• WebRTC Official Specification
• MDN WebRTC API Documentation
• Google WebRTC Samples
• WebRTC GitHub Repository

---

Frequently Asked Questions

Q1: Do I need a server for WebRTC?

A: Yes, but only for signaling. The actual media flows peer-to-peer. You need:

• Signaling server (WebSocket/HTTP)
• STUN server (usually free public ones work)
• TURN server (for 5-10% of connections that can't go P2P)

Q2: What's the maximum number of participants in a WebRTC call?

A: For pure mesh topology, 4-6 participants max. For more, use SFU (Selective Forwarding Unit) architecture which can handle 100+ participants.

Q3: Is WebRTC secure?

A: Yes! WebRTC mandates encryption:

• DTLS for data channels
• SRTP for media streams
• No way to disable encryption

Q4: What about mobile support?

A: WebRTC works on iOS Safari 11+ and Android Chrome. Use progressive enhancement and provide fallbacks.

Q5: How much bandwidth does WebRTC use?

A: Varies by quality:

• Audio: 50-100 Kbps
• Video (720p): 1-2 Mbps
• Video (1080p): 2-4 Mbps

Use adaptive bitrate to optimize automatically.

---

About the Author: This comprehensive guide covers everything you need to master WebRTC development in 2025. Whether you're building a simple video chat or a complex communication platform, these concepts and code examples will help you create robust, scalable real-time applications.

Keywords: WebRTC tutorial, real-time communication, peer-to-peer video, WebRTC JavaScript, video chat application, getUserMedia, RTCPeerConnection, WebRTC signaling, STUN TURN servers, WebRTC security, screen sharing, adaptive bitrate, WebRTC 2025

---

Last Updated: October 2025 | Reading Time: 45 minutes