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