Not able to Show live camera RTSP streaming with Angular

Question

I'm developing a web application with angular, I need to add a window that shows a live RTSP streaming. After searching I found that can be done with JSMpeg js library. In the server side I found this nodejs example

Stream = require('node-rtsp-stream')
stream = new Stream({
  name: 'name',
  streamUrl: 'rtsp_url',
  wsPort: 9999,
  ffmpegOptions: { // options ffmpeg flags
    '-stats': '', // an option with no neccessary value uses a blank string
    '-r': 30 // options with required values specify the value after the key
  }
})

in the web side I tried as a first step a simple HTML5 example:

<html>
<body>
<div>
    <canvas id="canvas"  width="1920" height="1080" style="display: block; width: 40%;"></canvas>
</div>
</body>

<script type="text/javascript" src="jsmpeg.min.js"></script>
<script type="text/javascript">
    //var ws = new WebSocket('ws://localhost:9999');
    player = new JSMpeg.Player('ws://localhost:9999', {
      canvas: document.getElementById('canvas'), autoplay: true, audio: false, loop: true
    })  
</script>
</html>

This HTML5 page works fine and I got in my web page a live streaming. After that I tried to adapt this HTML code to angular, I installed as first JSMpeg with npm:

npm install jsmpeg-player --save

I added the canvas tag to the corresponding html file:

<canvas #streaming id="canvas"  width="1920" height="1080" style="display: block; width: 40%;"></canvas>

Then I tried to adapt the js script to a ts script in the corresponding component like that:

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

constructor( ... ) { }

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

the result that I get is that the canvas tag is added but no streaming in my web page an no script errors in the console. I checked the traffic in the browser:

and seems that the nodejs server receives the websocket request as described in his traces:

but as I said no streaming in my page:

My question is: what's missing in my ts code? what should I fix?

@MikeOne: Thank you for your comment, but that doesn't change anything — Kallel Omar, Nov 17 '19 at 15:03
@KallelOmar I'm working on a similar application and i'm very interested on how you adapted the js script to angular — Q.Rey, Feb 04 '20 at 13:48
@Q.Rey Almost the same. The only difference is that with js canvas attribute in JSMPEG.Player is gotten with document.getElementById but in typescript canvas value is gootten with ViewChild — Kallel Omar, Feb 04 '20 at 16:30
The thing is that I got no error, i opened my websocket on localhost:8081, used ffmpeg to convert .mov format to mjpeg-ts (because mjpeg1video format gave me error), and i only have a black square inside the canvas . I think it's a format error — Q.Rey, Feb 05 '20 at 07:56

score 2 · Accepted Answer · edited May 19 '22 at 14:23

2

Change in ngOnInit this.streamingcanvas by this.streamingcanvas.nativeElement it should be like this

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

edited May 19 '22 at 14:23

Chris Stillwell

10,266
10
67
77

answered Nov 21 '19 at 10:51

Mohamed Kallel

152
3

Thank you very much for your help, it solves the issue – Kallel Omar Nov 21 '19 at 12:34
@KallelOmar when I tried above solution getting a black square inside the canvas, if possible can you please provide your working solution. – srinivasa rao ramisetty Jul 01 '20 at 19:39
@srinivasaraoramisetty it's the same in my post question, just replace this.streamingcanvas by this.streamingcanvas.nativeElement – Kallel Omar Jul 01 '20 at 20:52
1

@KallelOmar I added the same like u said this.streamingcanvas.nativeElement, and @ViewChild('streaming', {static: false}) streamingcanvas: ElementRef; -> {static:false} changed to {static:true} as the element is calling inside ngOnInit(), can you please help me on it where I am missing. – srinivasa rao ramisetty Jul 02 '20 at 11:10

Not able to Show live camera RTSP streaming with Angular

1 Answers1

Linked