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的

相关推荐
RTC老炮2 天前
webrtc弱网-BitrateEstimator类源码分析与算法原理
网络·人工智能·算法·机器学习·webrtc
bluesen2 天前
WebRTC获取GB28181监控摄像头实时音视频流的实现方法
音视频·webrtc·gb28181·gb/t.28181
魔猴疯猿2 天前
轻松搭建RTMP推流、WebRTC拉流服务器SRS服务,源码编译安装
服务器·elasticsearch·webrtc
RTC老炮5 天前
webrtc弱网-RobustThroughputEstimator源码分析与算法原理
网络·算法·webrtc
执尺量北斗5 天前
LinkMate 智能会议室系统:基于 Qt / QML / WebRTC / FFmpeg / Whisper / OpenGL 的实时音视频会议平台
qt·ffmpeg·webrtc
红米饭配南瓜汤17 天前
WebRTC 发送端 SSRC 生成流程总结
网络·网络协议·音视频·webrtc·媒体
小柯博客17 天前
从零开始WebRTC(一)
stm32·单片机·嵌入式硬件·青少年编程·嵌入式·webrtc
Paraverse平行云21 天前
实时云渲染云推流突破UE像素流传输数据单个消息64KB限制
云计算·webrtc·unreal engine
MagicSakuraD1 个月前
LiveKit 的核心概念
webrtc
RTC老炮1 个月前
webrtc弱网-AlrDetector类源码分析与算法原理
服务器·网络·算法·php·webrtc