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的

相关推荐
数据知道12 小时前
指纹浏览器:DNS 泄漏防范与 WebRTC 本地 IP 屏蔽的底层实现
爬虫·网络协议·tcp/ip·安全·webrtc·数据采集·指纹浏览器
换个昵称都难1 天前
webrtc源码解析概要介绍
webrtc
换个昵称都难1 天前
WebRTC 完整调用流程(前端纯 JS 实现,最简可运行)
webrtc
换个昵称都难2 天前
webrtc 拥塞控制GCC 和PCC
webrtc
Cxiaomu2 天前
React接入WebRTC实时视频实践
react.js·音视频·webrtc
AndyHuang19762 天前
WebRTC 强制 Relay 模式下 TCP 重连失败深度排查与优化实战
webrtc
换个昵称都难2 天前
webrtc pacing 平滑发包模块
webrtc
换个昵称都难2 天前
webrtc 音频混音介绍
音视频·webrtc
换个昵称都难3 天前
webrtc QOS-RemoteBitrateEstimator接收端带宽估计(1)
webrtc
换个昵称都难3 天前
webrtc QOS-RemoteBitrateEstimator接收端带宽估计-四个实例(2)
webrtc