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:[email protected]:554/Streaming/tracks/101starttime=20240312t103000z&endtime=20240312t114030z"

webRtcServer.value.connect(url);

注意:可以没有结束时间,如果没有去掉 " &endtime=20240311t174030z "这一块;

注意:视频编码格式必须是H264的

相关推荐
chen_song_3 天前
WebRTC的ICE之TURN协议的交互流程中继转发Relay媒体数据的turnserver的测试
算法·音视频·webrtc·交互·媒体
程序员阿灿3 天前
ZLMediaKit 源码分析——[3] ZLToolKit 中EventPoller之网络事件处理
网络·webrtc·zlmediakit·zltoolkit
EasyCVR3 天前
视频AI赋能水利行业生态治理,水电站大坝漂浮物实时监测与智能预警方案
webrtc·智能硬件
拖孩5 天前
[特殊字符]我在 Chatterbox(话匣子)中 WebRTC 的使用-上篇(基本介绍)
开发语言·php·webrtc
多看书少吃饭5 天前
WebRTC简介及应用
前端·vue.js·websocket·webrtc
chen_song_8 天前
WebRTC中音视频服务质量QoS之FEC+NACK调用流程
udp·音视频·webrtc·rtc·h264·nack·fec
_洛_神10 天前
Webrtc编译官方示例实现视频通话
音视频·webrtc
EasyCVR11 天前
跨平台IPC通信、嵌入式WebRTC轻量化引擎:解析EasyRTC在ARM/Linux平台的性能突破
linux·arm开发·webrtc
GDAL11 天前
WebRTC协议全面教程:原理、应用与优化指南
webrtc
m0_7482400211 天前
WebRTC实现双端音视频聊天(Vue3 + SpringBoot)
spring boot·音视频·webrtc