webrtc-realtime-media-streaming

WebRTC Real-Time Media Streaming Skill Guide

This skill governs the design and deployment of ultra-low latency (<500ms) WebRTC communication pipelines, signaling protocols, and SFU topologies.

1. WebRTC SFU Topology & Signaling Flow

[ Client Peer A ]                       [ Signaling Server ]             [ SFU Media Router ]
       |                                         |                                |
       |--(1) Create Offer (SDP) --------------->|                                |
       |                                         |--(2) Relay Offer ------------->|
       |                                         |<-(3) Answer (SDP) -------------|
       |<-(4) Set Remote Description ------------|                                |
       |                                                                          |
       |========== (5) ICE Gathering & STUN/TURN Binding ========================>|
       |                                                                          |
       |>>>>>>>>>> (6) Secure SRTP Audio / Video Stream (UDP) >>>>>>>>>>>>>>>>>>>>|

2. Production Code Standards

A. WebRTC Peer Connection Manager (TypeScript)

export class WebRTCConnection {
  private pc: RTCPeerConnection;
  private localStream?: MediaStream;

  constructor(
    private readonly iceServers: RTCIceServer[],
    private readonly onTrackCallback: (track: MediaStreamTrack, streams: readonly MediaStream[]) => void,
    private readonly onIceCandidateCallback: (candidate: RTCIceCandidate) => void
  ) {
    this.pc = new RTCPeerConnection({
      iceServers: this.iceServers,
      iceTransportPolicy: "all",
      bundlePolicy: "max-bundle",
      rtcpMuxPolicy: "require",
    });

    this.registerEventHandlers();
  }

  private registerEventHandlers(): void {
    this.pc.ontrack = (event) => {
      this.onTrackCallback(event.track, event.streams);
    };

    this.pc.onicecandidate = (event) => {
      if (event.candidate) {
        this.onIceCandidateCallback(event.candidate);
      }
    };

    this.pc.onconnectionstatechange = () => {
      console.log(`[WebRTC] Connection State: ${this.pc.connectionState}`);
    };
  }

  public async startCapture(videoConstraint: boolean = true, audioConstraint: boolean = true): Promise<MediaStream> {
    this.localStream = await navigator.mediaDevices.getUserMedia({
      video: videoConstraint ? { width: { ideal: 1280 }, height: { ideal: 720 }, frameRate: { max: 30 } } : false,
      audio: audioConstraint ? { echoCancellation: true, noiseSuppression: true, autoGainControl: true } : false,
    });

    for (const track of this.localStream.getTracks()) {
      this.pc.addTrack(track, this.localStream);
    }
    return this.localStream;
  }

  public async createOffer(): Promise<RTCSessionDescriptionInit> {
    const offer = await this.pc.createOffer({
      offerToReceiveAudio: true,
      offerToReceiveVideo: true,
    });
    await this.pc.setLocalDescription(offer);
    return offer;
  }

  public async handleAnswer(answer: RTCSessionDescriptionInit): Promise<void> {
    await this.pc.setRemoteDescription(new RTCSessionDescription(answer));
  }

  public async addIceCandidate(candidateInit: RTCIceCandidateInit): Promise<void> {
    await this.pc.addIceCandidate(new RTCIceCandidate(candidateInit));
  }

  public close(): void {
    this.localStream?.getTracks().forEach((track) => track.stop());
    this.pc.close();
  }
}