web端对接海康视频3.2开发包以及遇到的坑
须知：
- 3.0开发包功能比较全，但是只支持ie浏览器，所以使用的功能相对来说较少的3.2开发包，开发包官网上可以下载，可自行下载，并按照要求引入文件。
- 我的项目需求是左侧显示摄像头树状列表，中间部分显示摄像头信息，摄像头要支持预览、截图、录像、回放、云台的功能。
- 本示例演示的是对接nvr预览通道视频，和直接对接摄像头也差不太多，可以参考。
引入3.2必要js文件
全局的config配置文件
var CONFIG_OBJ = {
Video_Total:null, //web3.2插件的所有方法
NVR_Data:{
ip:"192.168.12.68",
port:80,
userName:"admin",
passWord:"ht123456",
szDeviceIdentify:null, //格式：iP_port
streamType:2, //码流类型 1主码流 2子码流 3第三码流 4转码码流
rtspPort:null, //RTSP端口
currentChannel:{}, //当前选择的通道
allChannel:[], //已登录的全部通道
}
};海康视频用到的相关方法，包括登录、预览、抓图、回放、录像、云台等功能
function showOPInfo(data,data1,data2) {
console.log(data,data1,data2)
}
function videoFunc() {
var that = this;
this.clickLogin = function clickLogin(paramObj) {
var szIP = paramObj.szIP,
szPort = paramObj.szPort,
szUsername = paramObj.szUsername,
szPassword = paramObj.szPassword;
if ("" == szIP || "" == szPort) {
return;
}
CONFIG_OBJ.NVR_Data.szDeviceIdentify = szIP + "_" + szPort;
var iRet = WebVideoCtrl.I_Login(szIP, 1, szPort, szUsername, szPassword, {
success: function () {
console.log(CONFIG_OBJ.NVR_Data.szDeviceIdentify + " 登录成功！");
that.getChannelInfo();
that.getDevicePort(paramObj.iWndIndex);
},
error: function (status, xmlDoc) {
console.log(CONFIG_OBJ.NVR_Data.szDeviceIdentify + " 登录失败！", status, xmlDoc);
}
});
if (-1 == iRet) {
showOPInfo(CONFIG_OBJ.NVR_Data.szDeviceIdentify + " 已登录过！");
that.getDevicePort(paramObj.iWndIndex);
}
};
// 窗口分割数
this.changeWndNum = function changeWndNum(iType) {
iType = parseInt(iType, 10);
WebVideoCtrl.I_ChangeWndNum(iType);
};
// 退出登录
this.clickLogout = function clickLogout() {
if (null == CONFIG_OBJ.NVR_Data.szDeviceIdentify) {
return;
}
var iRet = WebVideoCtrl.I_Logout(CONFIG_OBJ.NVR_Data.szDeviceIdentify);
if (0 == iRet) {
console.log("退出成功！");
CONFIG_OBJ.NVR_Data.szDeviceIdentify = null;
CONFIG_OBJ.NVR_Data.allChannel = [];
CONFIG_OBJ.NVR_Data.currentChannel = {};
CONFIG_OBJ.NVR_Data.rtspPort = null;
} else {
console.log("退出失败！");
}
};
//销毁
this.DestroyWorker = function DestroyWorker() {
WebVideoCtrl.I_DestroyWorker();
};
// 获取端口
this.getDevicePort = function getDevicePort(g_iWndIndex) {
showOPInfo("开始获取端口");
if (null == CONFIG_OBJ.NVR_Data.szDeviceIdentify) {
return;
}
var oPort = WebVideoCtrl.I_GetDevicePort(CONFIG_OBJ.NVR_Data.szDeviceIdentify);
showOPInfo(oPort);
if (oPort != null) {
//默认播放第一个通道的视频
// that.clickStartRealPlay(g_iWndIndex);
CONFIG_OBJ.NVR_Data.rtspPort = oPort.iRtspPort;
}
};
//获取通道
this.getChannelInfo = function getChannelInfo() {
// oSel = $("#channels").empty();
CONFIG_OBJ.NVR_Data.allChannel = [];
CONFIG_OBJ.NVR_Data.currentChannel = {};
if (null == CONFIG_OBJ.NVR_Data.szDeviceIdentify) {
return;
}
// 模拟通道
WebVideoCtrl.I_GetAnalogChannelInfo(CONFIG_OBJ.NVR_Data.szDeviceIdentify, {
async: false,
success: function (xmlDoc) {
var oChannels = $(xmlDoc).find("VideoInputChannel");
$.each(oChannels, function (i) {
var id = $(this).find("id").eq(0).text(),
name = $(this).find("name").eq(0).text();
if ("" == name) {
name = "Camera " + (i < 9 ? "0" + (i + 1) : (i + 1));
}
CONFIG_OBJ.NVR_Data.allChannel.push({
id:id,
name:name,
bZero:false
});
// oSel.append("");
});
//默认选中第一个通道
CONFIG_OBJ.NVR_Data.currentChannel = CONFIG_OBJ.NVR_Data.allChannel[0];
showOPInfo(CONFIG_OBJ.NVR_Data.szDeviceIdentify + " 获取模拟通道成功！");
},
error: function (status, xmlDoc) {
showOPInfo(CONFIG_OBJ.NVR_Data.szDeviceIdentify + " 获取模拟通道失败！", status, xmlDoc);
}
});
// 数字通道
WebVideoCtrl.I_GetDigitalChannelInfo(CONFIG_OBJ.NVR_Data.szDeviceIdentify, {
async: false,
success: function (xmlDoc) {
var oChannels = $(xmlDoc).find("InputProxyChannelStatus");
$.each(oChannels, function (i) {
var id = $(this).find("id").eq(0).text(),
name = $(this).find("name").eq(0).text(),
ipAddress = $(this).find("ipAddress").eq(0).text(),
online = $(this).find("online").eq(0).text();
if ("false" == online) {// 过滤禁用的数字通道
return true;
}
if ("" == name) {
name = "IPCamera " + (i < 9 ? "0" + (i + 1) : (i + 1));
}
CONFIG_OBJ.NVR_Data.allChannel.push({
id:id,
name:name,
bZero:false,
ip:ipAddress
});
// oSel.append("");
});
//默认选中第一个通道
CONFIG_OBJ.NVR_Data.currentChannel = CONFIG_OBJ.NVR_Data.allChannel[0];
showOPInfo(CONFIG_OBJ.NVR_Data.szDeviceIdentify + " 获取数字通道成功！");
},
error: function (status, xmlDoc) {
showOPInfo(CONFIG_OBJ.NVR_Data.szDeviceIdentify + " 获取数字通道失败！", status, xmlDoc);
}
});
// 零通道
WebVideoCtrl.I_GetZeroChannelInfo(CONFIG_OBJ.NVR_Data.szDeviceIdentify, {
async: false,
success: function (xmlDoc) {
var oChannels = $(xmlDoc).find("ZeroVideoChannel");
$.each(oChannels, function (i) {
var id = $(this).find("id").eq(0).text(),
name = $(this).find("name").eq(0).text();
if ("" == name) {
name = "Zero Channel " + (i < 9 ? "0" + (i + 1) : (i + 1));
}
if ("true" == $(this).find("enabled").eq(0).text()) {// 过滤禁用的零通道
CONFIG_OBJ.NVR_Data.allChannel.push({
id:id,
name:name,
bZero:true
});
// oSel.append("");
}
});
//默认选中第一个通道
CONFIG_OBJ.NVR_Data.currentChannel = CONFIG_OBJ.NVR_Data.allChannel[0];
showOPInfo(CONFIG_OBJ.NVR_Data.szDeviceIdentify + " 获取零通道成功！");
},
error: function (status, xmlDoc) {
showOPInfo(CONFIG_OBJ.NVR_Data.szDeviceIdentify + " 获取零通道失败！", status, xmlDoc);
}
});
};
// 开始预览
this.clickStartRealPlay = function clickStartRealPlay(g_iWndIndex) {
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex);
if (null == CONFIG_OBJ.NVR_Data.szDeviceIdentify) {
return;
}
var startRealPlay = function () {
WebVideoCtrl.I_StartRealPlay(CONFIG_OBJ.NVR_Data.szDeviceIdentify, {
iWndIndex: g_iWndIndex,
iRtspPort: CONFIG_OBJ.NVR_Data.rtspPort,
iStreamType: CONFIG_OBJ.NVR_Data.streamType,
iChannelID: CONFIG_OBJ.NVR_Data.currentChannel.id,
bZeroChannel: CONFIG_OBJ.NVR_Data.currentChannel.bZero,
success: function () {
console.log("开始预览成功！");
that.clickEnableEZoom(g_iWndIndex);
},
error: function (status, xmlDoc) {
if (403 === status) {
console.log("设备不支持Websocket取流！");
} else {
console.log("开始预览失败！");
}
}
});
};
if (oWndInfo != null) {// 已经在播放了，先停止
console.log("已经在播放了，先停止");
WebVideoCtrl.I_Stop({
success: function () {
startRealPlay();
},error:function () {
console.log("shibai")
}
});
} else {
startRealPlay();
}
};
//停止预览（防止多窗口预览同一视频退出登录未停止播放）
this.clickStopPreview = function clickStopPreview(windowIndex) {
WebVideoCtrl.I_Stop({
iWndIndex:windowIndex,
success: function () {
console.log("停止播放成功"+windowIndex)
}
});
};
// 抓图
this.clickCapturePic = function clickCapturePic(g_iWndIndex,fn) {
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex);
if (oWndInfo != null) {
var szPicName = oWndInfo.szDeviceIdentify + "_" + new Date().getTime() + ".jpg";
WebVideoCtrl.I2_CapturePic(szPicName, {
bDateDir: true //是否生成日期文件
}).then(function(){
console.log("抓图成功");
fn(szPicName);
},function(){
console.log("抓图失败")
});
}
};
// 启用电子放大
this.clickEnableEZoom = function clickEnableEZoom(g_iWndIndex) {
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex);
if (oWndInfo != null) {
var iRet = WebVideoCtrl.I_EnableEZoom(g_iWndIndex);
if (0 == iRet) {
console.log("启用电子放大成功");
} else {
console.log("启用电子放大失败");
}
}
};
// 开始录像
this.clickStartRecord = function clickStartRecord(g_iWndIndex) {
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex);
if (oWndInfo != null) {
var szFileName = oWndInfo.szDeviceIdentify + "_" + new Date().getTime();
WebVideoCtrl.I_StartRecord(szFileName, {
bDateDir: true, //是否生成日期文件
success: function () {
console.log("开始录像成功！")
},
error: function () {
console.log("开始录像失败！")
}
});
}
};
// 停止录像
this.clickStopRecord = function clickStopRecord(g_iWndIndex) {
console.log("停止录像方法");
console.log(g_iWndIndex);
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex);
console.log(oWndInfo);
if (oWndInfo != null) {
WebVideoCtrl.I_StopRecord({
success: function () {
console.log("停止录像成功！")
},
error: function () {
console.log("停止录像失败！")
}
});
}
};
this.g_bPTZAuto = false;
// 云台控制
this.mouseDownPTZControl = function mouseDownPTZControl(iPTZIndex,g_iWndIndex) {
showOPInfo("云台操作！");
console.log(iPTZIndex,g_iWndIndex);
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
iPTZSpeed = 4;
console.log(oWndInfo);
if (oWndInfo != null) {
if (9 == iPTZIndex && this.g_bPTZAuto) {
iPTZSpeed = 0;// 自动开启后，速度置为0可以关闭自动
} else {
this.g_bPTZAuto = false;// 点击其他方向，自动肯定会被关闭
}
console.log(iPTZIndex)
WebVideoCtrl.I_PTZControl(iPTZIndex, false, {
iPTZSpeed: iPTZSpeed,
success: function (xmlDoc) {
if (9 == iPTZIndex && this.g_bPTZAuto) {
showOPInfo(oWndInfo.szDeviceIdentify + " 停止云台成功！");
} else {
showOPInfo(oWndInfo.szDeviceIdentify + " 开启云台成功！");
}
if (9 == iPTZIndex) {
this.g_bPTZAuto = !this.g_bPTZAuto;
}
},
error: function (status, xmlDoc) {
showOPInfo(oWndInfo.szDeviceIdentify + " 开启云台失败！", status, xmlDoc);
}
});
}
};
this.mouseUpPTZControl = function mouseUpPTZControl(g_iWndIndex) {
console.log("鼠标抬起")
console.log(g_iWndIndex)
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex);
console.log(oWndInfo)
if (oWndInfo != null) {
WebVideoCtrl.I_PTZControl(1, true, {
success: function (xmlDoc) {
console.log("成功")
showOPInfo(oWndInfo.szDeviceIdentify + " 停止云台成功！");
},
error: function (status, xmlDoc) {
console.log("失败")
showOPInfo(oWndInfo.szDeviceIdentify + " 停止云台失败！", status, xmlDoc);
}
});
}
};
// 开始回放
this.clickStartPlayback = function clickStartPlayback(g_iWndIndex,startTime,endTime) {
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
szDeviceIdentify = CONFIG_OBJ.NVR_Data.szDeviceIdentify,
iRtspPort = CONFIG_OBJ.NVR_Data.rtspPort,
iStreamType = CONFIG_OBJ.NVR_Data.streamType,
bZeroChannel = CONFIG_OBJ.NVR_Data.currentChannel.bZero,
iChannelID = CONFIG_OBJ.NVR_Data.currentChannel.id,
szStartTime = startTime,
szEndTime = endTime,
bChecked = false, //不启用转码码流
iRet = -1;
if (null == szDeviceIdentify) {
return;
}
if (bZeroChannel) {// 零通道不支持回放
return;
}
var startPlayback = function () {
WebVideoCtrl.I_StartPlayback(szDeviceIdentify, {
iRtspPort: iRtspPort,
iStreamType: iStreamType,
iChannelID: iChannelID,
szStartTime: szStartTime,
szEndTime: szEndTime,
success: function () {
console.log(szDeviceIdentify +"开始回放成功");
},
error: function (status, xmlDoc) {
if (403 === status) {
console.log(szDeviceIdentify +"设备不支持Websocket取流！");
} else {
console.log(szDeviceIdentify +"开始回放失败！");
}
}
});
};
if (oWndInfo != null) {// 已经在播放了，先停止
WebVideoCtrl.I_Stop({
success: function () {
startPlayback();
}
});
} else {
startPlayback();
}
};
// 停止回放
this.clickStopPlayback = function clickStopPlayback(g_iWndIndex){
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex);
if (oWndInfo != null) {
WebVideoCtrl.I_Stop({
success: function () {
console.log("停止回放成功！");
},
error: function () {
console.log("停止回放失败！");
}
});
}
};
// 暂停回放
this.clickPause = function clickPause(g_iWndIndex) {
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex);
if (oWndInfo != null) {
WebVideoCtrl.I_Pause({
success: function () {
console.log(oWndInfo.szDeviceIdentify + "暂停成功！");
},
error: function () {
console.log(oWndInfo.szDeviceIdentify + "暂停失败！");
}
});
}
};
//恢复回放
this.clickResume = function clickResume(g_iWndIndex) {
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex);
if (oWndInfo != null) {
WebVideoCtrl.I_Resume({
success: function () {
console.log(oWndInfo.szDeviceIdentify + "恢复成功！");
},
error: function () {
console.log(oWndInfo.szDeviceIdentify + "恢复失败！");
}
});
}
};
// 慢放
this.clickPlaySlow = function clickPlaySlow(g_iWndIndex) {
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex);
if (oWndInfo != null) {
WebVideoCtrl.I_PlaySlow({
success: function () {
console.log(oWndInfo.szDeviceIdentify + "慢放成功！");
},
error: function () {
console.log(oWndInfo.szDeviceIdentify + "慢放失败！");
}
});
}
};
// 快放
this.clickPlayFast = function clickPlayFast(g_iWndIndex) {
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex);
if (oWndInfo != null) {
WebVideoCtrl.I_PlayFast({
success: function () {
showOPInfo(oWndInfo.szDeviceIdentify + "快放成功！");
},
error: function () {
showOPInfo(oWndInfo.szDeviceIdentify + "快放失败！");
}
});
}
}
}
export {videoFunc}
赋值全局变量
this.$url.Video_Total = new videoFunc();将海康视频封装一个组件，方便项目中多个位置使用到视频
使用视频窗口的页面（引入海康组件）
页面显示效果
遇到的坑：
1、确定客户提供的是IP地址还是监控点编号，或者是对接nvr。
提供IP地址的话不需要使用海康平台，使用web3.0控件开发包/web3.2控件开发包。
以上三种方式需要确认产品是否支持websockets协议，可以咨询 4008005998 的海康客服，如果不支持只能使用web3.0插件
web3.0：
功能全面但不支持谷歌浏览器
web3.2：
需要支持websocket取流
不支持直接将截图文件保存到对应的路径地址（ie对设置配置生效，谷歌不生效）
不支持双击全屏
不支持自动云台自转
不支持视频的快放慢放控制等（反正功能不太全）2、如果对接完成但是预览视频特别卡
将主码流换成子码流
streamType 1主码流 2子码流 3第三方码流 4转码码流3、单页面加载多个web3.2插件
需要使用iframe嵌套4、web对接海康平台调试v1.5.1插件，视频播放失败
要先安装VideoWebPlugin.exe，再运行webs.exe，再重新使用插件试一下5、调研web3.2回放失败问题
项目对接摄像头的话摄像头需要支持插卡功能，如果不支持插卡功能只能使用3.0插件查看回放视频
项目对接nvr的话，nvr需要支持websocket协议，摄像头支不支持都可以，nvr需要有硬盘，并且配置了计划模板（例如全天录制），
如果都满足依然查不到，浏览器登录nvr确认是否有回放视频，如果nvr里有但是控件查不到，确认对接方式
如果是对接nvr需要登录nvr的ip和端口通过通道查看，不能通过登录摄像头的ip和端口查看6、解决预览视频切换页面又返回来之后未加载
多个3.2插件时进入页面需要执行初始化控件、登录和开始预览，离开页面执行停止预览、退出登录和销毁控件7、web3.2对接网络球机，云台控制报错
登录设备之后需要增加调用I_GetAnalogChannelInfo获取通道信息，然后再控制云台8、V1.5.1插件 playMode传0和传1区分预览和回放，初始化更改播放模式必须销毁后重新初始化吗
必须反初始化 然后再重新初始化9、Web3.2录像功能不能正常使用，点击结束录制没有反应
分辨率的原因，大于1080P无插件开发包转封装录像不支持，nvr配置修改为1080P录像停止录像就正常了10、V1.5.1插件不能遮挡，只能在最上层
的确不能被遮挡，object标签只能在最上层显示11、一个项目里面多个页面里用到了web3.2控件，只登陆一次nvr，多次初始化视频，初始化之后不登录只预览，是否可行
不可以，重新初始化就需要重新登陆12、当当前页面退出的时候执行退出登录I_Logout的方法，但是在另一个页面初始化登陆成功之后进行预览的时候，会返回“已经在播放了，先停止”
需要先调用停止预览接口，再调用注销登录接口，并且停止预览之后增加调用I_DestroyWorker这个接口。13、视频可以使用https访问吗
如果nvr设备支持websockets（网页登录设备进配置网络服务配置里面查看），那可以使用HTTPS协议
如果不支持的话，只能使用HTTP协议，暂时不支持。（目前已提供新的开发包）14、使用iframe嵌套方式加载视频，v1.5.1平台插件加载不到容器内
通过oWebControl.JS_Resize更新一下位置15、demo只能通过nvr的ip+端口登录吗，通过域名登陆失败
多浏览器测试，在ie下可以正常查看16、登陆项目后确认项目中是否依次返回以下信息
如果没有返回如上图，查看海康视频可能遇到的问题以及排查和解决方法：
①、确认库里配置的nvr信息和视频信息在浏览器查看nvr是否正常
- 在用户登录后查看monDeviceNvr/selectByRegionId返回的nvr信息的ip和端口在浏览器中是否能正常打开。例如返回的ip是172.29.49.68，port（端口）是80，浏览器访问172.29.49.68:80可以正常打开nvr的登录界面，如下图：
- 不能正常打开上面页面的话，需要在信息管理/设备管理/NVR管理页面修改对应地区的正确的nvr的信息，可以正常打开说明nvr的IP端口信息无误，之后确认用户名和密码是否正确，在用户名输入返回的loginName字段，密码输入password字段，如果可以登录成功，如下图：
- 不能登录成功，需要在信息管理/设备管理/NVR管理页面修改对应地区的正确的nvr的信息，可以登陆成功说明nvr信息无误，查看nvr下的视频通道是否正常，双击左边的通道，加载成功如下图：
- 可以加载成功，说明nvr下的通道信息无误，到此说明nvr无问题
②、如果报错如下图的错，说明更新的时候将打包后的js文件夹（海康文件的文件夹）覆盖在了服务器上，js文件夹不能覆盖，需要先删除服务器上的js文件夹，再将文件覆盖上去，如果海康视频没有修改的话不要动js文件夹替换别的文件就可以了
③、如果不报（②）的错也确认了（①）没问题但仍然返回登陆失败
确认使用的是支持http的插件还是支持https的插件，两个互斥，如果使用的https的插件则必须访问https的页面，反之亦然。
④、如果（3、）确认修改了还是不显示，ip地址不能为localhost或者127.0.0.1，改为本机ip。