无法使用 Angular 显示实时摄像机 RTSP 流

Question

I'm developing a web application with angular, I need to add a window that shows a live RTSP streaming.我正在使用 angular 开发 web 应用程序，我需要添加一个显示实时 RTSP 流的 window。 After searching I found that can be done with JSMpeg js library.经过搜索，我发现可以使用 JSMpeg js 库来完成。 In the server side I found this nodejs example在服务器端，我找到了这个 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
  }
})

in the web side I tried as a first step a simple HTML5 example:在 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>

This HTML5 page works fine and I got in my web page a live streaming.这个 HTML5 页面工作正常，我在我的 web 页面上进行了直播。 After that I tried to adapt this HTML code to angular, I installed as first JSMpeg with npm:之后，我尝试将此 HTML 代码改编为 angular，我安装为第一个 JSMpeg 和 npm：

npm install jsmpeg-player --save

I added the canvas tag to the corresponding html file:我将 canvas 标签添加到相应的 html 文件中：

<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:然后我尝试将 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
      })
}

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.我得到的结果是添加了 canvas 标签，但在我的 web 页面中没有流式传输，控制台中没有脚本错误。 I checked the traffic in the browser:我检查了浏览器中的流量：

and seems that the nodejs server receives the websocket request as described in his traces:并且似乎 nodejs 服务器收到了 websocket 请求，如他的跟踪中所述：

but as I said no streaming in my page:但正如我所说，我的页面中没有流式传输：

My question is: what's missing in my ts code?我的问题是：我的 ts 代码中缺少什么？ what should I fix?我应该解决什么问题？

Answer 1

Change in ngOnInit this.streamingcanvas by this.streamingcanvas.nativeElement it should be like this 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
  }) 
}

无法使用 Angular 显示实时摄像机 RTSP 流

问题描述

1 个解决方案

解决方案1
2 已采纳 2019-11-21 10:51:14

无法使用 Angular 显示实时摄像机 RTSP 流

问题描述

1 个解决方案

解决方案1 2 已采纳 2019-11-21 10:51:14

解决方案1
2 已采纳 2019-11-21 10:51:14