实时摄像机RTSP流"/>
无法通过AngularJS显示实时摄像机RTSP流
我正在使用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
})
我得到的结果是，网页中没有流媒体，控制台中也没有错误。
我的代码中缺少什么？
回答如下：我有同样的问题。有解决方案吗？
更多推荐
无法通过AngularJS显示实时摄像机RTSP流
发布评论