Fatal编程技术网
  • javascript/
  • Javascript 无法显示带角度的实时摄像机RTSP流

Javascript 无法显示带角度的实时摄像机RTSP流

javascript angular typescript

Javascript 无法显示带角度的实时摄像机RTSP流,javascript,angular,typescript,live-streaming,Javascript,Angular,Typescript,Live Streaming,我正在用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

我正在用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
  }
})
在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>
我将canvas标记添加到相应的html文件中：

<canvas #streaming id="canvas"  width="1920" height="1080" style="display: block; width: 40%;"></canvas>
我得到的结果是添加了canvas标记，但我的网页中没有流，控制台中没有脚本错误。我在浏览器中检查了流量：

nodejs服务器似乎收到了websocket请求，如其跟踪中所述：

但正如我在我的页面中所说的，没有流媒体：

我的问题是：我的ts代码缺少什么？我该修什么

将ngonit中的“this.streamingcanvas”更改为“this.streamingcanvas.nativeElement” 应该是这样的

ngOnInit（）{
…
让玩家=新的 Player（'ws://localhost:9999'{ 画布：this.streamingcanvas.nativeElement，自动播放：true，音频：false，>循环：true })}

当您在viewChild中将static设置为true时会发生什么情况？@MikeOne:谢谢您的评论，但这不会改变anything@KallelOmar我正在开发一个类似的应用程序，我对您如何将js脚本改编为angular@Q.Rey几乎一样。唯一的区别是，JSMPEG.Player中的js canvas属性是通过document.getElementById获得的，但在typescript中，canvas值是通过ViewChild获得的gootten。问题是，我没有得到任何错误，我在localhost:8081上打开了我的websocket，使用ffmpeg将.mov格式转换为mjpeg ts（因为mjpeg1video格式给了我错误），我的画布里只有一个黑色的正方形。我认为这是一个格式错误非常感谢你的帮助，它解决了issue@KallelOmar当我尝试上述解决方案时，请在画布内画一个黑色正方形，如果可能的话，请您提供您的工作解决方案。@srinivasaraoramisetty在我的帖子问题中也是如此，只需将this.streamingcanvas替换为this.streamingcanvas。nativeElement@KallelOmar我添加了与您所说的相同的。streamingcanvas.nativeElement和@ViewChild（'streaming'，{static:false}）streamingcanvas:ElementRef；->{static:false}更改为{static:true}因为元素正在ngOnInit（）内部调用，请您在我缺少的地方帮助我。 
<canvas #streaming id="canvas"  width="1920" height="1080" style="display: block; width: 40%;"></canvas>

@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
      })
}