Hikvision webcam video display

Web3.0 development kitThere are demo, there are documents, there are English and Chinese, there are EXE controls. (Limited to browsers, 360 works)

After downloading and running, you will see the following interface

The above functions need to be manually configured. However, in the requirements, you can open the page and see the monitoring screen, so a set of processes need to be completed automatically

• Video automatically login to obtain
• Video frames appear one after another
• There are a total of 10 cameras, which can be rotated to display 4 at a time and the other 4 at intervals

Code process

// Device list
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; // Set a 4 × 4 square
$(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;
	}

	// Divide the one-dimensional array into two-dimensional arrays according to the number of blocks
	let deviceList = oneArrayToTwoArray(deviceListArray)
	let key = 0
	// Automatic login
	clickLogin(deviceList[key])
	// Timer multicast
	setInterval((a)= > {
		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((a)= > {
				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！"); }}Copy the code

Detailed interface descriptions are provided in the documentation

If used in vue, it needs to be introduced in index. HTML because the js control does not support import yet, then use window.webvideoctrl