海康威视摄像头在web端视频展示
web3.0开发包 中有demo,有文档,有中英文版,有exe控件。(对浏览器有限制,360能用)
下载运行后看到如下界面
填写自己的设备信息,用户名密码,点击登陆,点击预览按钮,即可实现预览功能。以上功能需要自己手动点击配置,然而需求中都是打开页面自己看到监控画面,所以一套流程需要自动完成
- 视频自动登陆获取
- 视频画面一个接一个依次出现
- 总10个摄像头,可轮播一次展示4个,隔段时间展示另四个
代码流程
// 设备列表
var deviceListArray = [
{
szIP: '172.16.77.100',
szPort: '80',
szUsername: 'admin',
szPassword: '*****'
},
{
szIP: '172.16.77.100',
szPort: '80',
szUsername: 'admin',
szPassword: '*****'
},
{
szIP: '172.16.77.100',
szPort: '80',
szUsername: 'admin',
szPassword: '*****'
},
{
szIP: '172.16.77.100',
szPort: '80',
szUsername: 'admin',
szPassword: '*****'
},
{
szIP: '172.16.77.102',
szPort: '80',
szUsername: 'admin',
szPassword: '*****'
},
{
szIP: '172.16.77.102',
szPort: '80',
szUsername: 'admin',
szPassword: '*****'
},
{
szIP: '172.16.77.102',
szPort: '80',
szUsername: 'admin',
szPassword: '*****'
},
{
szIP: '172.16.77.102',
szPort: '80',
szUsername: 'admin',
szPassword: '*****'
},
{
szIP: '172.16.77.103',
szPort: '80',
szUsername: 'admin',
szPassword: '*****'
},
{
szIP: '172.16.77.103',
szPort: '80',
szUsername: 'admin',
szPassword: '*****'
},
{
szIP: '172.16.77.103',
szPort: '80',
szUsername: 'admin',
szPassword: '*****'
},
{
szIP: '172.16.77.103',
szPort: '80',
szUsername: 'admin',
szPassword: '*****'
}
]
// Init plugin
// overall save the current selected window
var g_iWndIndex = 0; //don't have to set the variable; default to use the current selected window without transmiting value when the interface has window parameters
var iWndowType = 2; //设置4*4方格
$(function () {
// check the installation status of plugin
if (-1 == WebVideoCtrl.I_CheckPluginInstall()) {
alert(" If the plugin is uninstalled, please install the WebComponents.exe!");
return;
}
// Init plugin parameters and insert the plugin
WebVideoCtrl.I_InitPlugin('100%', '100%', {
iWndowType: iWndowType,
cbSelWnd: function (xmlDoc) {
g_iWndIndex = $(xmlDoc).find("SelectWnd").eq(0).text();
}
});
WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
// check plugin to see whether it is the latest
if (-1 == WebVideoCtrl.I_CheckPluginVersion()) {
alert("Detect the latest version, please double click WebComponents.exe to update!");
return;
}
// 将一维数组按区块个数分割成二维数组
let deviceList = oneArrayToTwoArray(deviceListArray)
let key = 0
// 自动登陆
clickLogin(deviceList[key])
// 定时器轮播
setInterval(() => {
key++
if (key >= deviceList.length) {
key = 0
}
clickLogin(deviceList[key])
}, 9000)
});
function oneArrayToTwoArray (deviceListArray) {
let twoArray = []
let oneArray = []
let len = iWndowType * iWndowType
for (let b = 0; b < deviceListArray.length; b++) {
if (b % len == 0) {
oneArray = []
}
oneArray.push(deviceListArray[b])
if (b % len == (len - 1)) {
twoArray.push(oneArray)
}
}
return twoArray
}
// login
function clickLogin(deviceList) {
for (let i = 0; i < deviceList.length; i++) {
let index = deviceList[i]
if ("" == index.szIP || "" == index.szPort) {
continue;
}
var iRet = WebVideoCtrl.I_Login(index.szIP, 1, index.szPort, index.szUsername, index.szPassword, {
success: function (xmlDoc) {
console.log(index.szIP + " login success!");
setTimeout(function () {
clickStartRealPlay(index.szIP, i);
}, 100);
},
error: function () {
console.log(index.szIP + " login failed!");
}
});
if (-1 == iRet) {
console.log(index.szIP + " login already !");
setTimeout(() => {
clickStartRealPlay(index.szIP, i);
}, 100);
}
}
}
// strat real play
function clickStartRealPlay(szIP, g_iWndIndex) {
let oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex)
if ("" == szIP) {
return;
}
if (oWndInfo != null) {// stop first
WebVideoCtrl.I_Stop(g_iWndIndex);
}
let iRet = WebVideoCtrl.I_StartRealPlay(szIP, {
iWndIndex: g_iWndIndex
});
if (0 == iRet) {
console.log("start real play success!");
} else {
console.log("start real play failed!");
}
}
复制代码
文档中有详细的接口说明
如在vue中使用,则需在index.html中引入,因为这个控件js还不支持import导入,然后使用时window.WebVideoCtrl