海康相机使用webrtc-stream预览

2,527 阅读3分钟

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

背景

公司最近接了一个项目,项目涉及到要接入海康摄像头并实时预览。这对我来说手拿把掐,小case。因为以前已经做过很多次的海康视频接入,都是用的海康SDK包进行开发。可以预览,可以控制。但是每次都需要打开IE兼容模式。考虑到这个项目只需要预览即可,在浏览github的时候,发现了webrtc-stream工具。

简介

WebRTC-streamer 是一个使用简单机制通过 WebRTC 流式传输视频捕获设备和 RTSP 源的实验。 它嵌入了一个实现 API 的 HTTP 服务器,并提供一个通过 AJAX 使用它们的简单 HTML 页面。软件可以用于windows执行,也可用于linux部署,docker部署等,使用非常方便简洁,给开发者节省了大量的时间。

使用示例

windows测试

1.通过链接我们直接下载windows运行包即可

image.png

2.我们将下载好的压缩包进行解压,得到可执行.exe文件

image.png

3.双击启动该软件

image.png

此时webrtc-stream以准备就绪,现在就是我们调用它,为我们视频流解码的时候了。

4.准备一个海康相机。(ps:我这里是海康相机,但事实上不论是海康,还是其他厂家都可以运行)

附:海康大华的rtsp地址,方便大家使用
  • 海康 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

我这边启动一个海康相机,进入海康默认网页查看相机是否正常。

image.png

相机正常运行 image.png

5.使用html进行简单调用

这里这个webrtcstream.js必须引用,文件我第一次写文章,不知如何上传给大家用,大家可留言邮箱我会发送到大家邮箱,或者自己去网上搜索即可。


<!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="./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> 

6.页面展示

打开我们写好的html文件,即可实时预览。本人公网亲测,速度非常快。大家可以自己测试一下。

image.png

linux测试

  1. 安装webrtc-streamer

本人这边使用的是centos7.9版本,之前用的6.9版本不兼容。低于7以下的,大家不要在尝试了。docker环境,这边不在说了,相信各位大佬比我精通的多。

docker run -p 8000:8000 -it mpromonet/webrtc-streamer

执行命令,则直接运行。运行之后就和windows一样的流程,至于后台运行docker的镜像,大佬们自行测试吧~

结尾

唉~如果大家需要视频控制的话,建议还是用海康的SDK包吧,我这里的业务只是一个预览这样做,不过认识了这么好用的软件。