無法使用 Angular 顯示實時攝像機 RTSP 流

Question

我正在使用 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 代碼中缺少什么？ 我應該解決什么問題？

Answer 1

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