WebRTC

WebRTC (Web Real-Time Communication) memungkinkan komunikasi peer-to-peer langsung di browser: video call, audio call, screen sharing, file transfer. Tidak lewat server — langsung antar browser.

Architecture

// Signaling (via your server — WebSocket/HTTP)
Browser A ↔ Signaling Server ↔ Browser B

// After connection established:
Browser A ↔ ← direct P2P → ↔ Browser B
// Data tidak lewat server!

Connection Flow

// 1. Get user media
const stream = await navigator.mediaDevices.getUserMedia({
  video: true,
  audio: true,
});

// 2. Create peer connection
const pc = new RTCPeerConnection({
  iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
});

// 3. Add tracks
stream.getTracks().forEach(track => pc.addTrack(track, stream));

// 4. Create offer (caller)
const offer = await pc.createOffer();
await pc.setLocalDescription(offer);
// Send offer to other peer via signaling server

// 5. Receive answer (caller)
await pc.setRemoteDescription(answer);

// 6. ICE candidates (both sides)
pc.onicecandidate = (event) => {
  if (event.candidate) {
    // Send candidate to other peer via signaling
    signalingServer.send({ type: "candidate", candidate: event.candidate });
  }
};

// 7. Receive remote stream
pc.ontrack = (event) => {
  remoteVideo.srcObject = event.streams[0];
};

Key Concepts

• Signaling — Exchange connection info (offer/answer/ICE candidates). Use WebSocket.
• STUN — Discover public IP address (NAT traversal)
• TURN — Relay server for when direct P2P fails (firewall/symmetric NAT)
• ICE — Framework that tries all connection methods
• SDP — Session description (codec, resolution, etc.)

Screen Sharing

const screenStream = await navigator.mediaDevices.getDisplayMedia({
  video: { cursor: "always" },
  audio: true,
});

// Replace video track
const screenTrack = screenStream.getVideoTracks()[0];
const sender = pc.getSenders().find(s => s.track.kind === "video");
sender.replaceTrack(screenTrack);