Not able to show RTSP stream with Angular

Question

i'm working on a web application with angular where i need to show an rtsp stream inside my window. I'm using JSMpeg player related to this topic : Not able to Show live camera RTSP streaming with Angular.

For my websocket i used the node websocket library and i runned it like this in my cmd : node websocket-relay.js supersecret 8081 8082

It detect each connection i make on it.

Then for the conversion part i used FFMPEG where I convert a h264 format to mpegts (mpegvideo1 gave me an error) I run it like this :

ffmpeg -i "rtsp://myurl/media.smp" -vcodec h264 -f mpegts -max_muxing_queue_size 9999 -b 800k -r 30 http://localhost:8081/supersecret/640/480/

For the angular part I have this :

@ViewChild('streaming', {static: true}) streamingcanvas: ElementRef; 

constructor( ... ) { }

ngOnInit() {
    ....
    let player = new JSMpeg.Player('ws://localhost:8081/supersecret', {
        canvas: this.streamingcanvas, autoplay: true, audio: false, loop: true
      })
}

Result in my window :

What did i missed to make it works and get a real video stream?

Thanks for help

EDIT : My first ffmpeg command was wrong, only the audio was sent, now i got this :

ffmpeg -i "rtsp://myurl/media.smp" -vcodec h264 -f mpegts -codec:v mpeg1video -s 640x360 -b: 700k -r 25 -bf 0 -codec:a mp2 -ar 44100 -ac 1 -b:a 64k -max_muxing_queue_size 9999 http://localhost:8081/supersecret/640/360/

It still doesnt work but the canvas is not black anymore

Answer 1

Usage:
node websocket-relay.js <secret> [<stream-port> <websocket-port>]

Try ws://localhost:8082/supersecret