VUE3 播放RTSP及时、回放(NVR录像机)视频流（利用WebRTC）
1、下载webrtc-streamer，下载的最新window版本Releases · mpromonet/webrtc-streamer · GitHub
https://i-blog.csdnimg.cn/blog_migrate/11a17afd77f2b14c137e18f876969c4f.png
2、解压下载包
https://i-blog.csdnimg.cn/blog_migrate/88eb8654ac87a3a89c9b4e4d14f4505c.png
3、webrtc-streamer.exe启动服务
（注意：这里可以通过当前文件夹下用cmd命令webrtc-streamer.exe -o这样占用cpu会很少，直接双击exe文件会占用cpu）
https://i-blog.csdnimg.cn/blog_migrate/53d95024c4eaf27e64e8ba3ec5435e2a.png
cmd webrtc-streamer.exe -o 启动如下图所示，此时在浏览器访问127.0.0.1:8000可以看到本机监控画面
https://i-blog.csdnimg.cn/blog_migrate/b881416b6a148b45286e29796c131a33.png
自定义端口启动 通过CMD打开，输入webrtc-streamer.exe -o -H 0.0.0.0:9001启动服务
https://i-blog.csdnimg.cn/blog_migrate/61b1567e2f8dbc20d87a4a2a8ae78a74.png
https://i-blog.csdnimg.cn/blog_migrate/396d3b9573d58296cf9a2d3127015986.png
4、将下载包html文件夹下webrtcstreamer.js文件和html/libs文件夹下adapter.min.js文件复制到vue项目public目次下。在index.html文件里引入这两个js文件
https://i-blog.csdnimg.cn/blog_migrate/7c3e521ae723bdf8df469a22e7e93a20.png
https://i-blog.csdnimg.cn/blog_migrate/91f86c3ba93c4d3735b5682463148b29.png
5、修改视频编码：(H.264)
https://i-blog.csdnimg.cn/blog_migrate/9809dba6e9011e19c4669d42039a8cca.png
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的
https://i-blog.csdnimg.cn/blog_migrate/dfe8787dfb7b3b2454df0e268d016f46.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]