fix: production latency (hopefully)

apps/web/package.json

@@ -49,6 +49,7 @@
     "cmdk": "1.0.0",
     "date-fns": "^4.1.0",
     "hls-video-element": "^1.5.0",
+    "hls.js": "^1.6.15",
     "lucia": "^3.2.2",
     "lucide-react": "^0.473.0",
     "media-chrome": "^4.8.0",

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

@@ -35,6 +35,11 @@ export default function StreamPlayer() {
         },
         lowLatencyMode: true,
         debug: process.env.NODE_ENV === 'development',
+        backBufferLength: 90,
+        enableWorker: true,
+        maxLiveSyncPlaybackRate: 1.5,
+        liveSyncDurationCount: 2,
+        liveMaxLatencyDurationCount: 4,
       };
 
       // @ts-ignore

dev/docker-compose.yml

@@ -17,9 +17,10 @@ services:
       - 6379:6379
   mediamtx:
     image: bluenviron/mediamtx:latest
-    ports:
-      - 8890:8890/udp
-      - 8891:8888
-      - 9997:9997
+    network_mode: "host"
+    # ports:
+    #   - 8890:8890/udp
+    #   - 8891:8888
+    #   - 9997:9997
     volumes:
       - ./mediamtx.yml:/mediamtx.yml

dev/mediamtx.yml

@@ -5,9 +5,15 @@ paths:
 srt: yes
 srtAddress: :8890
 
+# HLS Configuration - Low Latency HLS (LL-HLS)
 hls: yes
+hlsAddress: :8891
+hlsSegmentCount: 7
+hlsSegmentDuration: 500ms
+hlsPartDuration: 200ms
+hlsMuxerCloseAfter: 5s
 
 authMethod: http
-authHTTPAddress: http://192.168.1.47:3000/api/mediamtx/publish
+authHTTPAddress: http://localhost:3000/api/mediamtx/publish
 
-api: yes
+api: yes

pnpm-lock.yaml

@@ -177,6 +177,9 @@ importers:
       hls-video-element:
         specifier: ^1.5.0
         version: 1.5.10
+      hls.js:
+        specifier: ^1.6.15
+        version: 1.6.15
       lucia:
         specifier: ^3.2.2
         version: 3.2.2