WEB浏览器要调看摄像头视频,通常有flash插件、HLS拉流、WEBRTC 3种方式,随着flash被禁用,若要实现低延时需要使用到WEBRTC,很多主流浏览器已经支持该框架,本文旨在利用webrtcstremer搭建一个DEMO。
安装docker,若已安装跳过该步骤
yum install docker
systemctl start docker
安装webrtc-streamer服务
docker pull mpromonent/webrtc-streamer
docker run -itd -p 8000:8000 --network=host --name webrtcstremer mpromonent/webrtc-streamer
这里需要增加--network=host,否则会把docker容器的IP返回给WEB前端,这样就无法建立通讯
var webRtcServer = null;
window.onload = function() {
webRtcServer = new WebRtcStreamer("video","http://192.168.21.223:8000");
webRtcServer.connect("rtsp://admin:admin@192.168.21.224:554/Streaming/Channels/101?transportmode=unicast&profile=Profile_1");
其中192.168.21.223为第一步的服务器IP,rtsp://...为摄像头RTSP流地址,可以通过ONVIF工具探测,需要保证服务器可以访问到摄像头IP
可以将adapter.min.js、index.html、webrtcstremer.js文件放到WEB容器下,或者使用下面命令可以快速启动一个容器
python -m SimpleHTTPServer 18080
这里需要注意的是,一定要把上述文件放在WEB容器,如果直接打开是无法播放
若要部署到NGINX容器下,可以参考如下配置:
/etc/nginx/conf.d/default.conf
server {
listen 443 ssl;
server_name xxxxxxx;
ssl_certificate /etc/nginx/ssl/xxxxxx.pem;
ssl_certificate_key /etc/nginx/ssl/xxxxxx.key;
ssl_session_timeout 5m;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
ssl_prefer_server_ciphers on;
location /rtsp2webrtc {
root /var/www/html;
index index.html;
}
location / {
proxy_pass http://localhost:8000;
}
}
PS: xxxxxxx为你的域名及证书,部署NGINX后,index.html中new WebRtcStreamer需要修改为HTTPS地址
在浏览器上输入WEB容器地址即可播放,测试延时在1秒内,而且经过几个小时长时间测试,基本没有延时,服务器CPU占用55%(单核)。
http://localhost:18080/
通过对js源码分析梳理出如下流程图: