海康威视摄像头-chrome谷歌浏览器高版本局域网下海康摄像头web网页实时播放

备注:本篇文章最后转为rtmp在前端页面播放,需要用到flash插件,现已禁用,仅提供思路。望周知。

前言:

项目需要在web上实时播放摄像头视频。该项目部署在局域网上,无外网,所以不能调用萤石云的api进行视频拉取。
百度了很多方法,尝试了使用海康威视WEB开发包3.0,但是只支持IE浏览器。但是项目基于谷歌浏览器。
所以最后采用转流的方式,部署nginx、ffmpeg将rtsp转为rtmp格式、利用video.js在web网页上进行视频播放,无需浏览器安装插件。这里延伸一点:HTML5的可以支持rtmp,但是无法播放rtsp,flash也止步于rtmp。

一、 前期工作:

环境:windows 服务器

1、摄像头准备工作:

将海康威视的视频摄像头和本地电脑连接在同一网段,并设置好摄像头的IP地址和端口号等。

2、安装vcl视频播放器:

下载地址:https://download.csdn.net/download/wfanking/13195866

3、测试rstp地址正确性。

打开vcl播放器,测试rtsp地址是否能播放成功,再进行接入操作。不然都是白扯。

【海康威视】取流说明:
如果摄像头密码是fun123456,IP是192.168.1.64,RTSP端口默认554未做改动,是H.264编码,那么 主码流取流:
rtsp://admin:[email protected]:554/h264/ch1/main/av_stream 子码流取流:
rtsp://admin:[email protected]:554/h264/ch1/sub/av_stream
ps:如果是H.265编码的,那么将H.264替换成H.265即可

二、直播接入指南

1、下载软件包,解压。

下载地址:https://download.csdn.net/download/wfanking/13195883
将修改好配置的压缩包解压,nginx、ffmpeg 解压后放置c盘根目录。

2、配置ffmpeg环境变量path:

path:C:\ffmpeg\bin,此处不做过多详释。
海康威视摄像头-chrome谷歌浏览器高版本局域网下海康摄像头web网页实时播放_第1张图片

3、验证ffmpeg是否配置成功:

cmd 输入ffmpeg 提示一下信息即可
海康威视摄像头-chrome谷歌浏览器高版本局域网下海康摄像头web网页实时播放_第2张图片

4、启动nginx

运行文件中的exe文件,运行一闪之后任务管理器查看nginx.exe进程存在即可,启动成功如下图
海康威视摄像头-chrome谷歌浏览器高版本局域网下海康摄像头web网页实时播放_第3张图片

5、cmd中输入转流命令:

ffmpeg -i ffmpeg -i “rtsp://admin:[email protected]:554/ch1/sub/av_stream” -vcodec h264 -f flv -an “rtmp://localhost/live”
回车后控制台持续打印转流信息:

6、测试rstp地址正确性:

再次打开vcl播放器,播放rtmp视频,验证是否成功。若播放成功,则转流步骤就完成了

7、前端展示部分:

src写入rtmp://localhost.live流即可

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>阿饭的摄像头</title>
		<!--引入播放器样式-->
		<link href="http://vjs.zencdn.net/5.19/video-js.min.css" rel="stylesheet">
		<!--引入播放器js-->
		<script src="http://vjs.zencdn.net/5.19/video.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/videojs-flash@2/dist/videojs-flash.min.js"></script>
	</head>
	<body>

		<div class="div1">
			<!--vjs-big-play-centered 播放按钮居中-->
			<!--poster默认的显示界面,就是还没点播放,给你显示的界面-->
			<!--controls 规定浏览器应该为视频提供播放控件-->
			<!--preload="auto" 是否提前加载-->
			<!--data-setup='{"example_option":true}' 可以把一些属性写到这个里面来,如data-setup={"autoplay":true}-->

			<video id="my-player" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" poster="//C:/photo/1.jpg"
			 width="700" height="400" data-setup='{}'>
				<!--src: 规定媒体文件的 URL  type:规定媒体资源的类型-->
				<source src='rtmp://localhost/live/' type='rtmp/flv' />
			</video>
		</div>

	<script type="text/javascript">
			// 设置flash路径,用于在videojs发现浏览器不支持HTML5播放器的时候自动唤起flash播放器
			videojs.options.flash.swf = 'https://cdn.bootcss.com/videojs-swf/5.4.1/video-js.swf';
			var player = videojs('my-player'); //my-player为页面video元素的id
			player.play(); //播放
			//    1. 播放   player.play()
			//    2. 停止   player.pause()
			//    3. 暂停   player.pause()
		</script>
	</body>
</html>

三、效果查看

海康威视摄像头-chrome谷歌浏览器高版本局域网下海康摄像头web网页实时播放_第4张图片

四、踩过的坑锦集:

1、chrome谷歌浏览器前端视频播放报错:No compatible source was found for this media,解决方法 见附件链接—> https://blog.csdn.net/wfanking/article/details/110253314

2、chrome谷歌浏览器前端视频播放报错:FLASH: rtmpconnectfailure解决方法, 见附件链接—> https://blog.csdn.net/wfanking/article/details/110253689

你可能感兴趣的:(运维,前端,海康威视实时播放,海康chrome高版本播放,rstp转rtmp,海康摄像头web网页播放,海康局域网web网页播放)