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

Bertha 。 2022-04-22 18:14 582阅读 0赞

### 前言 ###

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

#### 环境准备 ####

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

#### 视频监控 ####

*  界面展示  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMDY3NDY5_size_16_color_FFFFFF_t_70]

##### 示例代码 #####

由于此api是基于jquery开发的，所以需要引入jquery，版本不要求，还需要引入一个核心js`webVideoCtrl.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"
    				});
    			}
    		}
    	});
    });

*  初始化界面展示  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMDY3NDY5_size_16_color_FFFFFF_t_70 1]  
    ![在这里插入图片描述][20190114154559600.png]  
    能看到以上界面说明初始成功。可以看到控制台(`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>
    					窗口分割数 
    					<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 + " 已登录过！");
    	}
    }

*  登录界面展示  
    ![在这里插入图片描述][2019011415572165.png]  
    可以看到登录成功之后能看到对应的通道列表，相当于就是一个摄像头，登录成功之后即可点击预览，需要传入的参数有：当前选中的窗口、IP、码流类型、通道ID。

###### 预览代码 ######

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

*  html

*  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);
    }

*  预览成功界面  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMDY3NDY5_size_16_color_FFFFFF_t_70 2]

#### 录像回放 ####

*  界面展示  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMDY3NDY5_size_16_color_FFFFFF_t_70 3]  
    视频回放功能基本跟预览功能差不多，这里不在多说了。具体请看demo示例。

###### Demo下载地址：[https://github.com/caozongpeng/video-monitor-api][https_github.com_caozongpeng_video-monitor-api] ######

### 最后推荐一款分分钟在线搭建SpringBoot + Mybatis框架 ###

地址：https://blog.csdn.net/qq\_22067469/article/details/90523169

##### 有问题欢迎留言，看到第一时间回复。 #####

##### ================================================================================ #####

##### 感谢阅读，写得不好的地方请指教，能帮助到你是对我最好的回报，不卑不亢，加油。 #####

##### 请你记住比你优秀的一定比你努力，比你努力的人一定比你优秀。 #####

##### ================================================================================ #####

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMDY3NDY5_size_16_color_FFFFFF_t_70]: /images/20220327/d14ecb498fb34b76a992526673d2b31c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMDY3NDY5_size_16_color_FFFFFF_t_70 1]: /images/20220327/c4fa68a0d3b0468cacb5689e352a4c55.png
[20190114154559600.png]: /images/20220327/d9de10d3dacd4a4bac663f9fdc9f807f.png
[2019011415572165.png]: /images/20220327/ba6ff680168e455fb9c2e6f34c637060.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMDY3NDY5_size_16_color_FFFFFF_t_70 2]: /images/20220327/aa47f0f7d96d40869d1dcc290a8ba5cb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMDY3NDY5_size_16_color_FFFFFF_t_70 3]: /images/20220327/206a7d3dbfb54281b01d8d516c47cd80.png
[https_github.com_caozongpeng_video-monitor-api]: https://github.com/caozongpeng/video-monitor-api