无法使用 Angular 显示 RTSP 流答案

【问题标题】：Not able to show RTSP stream with Angular无法使用 Angular 显示 RTSP 流
【发布时间】：2020-02-05 09:46:16
【问题描述】：

我正在开发一个有角度的 Web 应用程序，我需要在我的窗口中显示一个 rtsp 流。我正在使用与此主题相关的 JSMpeg 播放器：Not able to Show live camera RTSP streaming with Angular。

对于我的 websocket，我使用了 node 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
      })
}

结果在我的窗口中：

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

感谢您的帮助

编辑：我的第一个 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/

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

【问题讨论】：

标签： angular websocket ffmpeg jsmpeg

【解决方案1】：

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

试试 ws://localhost:8082/supersecret

【讨论】：