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的

相关推荐
福大大架构师每日一题1 天前
mediamtx v1.21.2发布:UDP、JWT、RTSP、RTMP、HLS、WebRTC全面修复,稳定性与安全性再提升
网络协议·udp·webrtc
草根大哥3 天前
08-横向扩容与突发高并发:加机器到底买到了什么
运维·webrtc·srt·横向扩容·whip·自建cdn
草根大哥3 天前
07-P2P 直连与节点池调度
webrtc·p2p·srt·whip·whep·自建cdn
草根大哥3 天前
06-可观测性:端到端延迟、稳定性与画质
webrtc·srt·whip·自建cdn·ppcdn
大文说跨境4 天前
用 Python 自动化检测浏览器环境指纹:WebRTC 泄露、Canvas 哈希与时区一致性校验
python·自动化·webrtc
EasyDSS4 天前
基于WebRTC的视频会议系统:私有化视频会议平台EasyDSS视频会议到底能干什么
音视频·webrtc·easydss
福大大架构师每日一题7 天前
RustDesk 1.5.0发布:WebRTC、HDR 色调映射、剪贴板同步与百余项修复全面汇总
webrtc
福大大架构师每日一题12 天前
webrtc-rs/webrtc v0.21.0发布:API 可扩展、异步集成、确定性时间、ICE 重启与 SCTP 全面修复
webrtc
智联视频超融合平台13 天前
WebRTC + AI:实时音视频中嵌入神经网络推理的架构设计
人工智能·webrtc·实时音视频
P1Browser13 天前
换了 IP 还是被关联:WebRTC 泄露本地 IP 的三种触发路径
网络协议·tcp/ip·webrtc