前言
最近做了一个音视频监控模块，是基于海康的视频平台进行的，今天将一些基本的使用分享给大家。
环境准备
由于调用视频监控需要安装一个插件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>
窗口分割数
<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
最后推荐一款分分钟在线搭建SpringBoot + Mybatis框架
地址：
有问题欢迎留言，看到第一时间回复。
================================================================================
感谢阅读，写得不好的地方请指教，能帮助到你是对我最好的回报，不卑不亢，加油。
请你记住比你优秀的一定比你努力，比你努力的人一定比你优秀。
================================================================================
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
