3

I'm developing an angular web app with camera live streaming page. Streaming is displayed in a canvas tag using JSMPEG lib through an rtsp proxy.

My application is similar to what I described in this question: Not able to Show live camera RTSP streaming with Angular

Typescript code responsible of the screaming is done with JSMPEG that starts websocket request:

new JSMpeg.Player('ws://my_ip:9999', {
    canvas: this.streamingcanvas.nativeElement, autoplay: true, audio: false, loop: true
      })

I executed my app using this command:

ng serve --host 0.0.0.0 --disable-host-check --proxy-config proxy.config.json

My application and live streaming works fine.

Now I want to execute my app over https. So I generated with openssl the certificate then I executed my app using following command:

ng serve --host 0.0.0.0 --disable-host-check --proxy-config proxy.config.json --ssl true --ssl-cert /home/ubuntu/ssl/angular-selfsigned.crt --ssl-key /home/ubuntu/ssl/angular-selfsigned.key

The result is I can access to my web pages using https successfully, but live streaming doesn't work.

I checked firefox console, I found the following error:

enter image description here

Note: the grey area is my_ip address

and I checked network tab, I can't find any request to streaming proxy ws://my_ip:9999

what's the main cause of this issue? How I can fix it?

Kallel Omar
  • 1,208
  • 2
  • 17
  • 51

2 Answers2

0

try with "wss://my_ip:9999" instead of "ws://my_ip:9999"

Mohamed Kallel
  • 152
  • 3
0

Recent browser versions require SSL.

You need to configure a SSL certificate on server and use WSS instead of WS.

TopReseller
  • 623
  • 4
  • 6