Implementing WebRTC: Building Peer-to-Peer Communication in Web Applications

WebRTC transforms browsers into real-time communication tools without plugins. I’ve built several production systems using this technology, and it’s both powerful and frustratingly nuanced. Let me walk you through what actually works when the rubber meets the road.

Establishing direct connections between browsers feels like magic until you hit firewall restrictions. That’s where STUN and TURN servers come in. The Google STUN server in your example works for testing, but production needs redundancy. Always include multiple fallbacks:

const configuration = {
  iceServers: [
    { urls: "stun:global.stun.twilio.com:3478" },
    { 
      urls: "turn:your-turn-server.com:5349",
      username: "client",
      credential: "your-credential" 
    }
  ]
};

Signaling is your responsibility. I prefer WebSockets for their bidirectional nature. Here’s a robust pattern I use:

const signalingChannel = new WebSocket('wss://your-signaling-server');
const pendingCandidates = [];

signalingChannel.addEventListener('message', async (event) => {
  const msg = JSON.parse(event.data);
  
  if (msg.offer) {
    await pc.setRemoteDescription(msg.offer);
    const answer = await pc.createAnswer();
    await pc.setLocalDescription(answer);
    signalingChannel.send(JSON.stringify({ answer }));
    
    // Flush pending ICE candidates
    pendingCandidates.forEach(candidate => {
      signalingChannel.send(JSON.stringify({ candidate }));
    });
  }
  
  if (msg.candidate) {
    try {
      await pc.addIceCandidate(msg.candidate);
    } catch (e) {
      console.error('Error adding candidate:', e);
    }
  }
});

pc.onicecandidate = ({ candidate }) => {
  if (candidate) {
    if (signalingChannel.readyState === WebSocket.OPEN) {
      signalingChannel.send(JSON.stringify({ candidate }));
    } else {
      pendingCandidates.push(candidate);
    }
  }
};

Media handling requires careful resource management. I always include cleanup routines:

const localStream = await navigator.mediaDevices.getUserMedia({
  video: { width: 1280, height: 720 },
  audio: { echoCancellation: true }
});

// Terminate call properly
function endCall() {
  localStream.getTracks().forEach(track => track.stop());
  pc.close();
  document.getElementById('localVideo').srcObject = null;
}

Data channels enable file sharing and collaboration. They’re unreliable by default - perfect for chat but terrible for files. Here’s how I configure binary transfers:

const dataChannel = pc.createDataChannel("files", {
  ordered: false, // Faster but unordered
  maxRetransmits: 0 // No retries
});

dataChannel.binaryType = "arraybuffer";

// Sending a file
fileInput.addEventListener('change', async (e) => {
  const file = e.target.files[0];
  const chunkSize = 16384; // 16KB chunks
  let offset = 0;
  
  while (offset < file.size) {
    const chunk = file.slice(offset, offset + chunkSize);
    dataChannel.send(await chunk.arrayBuffer());
    offset += chunkSize;
  }
});

Network instability will break your connections. ICE restart saved my last project:

pc.onconnectionstatechange = () => {
  if (pc.connectionState === 'disconnected') {
    // Attempt reconnection
    const restartOffer = await pc.createOffer({ iceRestart: true });
    await pc.setLocalDescription(restartOffer);
    signalingChannel.send(JSON.stringify({ offer: restartOffer }));
  }
};

Security isn’t optional. Always use:

• HTTPS everywhere
• RTCIceTransportPolicy: relay for sensitive apps
• Certificate pinning for TURN servers
• Input validation for signaling messages

// Enforce encrypted RTP
pc = new RTCPeerConnection({
  ...configuration,
  sdpSemantics: 'unified-plan',
  encodedInsertableStreams: true // End-to-end encryption
});

Debugging WebRTC requires specific tools. Chrome’s webrtc-internals (chrome://webrtc-internals) shows ICE candidate pairs and packet loss stats. When calls fail, check these common culprits:

• Firewall blocking UDP ports
• Incorrect TURN credentials
• Mismatched SDP formats
• Failed media permissions

For production, monitor these metrics:

• pc.getStats() for packet loss
• Round-trip time (RTT)
• Available bandwidth

Mobile adds another layer of complexity. I always test:

• Device rotation handling
• Background tab behavior
• Network switching (WiFi to cellular)

// Handle device rotation
window.onorientationchange = () => {
  const constraints = { 
    video: { 
      width: window.screen.width, 
      height: window.screen.height 
    } 
  };
  localStream.getVideoTracks()[0].applyConstraints(constraints);
};

The real challenge isn’t the technology - it’s the edge cases. After implementing WebRTC across healthcare and education apps, I keep these lessons close:

1. Always assume 30% of users need TURN servers
2. Never trust browser media permissions - have fallback UI
3. Bundle your STUN/TURN credentials at runtime
4. Simulate network failures during testing

This code reflects patterns I’ve refined through failed deployments and successful recoveries. Start simple, test aggressively, and remember - every network environment behaves differently. Your implementation must adapt like water.