webrtc-streamer
webrtc-streamer is a project that uses a simple mechanism to stream video capture devices and RTSP sources through WebRTC. It has a built-in small HTTP server to provide support for the relevant interfaces required by WebRTC. Compared with the ffmpeg+flv.js solution, the delay is reduced to about 0.4 seconds, and the loading speed of the screen is also faster. After switching the browser tab, the screen will not be paused, and the concurrency limit in the same domain name of http1.1 is solved. (More than 6 videos can be played at the same time in Google Chrome).
webrtc-streamer Download Releases mpromonet/webrtc-streamer (github.com)
Windows: download address, select the corresponding version to download and decompress and run [webrtc-streamer.exe]
centos7.4: For some environmental reasons, it is recommended to use it in docker
# docker中获取webrtc-streamer
docker pull mpromonet/webrtc-streamer
# 启动webrtc-streamer镜像
docker run -itd -p 8000:8000 --name webrtc-streamer mpromonet/webrtc-streamer
test
The js files needed in the page: [webrtcstreamer.js], [adapter.min.js], respectively in the [html] and [html\libs] directories of the windows version
Core code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<video id='video' style='object-fit:fill' controls autoplay autobuffer muted preload='auto'></video>
<script type="text/javascript" src="./js/webrtcstreamer.js"></script>
<script type="text/javascript" src="./js/adapter.min.js"></script>
<script type="text/javascript" src="./js/jquery-3.2.1.min.js"></script>
<script>
var webRtcServer = null;
//页面加载时加载视频画面
window.onload = function() {
//video：需要绑定的video控件ID
//192.168.1.226：启动webrtc-streamer的设备IP
webRtcServer = new WebRtcStreamer("video",location.protocol+"//192.168.1.226:8000");
//需要查看的rtsp地址
webRtcServer.connect("rtsp://admin:[email protected]:554/h264/ch1/main/av_stream");
}
//页面退出时销毁
window.onbeforeunload = function() {
webRtcServer.disconnect();
}
</script>
</body>
</html>
Commonly used RTSP formats
#海康摄像头
rtsp://<账号>:<密码>@<IP>:<端口,默认554>/<视频编码,h264/h265>/<通道,ch1起始>/<码流,main主 sub子>/av_stream
例：rtsp://admin:[email protected]:554/h264/ch1/main/av_stream
#海康NVR，账号密码为NVR的而不是摄像头账号密码，区分摄像头靠通道号，时间格式：日后面加T，秒后面加Z
rtsp://<账号>:<密码>@<地址>:<端口,默认554>/Streaming/tracks/<前面是通道号 D1：1,后两位是码流 01:主 02:子>?starttime=<起始时间,20210814T173350Z>&endtime=<结束时间,20210814T180000Z>
例：rtsp://admin:[email protected]:554/Streaming/tracks/101?starttime=20210818T171300Z&endtime=20210818T171400Z
#大华摄像头
rtsp://<账号>:<密码>@<IP>:<端口,默认554>/cam/realmonitor?channel=<通道,起始1>&subtype=<码流,0:主 1:子>
例：rtsp://admin:[email protected]:554/cam/realmonitor?channel=1&subtype=0
#大华NVR，账号密码为NVR的而不是摄像头账号密码，区分摄像头靠通道号，时间格式：年月日时分后面加_
rtsp://<账号>:<密码>@<地址>:<端口,默认554>/cam/playback?channel=<通道号,D1：1>&subtype=<码流,0:主 1:子)>&starttime=<起始时间,2021_08_18_14_13_41>&endtime=<结束时间,2021_08_18_14_15_41>
例：rtsp://admin:[email protected]:554/cam/playback?channel=1&subtype=0&starttime=2021_08_18_10_52_00&endtime=2021_08_18_10_53_00