海康视频监控二次开发基于B/S架构

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_22067469/article/details/86479513

前言

最近做了一个音视频监控模块,是基于海康的视频平台进行的,今天将一些基本的使用分享给大家。

环境准备

由于调用视频监控需要安装一个插件WebComponentsKit.exe,链接: https://pan.baidu.com/s/1RCQxh8ZjXTiHjohLYAVxKw 提取码: s58a,注意此控制不支持高版本的chrome,我这里使用的是360浏览器8.1.1

视频监控

  • 界面展示
    在这里插入图片描述
示例代码

由于此api是基于jquery开发的,所以需要引入jquery,版本不要求,还需要引入一个核心jswebVideoCtrl.js,所有的功能都是来自于它,所以必不可少,后面会附加一个更详细的demo

初始化代码
  • html
<!doctype html>
<html>
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="left">
	<div id="divPlugin" class="plugin"></div>
</body>
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/webVideoCtrl.js"></script>
<script src="js/demo.js"></script>
</html>
  • demo.js
// 初始化插件
// 全局保存当前选中窗口
var g_iWndIndex = 0; //可以不用设置这个变量,有窗口参数的接口中,不用传值,开发包会默认使用当前选择窗口
$(function () {
	// 检查插件是否已经安装过
    var iRet = WebVideoCtrl.I_CheckPluginInstall();
	if (-2 == iRet) {
		alert("您的Chrome浏览器版本过高,不支持NPAPI插件!");
		//window.open('WebComponentsKit.exe');
		return;
	} else if (-1 == iRet) {
      //  alert("您还未安装过插件,双击开发包目录里的WebComponentsKit.exe安装!");
		if(window.confirm('您还未安装过插件,确定要下载WebComponentsKit.exe安装吗?')){
                 window.open('WebComponentsKit.exe');
                 return true;
              }else{
                 //alert("取消");
                 return false;
             }
		return;
    }
	
	// 初始化插件参数及插入插件
	WebVideoCtrl.I_InitPlugin(600, 400, {
        bWndFull: true,//是否支持单窗口双击全屏,默认支持 true:支持 false:不支持
		iWndowType:2,
		cbSelWnd: function (xmlDoc) {
			g_iWndIndex = $(xmlDoc).find("SelectWnd").eq(0).text();
			var szInfo = "当前选择的窗口编号:" + g_iWndIndex;
			console.log(g_iWndIndex);
			console.log(szInfo);
			showCBInfo(szInfo);
		}
	});
	WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
	// 检查插件是否最新
	if (-1 == WebVideoCtrl.I_CheckPluginVersion()) {
		//alert("检测到新的插件版本,双击开发包目录里的WebComponentsKit.exe升级!");
		if(window.confirm('检测到新的插件版本,确定要下载WebComponentsKit.exe安装吗?')){
                 window.open('WebComponentsKit.exe');
                 return true;
              }else{
                 //alert("取消");
                 return false;
             }
		return;
	}

	// 窗口事件绑定
	$(window).bind({
		resize: function () {
			var $Restart = $("#restartDiv");
			if ($Restart.length > 0) {
				var oSize = getWindowSize();
				$Restart.css({
					width: oSize.width + "px",
					height: oSize.height + "px"
				});
			}
		}
	});
});
  • 初始化界面展示
    在这里插入图片描述
    在这里插入图片描述
    能看到以上界面说明初始成功。可以看到控制台(console)打印出当前选中的窗口是第0个窗口。
登录代码

登录的话需要有海康的设置,部署启动之后才可以进行登录,需要参数有:IP、端口、用户名、密码。

  • html
