Live Streaming Integration Requires HLS/DASH for Broad Compatibility, WebRTC for Sub-Second Latency

A live streaming feature is built using HLS which has 15–30 second latency by default, making it unusable for interactive live sessions (Q&A, auctions, gaming commentary).

Use Low-Latency HLS (LL-HLS) for 2–5 second latency with broad CDN support, or WebRTC for sub-second latency in small-audience interactive scenarios. Choose based on audience size and interactivity requirements.

// HLS.js client for LL-HLS
import Hls from 'hls.js';

function setupLowLatencyHLS(videoEl: HTMLVideoElement, streamUrl: string) {
  if (!Hls.isSupported()) {
    videoEl.src = streamUrl; // Safari native HLS
    return;
  }

  const hls = new Hls({
    lowLatencyMode: true,
    backBufferLength: 10,
    liveMaxLatencyDuration: 5, // Target <=5s latency
    liveSyncDuration: 2
  });

  hls.loadSource(streamUrl);
  hls.attachMedia(videoEl);
  videoEl.play();

  return () => hls.destroy();
}

Standard HLS segments are 6–10 seconds. LL-HLS uses 200ms partial segments and HTTP/2 push to reduce latency to 2–5 seconds. WebRTC achieves <500ms but requires a media server (SFU) for more than ~20 concurrent viewers.