之前使用海康威视的产品是使用海康的windows安装的软件(ivms-8700),但是现在有需求在web页面上实时查看监控视频,有需求就开干.撸起袖子加油干.
接下来肯定是上网查找资料,下载文件咯,我从官网下载了demo文件
注:Demo必须使用IE浏览器,这里可以建议使用360浏览器或者QQ浏览器(都是双内核浏览器)
在开始使用时我们需要先打开codebase文件夹中的WebComponentsKit.exe进行安装(这里有64位和32位),如果你是64位的操作系统,安装完之后还提示需要安装插件,那么最好把32位的也安装了.
点击之后傻瓜式安装即可
接下来先启动nginx,点击nginx文件夹中的start.bat,弹幕一闪而逝,即可启动成功,
成功进入的图片如上图所示,输入正确的账号密码以及端口号,点击登录
已登录设备中可以查看到目前登录的ip地址,
点击开始预览即可成功显示视频,
若显示设备不支持Websocket取流!则更改浏览器内核,将内核改为IE内核或者兼容模式
海康威视的Demo的插件是固定大小的,我这里更改为获取屏幕的宽和高,然后将宽度和高度确定下来
// 初始化插件参数及插入插件
WebVideoCtrl.I_InitPlugin(document.body.clientWidth-110, document.body.clientHeight-50, {
bWndFull: true, //是否支持单窗口双击全屏,默认支持 true:支持 false:不支持
iPackageType: 2, //2:PS 11:MP4
iWndowType: 2,
bNoPlugin: true,
cbSelWnd: function (xmlDoc) {
g_iWndIndex = parseInt($(xmlDoc).find("SelectWnd").eq(0).text(), 10);
var szInfo = "当前选择的窗口编号:" + g_iWndIndex;
showCBInfo(szInfo);
},
cbDoubleClickWnd: function (iWndIndex, bFullScreen) {
var szInfo = "当前放大的窗口编号:" + iWndIndex;
if (!bFullScreen) {
szInfo = "当前还原的窗口编号:" + iWndIndex;
}
showCBInfo(szInfo);
// 此处可以处理单窗口的码流切换
/*if (bFullScreen) {
clickStartRealPlay(1);
} else {
clickStartRealPlay(2);
}*/
},
cbEvent: function (iEventType, iParam1, iParam2) {
if (2 == iEventType) {// 回放正常结束
showCBInfo("窗口" + iParam1 + "回放结束!");
} else if (-1 == iEventType) {
showCBInfo("设备" + iParam1 + "网络错误!");
} else if (3001 == iEventType) {
clickStopRecord(g_szRecordType, iParam1);
}
},
cbRemoteConfig: function () {
showCBInfo("关闭远程配置库!");
},
cbInitPluginComplete: function () {
WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
// 检查插件是否最新
/* if (-1 == WebVideoCtrl.I_CheckPluginVersion()) {
alert("检测到新的插件版本,双击开发包目录里的WebComponentsKit.exe升级!");
return;
}*/
}
});
我这里进行了更改,将用户每次登陆更改为当页面进入后遍历登录所有的摄像头,供用户点击预览
//遍历登录
for (var i=0;i<ips.length;i++){
(function(i) {
var szDeviceIdentify = ips[i] + "_80";
WebVideoCtrl.I_Login(ips[i], 1, 80, '你的账号', '你的密码', {
success: function (xmlDoc) {
showOPInfo(szDeviceIdentify + " 登录成功!");
$("#ip").prepend(" + szDeviceIdentify + "");
$("#alery").prepend(""+szDeviceIdentify+"
");
var ips0 =szDeviceIdentify.replace(".","").replace(".","").replace(".","").replace(".","").replace("_","");
$("#mynames").prepend("
");
setTimeout(function () {
$("#ip").val(szDeviceIdentify);
getChannelInfo();
getDevicePort();
}, 10);
(function(i) {
// showOPInfo(szDeviceIdentify + " 进来了1"+"i为"+i);
if (i<4){
clickStartRealPlay(szDeviceIdentify,i);
}
})(i)
},
error: function (status, xmlDoc) {
showOPInfo(szDeviceIdentify + " 登录失败!", status, xmlDoc);
}
});
if (-1 == iRet) {
showOPInfo(szDeviceIdentify + " 已登录过!");
}
if (i==ips.length-1){
setTimeout(function() {
clickStartRealPlay1();
}, 1000);
}
/* setTimeout(function() {
console.log(i);
}, (i + 1) * 1000);*/
})(i)
}
通过文档可以查询该 WebVideoCtrl.I_Login接口是登录摄像头使用的,登录成功后可得到该摄像头可以预览的按钮.
在这里遍历登录后最后又调用了一次 clickStartRealPlay1();函数,该函数主要是为了给第一个框框预览使用的,因为通过遍历得到的视频第一个是有问题的(原因不知),如果有知道的可以留言告诉我一声.万分感谢
下面贴出循环遍历调用的函数(也就是预览2 3 4窗口的函数)和只调用一次的函数(窗口1)
// 开始预览
function clickStartRealPlay(szDeviceIdentify,ckId) {
// showOPInfo(szDeviceIdentify + " 进来了3"+"ckId:"+ckId);
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
/* szDeviceIdentify = $("#ip").val(),
iRtspPort = parseInt($("#rtspport").val(), 10),
iChannelID = parseInt($("#channels").val(), 10),
bZeroChannel = $("#channels option").eq($("#channels").get(0).selectedIndex).attr("bZero") == "true" ? true : false,
szInfo = "";
if ("undefined" === typeof iStreamType) {
iStreamType = parseInt($("#streamtype").val(), 10);
}
*/
szInfo = "";
if (null == szDeviceIdentify) {
return;
}
if (null == ckId || "" == ckId) {
return;
}
// showOPInfo(szDeviceIdentify + " 进来了2");
var startRealPlay = function () {
WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
iWndIndex:ckId,
iRtspPort: 554,
iStreamType: 2,
iChannelID: 1,
bZeroChannel: false,
success: function () {
szInfo = "开始预览成功!";
showOPInfo(szDeviceIdentify + " " + szInfo);
},
error: function (status, xmlDoc) {
if (403 === status) {
szInfo = "设备不支持Websocket取流!";
} else {
szInfo = "开始预览失败!";
}
showOPInfo(szDeviceIdentify + " " + szInfo);
}
});
};
if (oWndInfo != null) {// 已经在播放了,先停止
WebVideoCtrl.I_Stop({
success: function () {
startRealPlay();
}
});
} else {
startRealPlay();
}
}
// 开始预览通道1
function clickStartRealPlay1() {
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
/* if ("undefined" === typeof iStreamType) {
iStreamType = parseInt($("#streamtype").val(), 10);
}*/
if (null == szDeviceIdentify) {
return;
}
var startRealPlay = function () {
var ip =ips[0]+'_80'
WebVideoCtrl.I_StartRealPlay(ip, {
iRtspPort: ips[0],
iStreamType: 2,
iChannelID: 1,
bZeroChannel: false,
success: function () {
szInfo = "开始预览成功!";
showOPInfo(szDeviceIdentify + " " + szInfo);
},
error: function (status, xmlDoc) {
if (403 === status) {
szInfo = "设备不支持Websocket取流!";
} else {
szInfo = "开始预览失败!";
}
showOPInfo(szDeviceIdentify + " " + szInfo);
}
});
};
if (oWndInfo != null) {// 已经在播放了,先停止
WebVideoCtrl.I_Stop({
success: function () {
startRealPlay();
}
});
} else {
startRealPlay();
}
}
下面就是我的界面
点击左边的按钮就可以更换新的视频监控.
应广大博友的呼声,将需要下载的文件Demo共享出来