<table cellpadding="0" cellspacing="3" border="0">
			<tr>
				<td class="tt">IP地址</td>
				<td><input id="loginip" type="text" class="txt" value="10.17.137.244" /></td>
				<td class="tt">端口号</td>
				<td><input id="port" type="text" class="txt" value="80" /></td>
			</tr>
			<tr>
				<td class="tt">用户名</td>
				<td><input id="username" type="text" class="txt" value="admin" /></td>
				<td class="tt">密码</td>
				<td><input id="password" type="password" class="txt" value="web12345" /></td>
			</tr>
			<tr>
				<td class="tt">设备端口</td>
				<td colspan="2"><input id="deviceport" type="text" class="txt" value="8000" />(可选参数)</td>
				<td>
					窗口分割数&nbsp;
					<select class="sel2" onchange="changeWndNum(this.value);">
						<option value="1">1x1</option>
						<option value="2" selected>2x2</option>
						<option value="3">3x3</option>
						<option value="4">4x4</option>
					</select>
				</td>
			</tr>
			<tr>
				<td colspan="4">
					<input type="button" class="btn" value="登录" onclick="clickLogin();" />
					<input type="button" class="btn" value="退出" onclick="clickLogout();" />
					<input type="button" class="btn2" value="获取基本信息" onclick="clickGetDeviceInfo();" />
				</td>
			</tr>
			<tr>
				<td class="tt">已登录设备</td>
				<td>
					<select id="ip" class="sel" onchange="getChannelInfo();"></select>
				</td>
				<td class="tt">通道列表</td>
				<td>
					<select id="channels" class="sel"></select>
				</td>
			</tr>
		</table>
  • js
// 登录
function clickLogin() {
	var szIP = $("#loginip").val(),
		szPort = $("#port").val(),
		szUsername = $("#username").val(),
		szPassword = $("#password").val();

	if ("" == szIP || "" == szPort) {
		return;
	}
	console.log(szIP);
	console.log(szPort);
	console.log(szUsername);
	console.log(szPassword);

	var iRet = WebVideoCtrl.I_Login(szIP, 1, szPort, szUsername, szPassword, {
		success: function (xmlDoc) {
			showOPInfo(szIP + " 登录成功!");

			$("#ip").prepend("<option value='" + szIP + "'>" + szIP + "</option>");
			setTimeout(function () {
				$("#ip").val(szIP);
				getChannelInfo();
			}, 10);
		},
		error: function () {
			showOPInfo(szIP + " 登录失败!");
		}
	});

	if (-1 == iRet) {
		showOPInfo(szIP + " 已登录过!");
	}
}
  • 登录界面展示
    在这里插入图片描述
    可以看到登录成功之后能看到对应的通道列表,相当于就是一个摄像头,登录成功之后即可点击预览,需要传入的参数有:当前选中的窗口、IP、码流类型、通道ID。
预览代码

预览点击按钮调用预览方法即可

  • html
<tr>
	<td class="tt">码流类型</td>
	<td>
		<select id="streamtype" class="sel">
			<option value="1">主码流</option>
			<option value="2">子码流</option>
			<option value="3">第三码流</option>
			<option value="4">转码码流</option>
		</select>
	</td>
	<td>
		<input type="button" class="btn" value="开始预览" onclick="clickStartRealPlay();" />
		<input type="button" class="btn" value="停止预览" onclick="clickStopRealPlay();" />
	</td>
</tr>
  • js
// 开始预览
function clickStartRealPlay() {
	var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
		szIP = $("#ip").val(),
		iStreamType = parseInt($("#streamtype").val(), 10),
		iChannelID = parseInt($("#channels").val(), 10),
		bZeroChannel = $("#channels option").eq($("#channels").get(0).selectedIndex).attr("bZero") == "true" ? true : false,
		szInfo = "";

	console.log(szIP);
	console.log(iStreamType);
	console.log(iChannelID);
	console.log(bZeroChannel);

	if ("" == szIP) {
		return;
	}

	if (oWndInfo != null) {// 已经在播放了,先停止
		WebVideoCtrl.I_Stop();
	}

	var iRet = WebVideoCtrl.I_StartRealPlay(szIP, {
		iStreamType: iStreamType,
		iChannelID: iChannelID,
		bZeroChannel: bZeroChannel
	});

	console.log("iRet: " + iRet);

	if (0 == iRet) {
		szInfo = "开始预览成功!";
	} else {
		szInfo = "开始预览失败!";
	}

	showOPInfo(szIP + " " + szInfo);
}
  • 预览成功界面
    在这里插入图片描述

录像回放

  • 界面展示
    在这里插入图片描述
    视频回放功能基本跟预览功能差不多,这里不在多说了。具体请看demo示例。
Demo下载地址:https://github.com/caozongpeng/video-monitor-api-demo
有问题欢迎留言,看到第一时间回复。
================================================================================
感谢阅读,写得不好的地方请指教,能帮助到你是对我最好的回报,不卑不亢,加油。
请你记住比你优秀的一定比你努力,比你努力的人一定比你优秀。
================================================================================

没有更多推荐了,返回首页