海康威視視頻監控對接（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