使用webrtc-streamer预览视频

# 相机 # 海康 # webrtc

小白第一次写文章，如有不合适的地方。请大家尽情指出并改正。

背景

公司最近接了一个项目，项目涉及到要接入海康摄像头并实时预览。这对我来说手拿把掐，小 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
我这边启动一个海康相机，进入海康默认网页查看相机是否正常。

相机正常运行

使用 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 的镜像，大佬们自行测试吧~