【发布时间】：2020-03-12 22:21:14
【问题描述】：
我正在开发一个带有 Angular 的 Web 应用程序，我需要添加一个显示实时 RTSP 流的窗口。经过搜索，我发现可以使用 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
}
})
在网页端，我首先尝试了一个简单的 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 页面运行良好，我在我的网页中获得了实时流媒体。之后我尝试将此 HTML 代码调整为 Angular，我使用 npm 作为第一个 JSMpeg 安装：
npm install jsmpeg-player --save
我在对应的html文件中添加了canvas标签：
<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
})
}
我得到的结果是添加了画布标签，但我的网页中没有流式传输，控制台中没有脚本错误。我在浏览器中查看了流量：
并且似乎 nodejs 服务器收到了他的跟踪中描述的 websocket 请求：
但正如我所说，我的页面中没有流式传输：
我的问题是：我的 ts 代码中缺少什么？我应该解决什么问题？
【问题讨论】：
-
在 viewChild 中将 static 设置为 true 会发生什么？
-
@MikeOne：感谢您的评论，但这不会改变任何事情
-
@KallelOmar 我正在开发一个类似的应用程序，我对您如何将 js 脚本调整为 angular 非常感兴趣
-
@Q.Rey 几乎一样。唯一的区别是 JSMPEG.Player 中的 js canvas 属性是通过 document.getElementById 获得的，但在 typescript canvas 中的值是通过 ViewChild 获得的
-
问题是我没有出错，我在 localhost:8081 上打开了我的 websocket，使用 ffmpeg 将 .mov 格式转换为 mjpeg-ts（因为 mjpeg1video 格式给了我错误），我只有画布内的黑色方块。我认为是格式错误
标签： javascript angular typescript live-streaming