阅读 736

海康威视视频监控对接(web3.0控件)

海康威视摄像头在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

关注下面的标签,发现更多相似文章
评论