小白第一次写文章,如有不合适的地方。请大家尽情指出并改正。
背景
公司最近接了一个项目,项目涉及到要接入海康摄像头并实时预览。这对我来说手拿把掐,小 case。因为以前已经做过很多次的海康视频接入,都是用的海康 SDK 包进行开发。可以预览,可以控制。但是每次都需要打开 IE 兼容模式。考虑到这个项目只需要预览即可,在浏览 Github 的时候,发现了 WebRTC-streamer 。
简介
WebRTC-streamer 是一个使用简单机制通过 WebRTC 流式传输视频捕获设备和 RTSP 源的实验。它嵌入了一个实现 API 的 HTTP 服务器,并提供一个通过 AJAX 使用它们的简单 HTML 页面。软件可以用于 Windows 执行,也可用于 Linux 部署,Docker 部署等,使用非常方便简洁,给开发者节省了大量的时间。
使用示例
Windows 系统
-
通过链接我们直接下载 windows 运行包即可
-
我们将下载好的压缩包进行解压,得到可执行 .exe 文件
-
双击启动该软件
此时 webrtc-stream 以准备就绪,现在就是我们调用它,为我们视频流解码的时候了。
-
准备一个海康相机。(ps:我这里是海康相机,但事实上不论是海康,还是其他厂家都可以运行)
- 海康 RTSP 地址
- 带用户名密码:
rtsp://admin:admin123@192.168.0.100:554/Streaming/Channels/101?transportmode=unicast
- 不带用户名密码:
rtsp://192.168.0.100:554/Streaming/Channels/101?transportmode=unicast
- 时间段截取:
rtsp://admin:admin123@192.168.0.110:554/Streaming/tracks/101?starttime=20220104t130000z&endtime=20220104t131000z
- 带用户名密码:
- 大华 rtsp 地址
- 带用户名密码:
rtsp://admin:admin123@192.168.0.154:554/cam/realmonitor?channel=1&subtype=0
- 不带用户名密码:
rtsp://192.168.0.154:554/cam/realmonitor?channel=1&subtype=0
- 时间段截取:
rtsp://admin:admin123@192.168.0.154:554/cam/playback?channel=1&subtype=0&starttime=2022_01_04_13_00_00&endtime=2022_01_04_13_10_00
- 带用户名密码:
我这边启动一个海康相机,进入海康默认网页查看相机是否正常。
相机正常运行
- 海康 RTSP 地址
-
使用 html 进行简单调用
这里这个 webrtcstream.js 必须引用,文件我第一次写文章,不知如何上传给大家用,大家可留言邮箱我会发送到大家邮箱,或者自己去网上搜索即可。
<body> <video id='video' style='object-fit:fill' controls autoplay autobuffer muted preload='auto'></video> <script type="text/javascript" src="./webrtcstreamer.js"></script> <script> var webRtcServer = null; //页面加载时加载视频画面 window.onload = function() { //video:需要绑定的video控件ID //127.0.0.1:启动webrtc-streamer的设备IP webRtcServer = new WebRtcStreamer("video","http://127.0.0.1:8000/"); //需要查看的rtsp地址 webRtcServer.connect("rtsp://admin:wo490989088@192.168.0.65:554/h264/ch1/main/av_stream"); } //页面退出时销毁 window.onbeforeunload = function() { webRtcServer.disconnect(); } </script> </body>
-
页面展示
打开我们写好的 html 文件,即可实时预览。本人公网亲测,速度非常快。大家可以自己测试一下。
Linux 系统
-
安装 webrtc-streamer
本人这边使用的是 Centos 7.9 版本,之前用的 6.9 版本不兼容。低于 7 以下的,大家不要在尝试了。Docker 环境,这边不在说了,相信各位大佬比我精通的多。执行以下命令直接运行:docker run -p 8000:8000 -it mpromonet/webrtc-streamer
运行之后就和 Windows 一样的流程,至于后台运行 Docker 的镜像,大佬们自行测试吧~
结尾
唉~如果大家需要视频控制的话,建议还是用海康的 SDK 包吧,我这里的业务只是一个预览这样做,不过认识了这么好用的软件。
学到了!