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的

相关推荐
程序员老陆2 天前
WHIP 与 WHEP:WebRTC 直播的标准化入口与出口
ffmpeg·音视频·webrtc·whip·whep
平行云10 天前
国产GPU云渲染适配实战:驱动兼容、编码调优与多路并发
unity·ue5·webrtc·webgl·实时云渲染·云桌面·像素流送
隐擎fox11 天前
网络传输安全剖析:WebRTC 本地真实 IP 泄漏机制(STUN/TURN)与 Python 防护检测实战
网络·网络协议·tcp/ip·安全·webrtc
福大大架构师每日一题12 天前
mediamtx v1.21.0 发布:Media-over-QUIC、RTSP、HLS、WebRTC 与安全能力全面升级
安全·webrtc
脏脏a14 天前
Neko 自托管实战:WebRTC 远程浏览器、多用户权限与公网访问
webrtc
cuijiecheng201815 天前
从 6.49 秒到约 1.9 秒:RK3588上的WebRTC 实时流启动速度优化记录
webrtc
SendTomo16 天前
SendTomo 与 send.wang 全景对比评测与实战指南
网络·网络协议·tcp/ip·webrtc·p2p
java_logo16 天前
Docker 部署 SRS:轻松搭建实时音视频流媒体平台
docker·容器·webrtc·实时音视频·rtmp·http-flv·轩辕镜像
wjcroom16 天前
一个可以在线多人玩的五子棋开发与布署方法-WebRTC和WebSocket的测试方法
websocket·网络协议·webrtc
cuijiecheng201820 天前
RK3588 WebRTC 实时流卡顿优化:从视频桥接到 H.264 PTS 回退
音视频·webrtc·h.264