HLS Stats

import Hls from 'hls.js';

/**
 * Initialize Hls.js and attach the video element.
 */
const hlsUrl = 'http://my-domain/stream.m3u8';
const hlsInstance = new Hls();
hlsInstance.loadSource(hlsUrl);
hlsInstance.attachMedia(videoEl);

/**
 * initialize HlsStats
 */
const hlsStats = new HlsStats(hlsInstance, videoEl);

import Hls from "hls.js";

export function MyComponent() {
    const hls = new Hls(this.getHLSConfig());
    hls.loadSource(hlsUrl);
    hls.attachMedia(videoRef.current);
    hlsStats = new HlsStats(hls, videoEl);

    return (
       // something
    );
}

const unsubscribe = hlsStats.subscribe((state) => {
    // ...
});

import Hls from "hls.js";

export function MyComponent() {
   ...
   ...
    useEffect(() => {
    const unsubscribe = hlsStats.subscribe(state => {
        setHlsStatsState(state);
    });

    return () => {
      unsubscribe?.();
    };
  }, []);

   ...
   ...
}