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的

相关推荐
穷人小水滴3 天前
使用 WebRTC 实现局域网投屏: PC (GNOME ArchLinux) -> 平板 (Android)
android·linux·webrtc·浏览器·js·gnome·投屏
EasyDSS6 天前
场景深耕:低延迟高并发EasyDSS无人机RTMP高清推流直播技术剖析
ffmpeg·webrtc·rtmp
EasyDSS7 天前
EasyDSS以视频点播VOD/高清直播/WebRTC视频会议/语音转写STT技术创新,解决校园数字化核心难题
音视频·webrtc·语音识别·点播技术·流媒体直播
daad7778 天前
WEBRTC DTLSv1.2 加密示例
webrtc
淡泊if9 天前
低延迟直播终极方案:WebRTC + MediaMTX,延迟<500ms!
webrtc·视频流·mediamtx
Eanve9 天前
python搭建webrtc音视频服务端客户端
python·音视频·webrtc
@大吉10 天前
【思维导图】一图了解WebRTC通信流程,以及SFU和MediaSoup
webrtc·mediasoup
却道天凉_好个秋11 天前
WebRTC(十六):NetEQ
webrtc·neteq·fec
zhuxian200911 天前
webrtc两个client配对交互信令流程
webrtc
REDcker11 天前
WebRTC 源码架构深度解析
架构·webrtc