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 ponent 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?
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 ponent 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?
Share Improve this question asked Nov 17, 2019 at 10:18 Kallel OmarKallel Omar 1,2183 gold badges18 silver badges52 bronze badges 5- What happens when you set static to true in your viewChild? – MikeOne Commented Nov 17, 2019 at 12:16
- @MikeOne: Thank you for your ment, but that doesn't change anything – Kallel Omar Commented Nov 17, 2019 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 Commented Feb 4, 2020 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 Commented Feb 4, 2020 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 Commented Feb 5, 2020 at 7:56
1 Answer
Reset to default 2Change 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
})
}