Combatting Canadian ISP Latency: Building a Zero-Buffering Video Player in React

<video src="stream.m3u8" controls />

'use client';
import { useEffect, useRef, useCallback } from 'react';
import Hls from 'hls.js';

const HLS_CONFIG = {
  // Buffer tuning specifically for high-latency environments (e.g. Canadian ISPs)
  maxBufferLength: 15,          // Max seconds to buffer ahead
  maxMaxBufferLength: 30,       // Absolute max buffer ceiling
  maxBufferSize: 30 * 1000000,  // 30MB max buffer size
  maxBufferHole: 0.8,           // Generous max gap (seconds) to tolerate in buffer

  // Latency targeting for live content
  liveSyncDurationCount: 3,     
  liveMaxLatencyDurationCount: 6,

  // ABR (Adaptive Bitrate) settings
  abrEwmaDefaultEstimate: 500000, 
  abrBandWidthFactor: 0.8,        
  abrBandWidthUpFactor: 0.5,      // Slower ramp-up to prevent spikes triggering ISP shapers

  // Error recovery - CRITICAL for preventing failure on micro-disconnects
  fragLoadingMaxRetry: 6,
  manifestLoadingMaxRetry: 4,
  levelLoadingMaxRetry: 4,
};

export default function VideoPlayer({ streamUrl, poster }) {
  const videoRef = useRef(null);
  const hlsRef = useRef(null);

  const destroyHls = useCallback(() => {
    if (hlsRef.current) {
      hlsRef.current.destroy();
      hlsRef.current = null;
    }
  }, []);

  useEffect(() => {
    const video = videoRef.current;
    if (!video) return;

    if (Hls.isSupported()) {
      const hls = new Hls(HLS_CONFIG);
      hlsRef.current = hls;

      hls.loadSource(streamUrl);
      hls.attachMedia(video);

      hls.on(Hls.Events.MANIFEST_PARSED, () => {
        video.play().catch(() => {});
      });

      // 🔥 The magic: automatic error recovery
      hls.on(Hls.Events.ERROR, (event, data) => {
        if (data.fatal) {
          switch (data.type) {
            case Hls.ErrorTypes.NETWORK_ERROR:
              console.warn('Network error (Packet Drop), attempting recovery...');
              hls.startLoad();
              break;
            case Hls.ErrorTypes.MEDIA_ERROR:
              console.warn('Media error, attempting recovery...');
              hls.recoverMediaError();
              break;
            default:
              console.error('Fatal error, destroying HLS instance');
              destroyHls();
              break;
          }
        }
      });
    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
      video.src = streamUrl;
    }

    return destroyHls;
  }, [streamUrl, destroyHls]);

  return (
    <div className="relative aspect-video w-full bg-black rounded-xl overflow-hidden">
      <video
        ref={videoRef}
        className="w-full h-full object-contain"
        controls
        playsInline
        poster={poster}
      />
    </div>
  );
}

function setupAntiFreeze(hls, video) {
  let lastPlayPos = 0;
  let stallCount = 0;

  const checker = setInterval(() => {
    const currentPos = video.currentTime;

    if (currentPos === lastPlayPos && !video.paused) {
      stallCount++;

      if (stallCount >= 3) { // Stalled for 3 ticks
        // Force an immediate quality drop to prevent true buffering circle
        const currentLevel = hls.currentLevel;
        if (currentLevel > 0) {
          console.warn(`Anti-freeze active: ISP stall detected. Dropping to level ${currentLevel - 1}`);
          hls.currentLevel = currentLevel - 1;
        }

        // Kickstart the loader
        hls.startLoad();
        stallCount = 0;
      }
    } else {
      stallCount = 0;
    }

    lastPlayPos = currentPos;
  }, 1000);

  return () => clearInterval(checker);
}