时间戳

首页 > 解决方案 > 无法使用 Angular 显示 RTSP 流

angular - 无法使用 Angular 显示 RTSP 流

问题描述

我正在开发一个有角度的网络应用程序，我需要在我的窗口中显示一个 rtsp 流。我正在使用与此主题相关的 JSMpeg 播放器：无法使用 Angular 显示实时摄像机 RTSP 流。

对于我的 websocket，我使用了节点 websocket 库，并在我的 cmd 中像这样运行它：node websocket-relay.js supersecret 8081 8082

它检测我在其上建立的每个连接。

然后对于转换部分，我使用了 FFMPEG，我将 h264 格式转换为 mpegts（mpegvideo1 给了我一个错误）我像这样运行它：

ffmpeg -i "rtsp://myurl/media.smp" -vcodec h264 -f mpegts -max_muxing_queue_size 9999 -b 800k -r 30 http://localhost:8081/supersecret/640/480/

对于角度部分，我有这个：

@ViewChild('streaming', {static: true}) streamingcanvas: ElementRef; 

constructor( ... ) { }

ngOnInit() {
    ....
    let player = new JSMpeg.Player('ws://localhost:8081/supersecret', {
        canvas: this.streamingcanvas, autoplay: true, audio: false, loop: true
      })
}

结果在我的窗口中： 即使 websocket 检测到连接，我的画布上也没有任何反应

我错过了什么让它工作并获得真正的视频流？

感谢帮助

编辑：我的第一个 ffmpeg 命令是错误的，只发送了音频，现在我得到了这个：

ffmpeg -i "rtsp://myurl/media.smp" -vcodec h264 -f mpegts -codec:v mpeg1video -s 640x360 -b: 700k -r 25 -bf 0 -codec:a mp2 -ar 44100 -ac 1 -b:a 64k -max_muxing_queue_size 9999 http://localhost:8081/supersecret/640/360/

它仍然不起作用，但画布不再是黑色了

标签： angularwebsocketffmpegjsmpeg

解决方案

Usage:
node websocket-relay.js <secret> [<stream-port> <websocket-port>]

试试 ws://localhost:8082/supersecret

推荐阅读