CodcompassCodcompass
Back to KB
Difficulty
Intermediate
Read Time
10 min

Wiring up a hybrid WebRTC + LL-HLS live stack (the protocol decision tree that actually works)

By Codcompass Team··10 min read

Architecting Dual-Protocol Live Streams: Scaling Interactive Broadcasts Without Sacrificing Latency

Current Situation Analysis

Modern interactive broadcasting faces a structural contradiction: presenters require sub-second feedback to maintain natural conversation flow, while audiences demand scalable, buffer-free playback across thousands of concurrent connections. Engineering teams historically treated these requirements as mutually exclusive, forcing a choice between real-time media relays and HTTP-based streaming protocols.

The misconception stems from viewing latency and scalability as a zero-sum game. In reality, they operate on different network layers and serve different user roles. WebRTC excels at bidirectional, sub-500ms communication but struggles beyond a few hundred concurrent sessions per media node due to CPU-bound encoding, UDP state tracking, and the inability to leverage standard HTTP caching. Conversely, LL-HLS (Low-Latency HTTP Live Streaming) sacrifices bidirectional interactivity to achieve CDN-friendly distribution, partial segment delivery, and linear scaling.

Production telemetry consistently shows that a standard 4-core media relay saturates around 200 concurrent WebRTC viewers before packet loss and jitter degrade the experience. The same hardware, when paired with an LL-HLS packaging pipeline and edge caching, comfortably serves 1,000+ viewers with stable throughput. The gap widens exponentially as audience size grows. Teams that attempt to force WebRTC past its scaling limits or rely on traditional HLS for interactive sessions consistently encounter either infrastructure collapse or unacceptable user experience degradation.

The industry has converged on a hybrid topology: real-time protocols for the active stage, HTTP-based low-latency streaming for the passive audience. This architecture isolates the interactive layer from the distribution layer, allowing each to scale independently while maintaining sub-second feedback for presenters and ~2-second playback for viewers.

WOW Moment: Key Findings

The following comparison isolates the operational trade-offs across three architectural approaches. The data reflects production benchmarks on standardized 4-core media nodes with typical broadband uplinks.

ApproachPresenter LatencyViewer LatencyMax Concurrent Viewers (Per Node)CDN CompatibilityInfrastructure Cost
Pure WebRTC<300 ms<300 ms~200None (UDP mesh)High (stateful relays)
Pure LL-HLSN/A (one-way)~2.0–3.0 s~1,000+Full (HTTP/2, edge cache)Low (static assets)
Hybrid (WebRTC + LL-HLS)<300 ms (stage)~2.0–3.0 s (audience)~200 (stage) + ~1,000+ (audience)Full (audience path)Moderate (split pipeline)

This finding matters because it decouples the interactive layer from the distribution layer. By routing presenters through a real-time SFU (Selective Forwarding Unit) and simultaneously publishing a composed RTMP stream to an LL-HLS packager, you preserve the conversational latency required for live interaction while offloading audience delivery to standard HTTP infrastructure. The hybrid model eliminates the scaling ceiling of pure WebRTC without forcing presenters to endure the 10–30 second lag of traditional HLS.

Core Solution

The architecture follows a unidirectional flow: interactive stage → media relay → RTMP bridge → CMAF packaging → edge distribution → low-latency player. Each component serves a distinct purpose, and the boundaries between them are deliberately strict to prevent latency bleed.

Step 1: Stage Ingestion via Real-Time Relay

Presenters connect to an SFU that handles adaptive bitrate, simulcast routing, and dynamic participant management. The relay must support RTMP egress to bridge the real-time session into the HTTP packaging pipeline.

// src/session/StageManager.ts
import { Room, RoomEvent, Track } from 'livekit-client';
import type { LocalTrackPublication } from 'livekit-client';

interface StageConfig {
  wsEndpoint: string;
  tokenProvider: () => Promise<string>;
  videoConstraints: MediaTrackConstraints;
}

export class StageManager {
  private room: Room;
  private isLive = false;

  constructor(private config: StageConfig) {
    this.room = new Room({
      adaptiveStream: true,
      dynacast: true,
      publishDefaults: { simulcast: true },
    });
  }

  async initialize(): Promise<void> {
    const token = await this.config.tok

🎉 Mid-Year Sale — Unlock Full Article

Base plan from just $4.99/mo or $49/yr

Sign in to read the full article and unlock all 635+ tutorials.

Sign In / Register — Start Free Trial

7-day free trial · Cancel anytime · 30-day money-back