chore: there should be less latency now!

apps/web/src/components/app/StreamPlayer/StreamPlayer.tsx

@@ -10,15 +10,15 @@ import {
   MediaSeekForwardButton,
   MediaMuteButton,
   MediaVolumeRange,
-  MediaFullscreenButton
+  MediaFullscreenButton,
 } from 'media-chrome/react';
-import HlsVideo from 'hls-video-element/react'
+import HlsVideo from 'hls-video-element/react';
 
 export default function StreamPlayer() {
   const { username } = useParams();
 
   return (
-    <MediaController className='w-full aspect-video'>
+    <MediaController className="w-full aspect-video">
       <HlsVideo
         src={`/api/rtmp/hls/${username}.m3u8`}
         slot="media"
@@ -26,31 +26,35 @@ export default function StreamPlayer() {
         autoplay
         config={{
           lowLatencyMode: true,
-          liveSyncDurationCount: 2,
-          liveMaxLatencyDurationCount: 4,
+          liveSyncDurationCount: 1,
+          liveMaxLatencyDurationCount: 2,
           liveDurationInfinity: true,
           enableWorker: true,
-          backBufferLength: 2,
-          startLevel: 0,
-          maxBufferLength: 4,
-          maxMaxBufferLength: 8,
+          backBufferLength: 1,
+          startLevel: -1,
+          maxBufferLength: 2,
+          maxMaxBufferLength: 4,
           startFragPrefetch: true,
           testBandwidth: false,
-          progressive: true,
-          maxBufferSize: 30 * 1000 * 1000,
-          maxBufferHole: 0.3,
-          highBufferWatchdogPeriod: 1,
-          nudgeOffset: 0.05,
-          nudgeMaxRetry: 2,
-          manifestLoadingTimeOut: 5000,
-          manifestLoadingMaxRetry: 2,
-          levelLoadingTimeOut: 5000,
-          fragLoadingTimeOut: 10000,
+          progressive: false,
+          maxBufferSize: 10 * 1000 * 1000,
+          maxBufferHole: 0.1,
+          highBufferWatchdogPeriod: 0.5,
+          nudgeOffset: 0.01,
+          nudgeMaxRetry: 3,
+          manifestLoadingTimeOut: 3000,
+          manifestLoadingMaxRetry: 3,
+          levelLoadingTimeOut: 3000,
+          fragLoadingTimeOut: 5000,
           debug: process.env.NODE_ENV === 'development',
+          liveSyncDuration: 1,
+          liveMaxLatencyDuration: 3,
+          maxLiveSyncPlaybackRate: 1.5,
+          liveBackBufferLength: 0,
         }}
       />
       <MediaLoadingIndicator slot="centered-chrome" noAutohide />
-      <MediaControlBar className='w-full px-2'>
+      <MediaControlBar className="w-full px-2">
         <div className="flex items-center gap-2">
           <MediaPlayButton />
           <MediaMuteButton />

dev/nginx.conf

@@ -28,8 +28,8 @@ rtmp {
       hls on;
       hls_type live;
       hls_path /dev/shm/hls;
-      hls_fragment 2s;
-      hls_playlist_length 20s;
+      hls_fragment 1s;
+      hls_playlist_length 3s;
       hls_cleanup on;
 
       hls_fragment_naming timestamp;