Run docker container with FFMPEG rstp stream on websockets

I have create a node js application that uses ffmpeg with spawn node library.

Here's the backend sample:

const startStreamWs = (cameraId, rtsp_url) => {
console.log(`Starting stream for camera: ${cameraId}`);

const ffmpeg = spawn("ffmpeg", [
"-rtsp_transport", "tcp", // Use TCP for reliable streaming
"-i", rtsp_url,
"-analyzeduration", "5000000", // Increase analyzeduration
"-probesize", "5000000", // Increase probesize
"-fflags", "nobuffer", // Reduce buffering
"-flags", "low_delay", // Low latency
"-strict", "experimental",
"-max_delay", "200000", // Reduce max delay for faster response
"-bufsize", "2M", // Buffer size for smoother streaming
"-f", "mpegts", // MPEG-TS container for streaming
"-codec:v", "mpeg1video", // MPEG-1 video codec
"-s", "1280x720", // Video resolution
"-r", "25", // Frame rate (25 fps)
"-b:v", "1500k", // Bitrate for video
"-maxrate", "2000k", // Maximum bitrate
"-bufsize", "2M", // Buffer size (needed with maxrate)
"-bf", "0", // Disable B-frames for lower latency
"-an", // Disable audio
"-"
]);


ffmpeg.stdout.on("data", (data) => {
if (cameraStreams[cameraId]) {
console.log(`Data sent for camera ${cameraId}`);
// Broadcast stream data to all connected clients
for (const client of cameraStreams[cameraId].clients) {
if (client.readyState === ws.OPEN) {
client.send(data);
}
}
}
});

ffmpeg.stderr.on("data", (data) => {
console.error(`FFmpeg stderr (Camera ${cameraId}): ${data.toString()}`);
logErrorToFile(data);
});

ffmpeg.on("close", (code) => {
console.log(`FFmpeg process exited for Camera ${cameraId} with code ${code}`);
if (cameraStreams[cameraId]) {
// Close all remaining clients
for (const client of cameraStreams[cameraId].clients) {
client.close();
}
delete cameraStreams[cameraId];
}
});

return ffmpeg;
};


Front End Sample my angular component

import { Component, OnDestroy, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';

declare var JSMpeg: any; // Declare JSMpeg from the global script

@Component({
selector: 'app-video-player',
templateUrl: './video-player.component.html',
styleUrls: ['./video-player.component.css'],
standalone: false
})
export class VideoPlayerComponent implements OnInit, OnDestroy {
stepSize: number = 0.1;
private player: any;
cameraId: string | null = null;
ws: WebSocket | null = null;
wsUrl: string | null = null;

constructor(private route: ActivatedRoute) {
this.cameraId = this.route.snapshot.paramMap.get('id');
this.wsUrl = `ws://localhost:8085?cameraId=${this.cameraId}`;
this.ws = new WebSocket(this.wsUrl);
}

async ngOnInit(): Promise<void> {
const canvas = document.getElementById('videoCanvas') as HTMLCanvasElement;
this.player = new JSMpeg.Player(this.wsUrl, { canvas: canvas });
}

async ngOnDestroy(): Promise<void> {
this.ws?.close(1000, "Exiting");
}

getStepSize(): number {
return this.stepSize;
}
}




On localhost is fine, once i containerize, it's not. I can serve the website but not the stream. I have the same version FFMPEG 7.1 and the codec is available. Although I run localhost macosx and unbutu on docker.

Continue reading...