Skip to main content

Video & Streaming Engine

The FirstBreath dashboard is unique because it must display live video with Sub-second Latency in a browser environment.

The Protocol Manager (useProtocolManager)​

We do not rely on a single streaming protocol. Instead, we use a smart fallback strategy to ensure video always plays, degrading latency if necessary.

Priority Order​

  1. MSE (Media Source Extensions) - Preferred

    • Latency: ~300ms
    • Transport: Websockets (Binary Blob)
    • Pros: Lowest latency possible without WebRTC complexity.
    • Cons: High CPU usage on client.

  2. WebRTC

    • Latency: ~500ms
    • Transport: UDP/TCP
    • Pros: Standard for real-time.
    • Cons: Complex firewall traversal (ICE/STUN/TURN).

  3. HLS-LL (Low Latency HLS)

    • Latency: ~2-4s
    • Transport: HTTP (Chunks)
    • Pros: Good balance.

  4. HLS (Standard) - Last Resort

    • Latency: ~10s+
    • Pros: Works everywhere (even on poor 3G).
    • Cons: High delay, useless for real-time intervention.

Implementation​

The useProtocolManager hook attempts to connect using the highest priority protocol available. If the stream fails or stalls for > 500ms, it triggers a switch to the next available protocol.

const { currentProtocol } = useProtocolManager({
  preferredProtocol: "mse",
  onProtocolChange: (p) => console.log("Switched to", p),
});

Socket Manager (useSocketManager)​

We use a singleton pattern to manage multiple Socket.io connections (one per camera stream if using MSE, plus one for the global app events).

  • Connection Pooling: Stores sockets in a Map<string, Socket>.
  • Auto-Auth: Automatically injects the JWT from tokenManager into the handshake auth object.
  • Garbage Collection: Automatically disconnects sockets that haven't been used for 5 minutes to save backend resources.