VUE3 播放RTSP及时、回放(NVR录像机)视频流（利用WebRTC） ...

1、下载webrtc-streamer，下载的最新window版本

Releases · mpromonet/webrtc-streamer · GitHub

2、解压下载包

3、webrtc-streamer.exe启动服务

（注意：这里可以通过当前文件夹下用cmd命令webrtc-streamer.exe -o这样占用cpu会很少，直接双击exe文件会占用cpu）

cmd webrtc-streamer.exe -o 启动如下图所示，此时在浏览器访问127.0.0.1:8000可以看到本机监控画面

自定义端口启动 通过CMD打开，输入webrtc-streamer.exe -o -H 0.0.0.0:9001启动服务

4、将下载包html文件夹下webrtcstreamer.js文件和html/libs文件夹下adapter.min.js文件复制到vue项目public目次下。在index.html文件里引入这两个js文件

5、修改视频编码：(H.264)

6、编写及时播放测试页面

   
  7、录像机NVR回放视频流地址编写

rtsp://用户名:暗码@IP:554/Streaming/tracks/通道及码流starttime=年月日t时分秒z&endtime=年月日t时分秒z
例如 回放开始时间为2024-03-12 10:30:00结束时间为2024-03-12 11:40:30且通道号为1的主码流视频
   // 其它步调同上
  const url=“rtsp://admin:123456@192.168.1.65:554/Streaming/tracks/101starttime=20240312t103000z&endtime=20240312t114030z”
  webRtcServer.value.connect(url);
  注意：可以没有结束时间，假如没有去掉 “ &endtime=20240311t174030z ”这一块；
注意：视频编码格式必须是H264的

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。