无法使用Angular显示实时摄像机RTSP流 [英] Not able to Show live camera RTSP streaming with Angular
问题描述
我正在使用angular开发一个Web应用程序，我需要添加一个显示实时RTSP流的窗口.搜索后，我发现可以用JSMpeg js库完成. 在服务器端，我找到了这个nodejs示例
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
}
})
在网络方面，我首先尝试了一个简单的HTML5示例:
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>
此HTML5页面工作正常，并且我在自己的网页中获得了实时流式传输.之后，我尝试使此HTML代码适应角度，我首先使用npm安装了JSMpeg:
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
我将canvas标签添加到了相应的html文件中:
I added the canvas tag to the corresponding html file:
<canvas #streaming id="canvas" width="1920" height="1080" style="display: block; width: 40%;"></canvas>
然后我尝试将js脚本改编成相应组件中的ts脚本，如下所示:
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
})
}
我得到的结果是添加了canvas标记，但网页中没有流媒体，控制台中没有脚本错误.我在浏览器中检查了流量:
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:
似乎nodejs服务器收到了其跟踪中所述的websocket请求:
and seems that the nodejs server receives the websocket request as described in his traces:
但是正如我所说的，我的页面中没有流媒体
but as I said no streaming in my page:
我的问题是:我的ts代码中缺少什么?我该怎么解决?
My question is: what's missing in my ts code? what should I fix?
推荐答案
通过"this.streamingcanvas.nativeElement"对ngOnInit"this.streamingcanvas"进行更改 应该是这样的
change in ngOnInit "this.streamingcanvas" by "this.streamingcanvas.nativeElement" it should be like this
ngOnInit(){
...
让玩家=新 JSMpeg.Player('ws://localhost:9999'，{ canvas:this.streamingcanvas.nativeElement，自动播放:true，音频:false，> loop:true })}
ngOnInit() {
...
let player = new JSMpeg.Player('ws://localhost:9999', { canvas: this.streamingcanvas.nativeElement, autoplay: true, audio: false, >loop: true }) }
这篇关于无法使用Angular显示实时摄像机RTSP流的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
