无法通过AngularJS显示实时摄像机RTSP流

问题描述 投票:0回答:1

我正在使用angularjs开发Web应用程序,我需要添加一个显示实时RTSP流的窗口。我可以使用JSMpeg js库来完成此操作。在服务器端,我找到了这个nodejs示例

Stream = require('node-rtsp-stream')
stream = new Stream({
   name: 'name',
   streamUrl: 'rtsp_url',
   wsPort: 8081,
   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:

<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>

此HTML5页面工作正常,并且在我的网页中获得了实时流式传输。之后,我尝试使此HTML代码适应angularJS:我将canvas标记添加到了相应的html文件中:

<canvas id="canvas"  width="502" height="237" style="display: block; width: 40%;"></canvas>

然后我按如下方式尝试使用控制器:

var streamingcanvas = document.getElementById("canvas");
let player = new JSMpeg.Player('ws://localhost:8081', {
    canvas: streamingcanvas, autoplay: true, audio: false, loop: true
})

我得到的结果是,网页中没有流媒体,控制台中也没有错误。

我的代码中缺少什么?

node.js angularjs rtsp live-streaming jsmpeg
1个回答
0
投票

我有同样的问题。有解决方案吗?

© www.soinside.com 2019 - 2024. All rights reserved.