最近在开发过程中 需要用到海康威视的摄像头 在web端展示 在各种百度之后 发现网上很难找到一个 简便，可靠的教程

在摸索着完成项目之后 ，决定写一篇攻略 造福有需求的小伙伴

言归正传

首先需要下载一个海康威视开发包（百度搜索“ 海康威视web开发包”）也可以给我留言索要 提供3.0开发包

第一步：打开下载好的文件之后在找到demo文件夹下codebase

点击webComponents.exe安装 注意版本号和 32位 64位（这里跟正一下 木有64位）

如果没有合适的 请去官网下载

第二步：将文件夹中

demo.js

demo.css

webVideoCtrl.js

这3个文件导入你的项目，还需要jquery 没有的小伙伴可以导开发包里面的1.7

这时候导入开发包的html文件 是可以打开这样一个页面

OK demo 打开了 在登录输入你摄像机配置的地址 和账号 密码 端口号 点击登录

可以查看到 已登录 设备 点击 已登录 设备 选中窗口 点击预览

这时候画面就可以出来了 （引入的JS注意地址哦 ）

第一步 完成 我们已经连接上摄像头了

下面 就开始做我们需要的功能的 web开发包里面 已经提供了 API的说明文档 我们只需要对照API 调用webVideoCtrl.js里面的方法 来实现我们需要的功能

比如我需要的是一个 在页面打开的时候 打开事件匹配的监视器同时展示在页面，根据监视器的数量打开一定的窗口。

1.打开页面初始化插件

// 初始化插件

// 全局保存当前选中窗口
var g_iWndIndex = 0; //可以不用设置这个变量，有窗口参数的接口中，不用传值，开发包会默认使用当前选择窗口
$(function () {
// 检查插件是否已经安装过
if (-1 == WebVideoCtrl.I_CheckPluginInstall()) {
alert("您还未安装过插件，下载WebComponents.exe安装！");
return;
}

// 初始化插件参数及插入插件
WebVideoCtrl.I_InitPlugin(951.5, 360, {
iWndowType: 2,
cbSelWnd: function (xmlDoc) {
g_iWndIndex = $(xmlDoc).find("SelectWnd").eq(0).text();
var szInfo = "当前选择的窗口编号：" + g_iWndIndex;
showCBInfo(szInfo);
}
});
WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");

// 检查插件是否最新
if (-1 == WebVideoCtrl.I_CheckPluginVersion()) {
alert("检测到新的插件版本，请将WebComponents.exe升级！");
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"
});
}
}
});
//初始化日期时间
var szCurTime = dateFormat(new Date(), "yyyy-MM-dd");
$("#starttime").val(szCurTime + " 00:00:00");
$("#endtime").val(szCurTime + " 23:59:59");

//这里要用setTimeout调用登录和预览方法 ，如果直接调用 会打不开窗口 ，因为加载时需要时间的

window.setTimeout(clickLogin(),1000);
window.setTimeout(clickStartRealPlay(),1000);

});

2写一个登录方法

var ce02m=new Array();
var ce03m=new Array();
var ce04m=new Array();
var ce05m=new Array();
<c:forEach items="${monitor}" var="monitor11">
ce02m.push("${monitor11.ce02}");
ce03m.push("${monitor11.ce03}");
ce04m.push("${monitor11.ce04}");
ce05m.push("${monitor11.ce05}");
</c:forEach>

var szIP = ce02m;
var szPort = ce05m;
var szUsername = ce03m;
var szPassword = ce04m;

// 登录
function clickLogin() {
for(var i=0;i<szIP.length;i++){
var iRet = WebVideoCtrl.I_Login(szIP[i], 1, szPort[i], szUsername[i], szPassword[i], {
});
}

}

WebVideoCtrl.I_Login()需要传4个值 账号 地址 密码 端口 端口默认是80 可以不传

我是从后台接收了一个list<model>在JS里面用forEach遍历进Array()

3.打开页面

function clickStartRealPlay() {
for(var i=0;i<szIP.length;i++){
iWndIndex=i;
var iRet = WebVideoCtrl.I_StartRealPlay(szIP[i], {
iWndIndex:iWndIndex
});
}

//几个账号打开几个窗口

if(ce02m.length>9){
changeWndNum(4);
}else{
if(ce02m.length>4){
changeWndNum(3);
}else{
changeWndNum(2);
}
}

WebVideoCtrl.I_StartRealPlay需要传地址 ，这是必须的

iWndIndex是选定的窗口号 ，在不传的情况下是默认为0，我用I表示，可以按循环打开固定的窗口号 changeWndNum这个方法是打开几个窗口 默认4种格式 1*1 2*2

3*3 4*4根据分别对应参数 1 2 3 4

剩下jsp只需要调用一下窗口样式 和映入的js CSS文件

<div id="divPlugin" class="plugin"></div>

如果需要调整窗口大小 去CSS里面找到plugin

/*插件*/
.plugin
{
width:951.5px;
height:360px;
}

注意 哦 在加载的时候也要做一次调整 不然窗口是无变化的

// 初始化插件参数及插入插件
WebVideoCtrl.I_InitPlugin(951.5, 360, {}

OK 功能完美实现