![](/img/trans.png)
[英]Is it possible to streaming RTSP (live) videos from camera in an electron app?
[英]Not able to Show live camera RTSP streaming with Angular
我正在使用 angular 开发 web 应用程序,我需要添加一个显示实时 RTSP 流的 window。 经过搜索,我发现可以使用 JSMpeg js 库来完成。 在服务器端,我找到了这个 nodejs 示例
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
}
})
在 web 方面,我首先尝试了一个简单的 HTML5 示例:
<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 页面工作正常,我在我的 web 页面上进行了直播。 之后,我尝试将此 HTML 代码改编为 angular,我安装为第一个 JSMpeg 和 npm:
npm install jsmpeg-player --save
我将 canvas 标签添加到相应的 html 文件中:
<canvas #streaming id="canvas" width="1920" height="1080" style="display: block; width: 40%;"></canvas>
然后我尝试将 js 脚本改编为相应组件中的 ts 脚本,如下所示:
@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 标签,但在我的 web 页面中没有流式传输,控制台中没有脚本错误。 我检查了浏览器中的流量:
并且似乎 nodejs 服务器收到了 websocket 请求,如他的跟踪中所述:
但正如我所说,我的页面中没有流式传输:
我的问题是:我的 ts 代码中缺少什么? 我应该解决什么问题?
ngOnInit this.streamingcanvas
由this.streamingcanvas.nativeElement
它应该是这样的
ngOnInit() {
\\ ...
let player = new
JSMpeg.Player('ws://localhost:9999', {
canvas: this.streamingcanvas.nativeElement,
autoplay: true,
audio: false,
loop: true
})
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.