Audio Video lag, Screen freezing, Black screen issue

[AnshikaRauniyar]

I am using Vimeo/Mux/Gumlet as video providers and my platform plays webinar which is actually a recorded video but for users, give a feel of live video by not allowing moving forward/backward.
I am constantly getting complains from users that audio video is not in sync, lags, screen freezes etc, and this is happening across devices & browser.

`import Hls, { HlsConfig } from 'hls.js';
    function _initPlayer() {
      if (hls != null) {
        hls.destroy();
      }
      window.Hls = Hls;

      const newHls = new Hls({
        ...hlsConfig,
      });
      window.HlsObj = newHls;
      if (playerRef.current != null) {
        newHls.attachMedia(playerRef.current);
        
      }

      if (getHLSRef) {
        getHLSRef(newHls);
      }

   newHls.on(Hls.Events.MEDIA_ATTACHED, () => {
        log('video and hls.js are now bound together !');
        newHls.loadSource(src);
        if(webinar.webinarType === 'AppWebinar')
        {
          newEventTracker.appWebinarRuntimeLoaded({
            webinar,
            webinarSchedule,
            subscriptionStatus,
          })
        }
        
        newHls.on(Hls.Events.MANIFEST_PARSED, (event, data) => {
          log(data.levels);
          log(
            'manifest loaded, found ' + data.levels.length + ' quality level'
          );
          if (autoPlay) {
            playerRef?.current
              ?.play()
              .catch(() =>{
                log(
                  'Unable to autoplay prior to user interaction with the dom.'
                );
                Sentry.captureMessage(`Autoplay failed`, {
                  level: 'warning'
                });
              }
              );
          }
        });
      });
      newHls.on(Hls.Events.LEVEL_SWITCHED, (event, data) => {
        Sentry.captureMessage(`Switched to quality level: ${data.level}`, {
          level: 'info',
          extra:{ data },
        });
      });

      newHls.on(Hls.Events.ERROR, function (event, data) {
        
        Sentry.captureException(new Error(`HLS.js Error: ${data.type}`), {
          extra: {
            errorType: data.type,
            errorDetails: data.details,
            event,
            hlsErrorData: data,
          },
        });

        if (data.fatal) {
          switch (data.type) {
            case Hls.ErrorTypes.NETWORK_ERROR:
              newHls.startLoad();
              break;
            case Hls.ErrorTypes.MEDIA_ERROR:
              newHls.recoverMediaError();
              break;
            default:
              _initPlayer();
              break;
          }
        }
      });

      hls = newHls;
      return hls;
    }


    // Check for Media Source support

    if (Hls.isSupported()) {
      // HLS(_initPlayer());
      _initPlayer();
    } else if (video?.canPlayType('application/vnd.apple.mpegurl')) {
      video.src = src;
    }

    return () => {
      if (hls != null) {
        hls.destroy();
      }
    };
  }, [autoPlay, hlsConfig, playerRef, src, gumletLoaded]);

  useCheckMemoizedObjectIsPassed(hlsConfig);

  // If Media Source is supported, use HLS.js to play video
  if (Hls.isSupported()) return <video ref={playerRef} {...props} />;

  // Fallback to using a regular video player if HLS is not supported by default in the user's browser
  return <video ref={playerRef} src={src} autoPlay={autoPlay} {...props} />;
};

export default ReactHlsPlayer;
`

`  const memoizedHlsConfig = useMemo(() => {
    const hlsConfig: Partial<HlsConfig> = {
      enableWorker: true,
      startLevel: -1,
      maxBufferLength: 45,
      backBufferLength: 15,
      maxMaxBufferLength: 90,
      maxBufferSize: 35 * 1024 * 1024,
      abrEwmaFastLive: 5.0, 
      abrEwmaSlowLive: 10.0, 
      abrBandWidthFactor: 0.95, 
      abrBandWidthUpFactor: 0.85,
      debug: true,
      fragLoadingRetryDelay: 3000,
      fragLoadingTimeOut: 8000,
    };
    return hlsConfig;
  }, []);
`

Can you folks help me debug it, if there is some issue in my implementation?

On sentry I am getting this errors
`
buffer: 93.03000100000008,
details: bufferStalledError,
fatal: false,
type: mediaError

details: fragLoadError,
fatal: false,

[robwalch]

Please fill out the Bug Report Template as part of your issue, making sure to include:

• Test stream/page (if possible)
• Steps to reproduce
• Expected behavior
• Actual behavior

If the issue is related to your stream, and you cannot share the stream, please include all the information we would need to reproduce the issue. This includes how to generate a stream that reproduces the issue.

As far as your implementation goes it's mostly fine. Use default config options and do not call play until the buffer is provisioned to avoid stalling on start.

What you describe is more likely related to the content. We need a bug report with sample content that consistently reproduces the issue to troubleshoot further.