fix: naming of playlist according to channelId

backend/services/ChannelService.js

@@ -30,7 +30,7 @@ class ChannelService {
 
         if (this.currentChannel !== nextChannel) {
             if(nextChannel.restream) {
-                streamController.start(nextChannel.url);
+                streamController.start(nextChannel.url, nextChannel.id);
             } else {
                 streamController.stop();
             }

backend/services/streaming/FFmpegService.js

@@ -4,7 +4,7 @@ require('dotenv').config();
 let currentFFmpegProcess = null;
 const STORAGE_PATH = process.env.STORAGE_PATH;
 
-function startFFmpeg(channelUrl) {
+function startFFmpeg(channelUrl, channelId) {
     if (currentFFmpegProcess) {
         console.log('Terminate previous ffmpeg-Prozess...');
         currentFFmpegProcess.kill('SIGTERM');
@@ -12,6 +12,9 @@ function startFFmpeg(channelUrl) {
 
 
     currentFFmpegProcess = spawn('ffmpeg', [
+        '-headers', 'Origin: https://cookiewebplay.xyz',
+        '-user_agent', 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36',
+        '-referer', 'https://cookiewebplay.xyz/',
         '-i', channelUrl,
         '-c', 'copy',
         '-f', 'hls',
@@ -19,7 +22,7 @@ function startFFmpeg(channelUrl) {
         '-hls_list_size', '5',
         '-hls_flags', 'delete_segments+program_date_time',
         '-start_number', Math.floor(Date.now() / 1000),
-        `${STORAGE_PATH}/playlist.m3u8`
+        `${STORAGE_PATH}/${channelId}.m3u8`
     ]);
 
     currentFFmpegProcess.stdout.on('data', (data) => {

backend/services/streaming/StreamController.js

@@ -1,10 +1,10 @@
 const ffmpegService = require('./FFmpegService');
 const storageService = require('./StorageService');
 
-function start(channelUrl) {
+function start(channelUrl, channelId) {
     stop();
     if (!ffmpegService.isFFmpegRunning()) {
-        ffmpegService.startFFmpeg(channelUrl);
+        ffmpegService.startFFmpeg(channelUrl, channelId);
     }
 }
 

docker-compose.yml

@@ -7,8 +7,11 @@ services:
       args:
         # Set this to the server ip/domain, if your backend is deployed on a different server
         #VITE_BACKEND_URL: http://123.123.123.123:5000
-        VITE_BACKEND_STREAMS_PATH: /streams/playlist.m3u8
+        VITE_BACKEND_STREAMS_PATH: /streams/
         VITE_STREAM_DELAY: 18
+        VITE_SYNCHRONIZATION_TOLERANCE: 0.8
+        VITE_SYNCHRONIZATION_MAX_DEVIATION: 4
+
     networks:
       - app-network
 

frontend/Dockerfile

@@ -6,6 +6,8 @@ WORKDIR /app
 ARG VITE_BACKEND_URL
 ARG VITE_BACKEND_STREAMS_PATH
 ARG VITE_STREAM_DELAY
+ARG VITE_SYNCHRONIZATION_TOLERANCE
+ARG VITE_SYNCHRONIZATION_MAX_DEVIATION
 
 # Install dependencies
 COPY package.json package-lock.json ./
@@ -17,6 +19,8 @@ COPY . .
 ENV VITE_BACKEND_URL=$VITE_BACKEND_URL
 ENV VITE_BACKEND_STREAMS_PATH=$VITE_BACKEND_STREAMS_PATH
 ENV VITE_STREAM_DELAY=$VITE_STREAM_DELAY
+ENV VITE_SYNCHRONIZATION_TOLERANCE=$VITE_SYNCHRONIZATION_TOLERANCE
+ENV VITE_SYNCHRONIZATION_MAX_DEVIATION=$VITE_SYNCHRONIZATION_MAX_DEVIATION
 
 RUN npm run build
 

frontend/README.md

@@ -5,7 +5,7 @@ Setup a `.env` file or
 equivalent environment variables:
 ```env
 #VITE_BACKEND_URL: http://123.123.123.123:5000
-VITE_BACKEND_STREAMS_PATH: /streams/playlist.m3u8
+VITE_BACKEND_STREAMS_PATH: /streams/
 VITE_STREAM_DELAY: 18
 ```
 

frontend/src/components/VideoPlayer.tsx

@@ -33,7 +33,7 @@ function VideoPlayer({ channel }: VideoPlayerProps) {
             },
             errorRetry: {
               maxNumRetry: 20,
-              retryDelayMs: 1500,
+              retryDelayMs: 1000,
               maxRetryDelayMs: 8000,
               backoff: 'linear',
               shouldRetry: (
@@ -49,13 +49,15 @@ function VideoPlayer({ channel }: VideoPlayerProps) {
       
 
       hlsRef.current = hls;
-      hls.loadSource(channel.restream ? import.meta.env.VITE_BACKEND_URL + import.meta.env.VITE_BACKEND_STREAMS_PATH : channel.url);
+      hls.loadSource(
+        channel.restream ? 
+          import.meta.env.VITE_BACKEND_URL + import.meta.env.VITE_BACKEND_STREAMS_PATH + channel.id + ".m3u8" 
+          : channel.url
+      );
       hls.attachMedia(video);
 
-      // Synchronization settings
-      //TODO: extract to config
-      const tolerance = 0.8;
-      const maxDeviation = 4;
+      const tolerance = import.meta.env.VITE_SYNCHRONIZATION_TOLERANCE ?? 0.8;
+      const maxDeviation = import.meta.env.VITE_SYNCHRONIZATION_MAX_DEVIATION ?? 4;
 
   
       hls.on(Hls.Events.MANIFEST_PARSED, (_event, _data) => {
@@ -67,7 +69,10 @@ function VideoPlayer({ channel }: VideoPlayerProps) {
   
             const fragments = hls.levels[0]?.details?.fragments;
             const lastFragment = fragments?.[fragments.length - 1];
-            if (!lastFragment || !lastFragment.programDateTime) return;
+            if (!lastFragment || !lastFragment.programDateTime) {
+              console.warn("No program date time found in fragment. Cannot synchronize.");
+              return;
+            }
       
             const timeDiff = (now - lastFragment.programDateTime) / 1000;
             const videoLength = fragments.reduce((acc, fragment) => {
@@ -77,11 +82,14 @@ function VideoPlayer({ channel }: VideoPlayerProps) {
   
             // It takes some time for the stream to load and play. Estimated here: 1s
             const timeTolerance = tolerance + 1; 
-  
+            
             if (videoLength + timeDiff + timeTolerance >= targetDelay) {
               hls.startLoad();
               video.play();
               clearInterval(interval);
+              console.log("Starting stream");
+            } else {
+              console.log("Waiting for stream to load: ", videoLength + timeDiff + timeTolerance, " < ", targetDelay);
             }
           }, 1000);
         } else {