前端使用海康WEB播放器插件，播放摄像头监控视频

最新推荐文章于 2025-04-01 18:16:38 发布

panpanpanqvq

最新推荐文章于 2025-04-01 18:16:38 发布

阅读量1.6w

点赞数 10

文章标签： javascript

本文链接：https://blog.csdn.net/panpanpanqvq/article/details/117472926

版权

本文介绍了如何在前端使用海康官方的WEB播放器插件来播放H265编码的摄像头监控视频。相较于之前的cyberplayer和EasyPlayer，海康的插件提供更流畅的播放体验，且支持全屏和四宫格显示。通过引入必要的JS文件并初始化播放器，可以实现监控视频的顺利播放和切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基于海康的WEB播放器插件，实现海康摄像头播放功能

之前的文章中有过前端播放直播或者监控视频，用过两个播放器，一个是前面有教程的cyberplayer百度智能云提供的WEB播放器，实现了功能，后来又用了EasyPlayer播放器也实现了，为啥要换呢，因为百度的播放器不支持H265编码格式，只能播H264的，EasyPlayer官方说明支持H265编码。现在用的海康官方的WEB播放器插件，这个就不是播流了，传每个摄像头的IndexCode播放监控,

海康的插件下载地址https://open.hikvision.com/download/5c67f1e2f05948198c909700?type=10
在这里插入图片描述

先看下实现的效果：
在这里插入图片描述
跟之前的文章里的样子效果一样，就是下面的播放监控换成海康提供的插件，播放流畅了许多，也不卡顿了。也可全屏四宫格和放大单独一个，
引入必要JS文件，插件JS

<script src="./js/jsencrypt.min.js"></script>
<script src="./js/jsWebControl-1.0.0.min.js"></script>
<script src="./js/jquery.min.js"></script>

 <div id="playWnd" class="playWnd player"></div>//播放器容器

重点代码：

var oWebControl = null;// 插件对象
var bIE = (!!window.ActiveXObject || 'ActiveXObject' in window);// 是否为IE浏览器
var pubKey = '';
var initCount = 0;
var ele = document.getElementById('playWnd');//父元素宽
var widtH = ele.offsetWidth;
var off = document.getElementById('setHeight');//爷元素高
var heighT = off.offsetHeight;
console.log(ele.offsetWidth)
console.log(off.offsetHeight)

function UpdateMultiPlayValue() {
	var sel = document.getElementById("isMultiPlay");
	var selectedId = sel.selectedIndex;
	var v = sel.options[selectedId].value;
	if (1 == v) {
		document.getElementById("multiPlayWndIds").style.display = "";//显示
	} else {
		document.getElementById("multiPlayWndIds").style.display = "none";//隐藏
	}
}

function UpdateStopPlayValue() {
	var sel = document.getElementById("stopMode");
	var selectedId = sel.selectedIndex;
	var v = sel.options[selectedId].value;
	if (1 == v) {
		document.getElementById("multiStopPlayWndIds").style.display = "";//显示
	} else {
		document.getElementById("multiStopPlayWndIds").style.display = "none";//隐藏
	}
}

function UpdateValue() {
	var sel = document.getElementById("isHttps");
	var selectedId = sel.selectedIndex;
	var v = sel.options[selectedId].value;
	if (0 == v) {
		document.getElementById("port").value = 80;
	}
	else {
		document.getElementById("port").value = 443;
	}
}

function UpdatePlayTypeValue() {
	var sel = document.getElementById("PlayType");
	var selectedId = sel.selectedIndex;
	var v = sel.options[selectedId].value;
	if (2 == v) {
		//获取布局，并显示标签和窗口选择下拉框
		document.getElementById("PreviewWndId").style.display = "";//显示
		oWebControl.JS_RequestInterface({
			funcName: "getLayout"
		}).then(function (oData) {
			//分析窗口数
			//{"errorCode":0,"errorModule":0,"responseMsg":{"code":0,"data":"{\n    \"layout\": \"2x2\",\n    \"wndNum\": 4\n}\n"},"sequence":"93298475-03d0-49c9-bc3a-a94ec696f983","uuid":"{c76078b4-4f19-4198-b68d-83df1d3d71a9}"}

			//"{\n    \"layout\": \"2x2\",\n    \"wndNum\": 4\n}\n"
			var Data = JSON.stringify(oData.responseMsg.data);
			//"{    \"layout\": \"2x2\",    \"wndNum\": 4}"
			Data = Data.replace(/\\n/g, "");
			//"{    "layout": "2x2",    "wndNum": 4}"
			Data = Data.replace(/\\/g, "");
			//{    "layout": "2x2",    "wndNum": 4}"
			Data = Data.replace(/\"{/g, "{");
			//{    "layout": "2x2",    "wndNum": 4}"
			Data = Data.replace(/}\"/g, "}");
			var DataNum = JSON.parse(Data).wndNum;

			createSelectOption(DataNum);
		});
	}
	else {
		//隐藏标签和窗口选择下拉框
		document.getElementById("PreviewWndId").style.display = "none";//隐藏
	}
}

function createSelectOption(wndNum) {
	var _html = "";
	//先清空之后再添加
	$("#playWndId").empty();
	for (var _i = 0; _i < wndNum; _i++) {
		_html = _html + "<option value='" + (_i + 1) + "'>" + (_i + 1) + "</option>";
	}
	$("#playWndId").append(_html);
}

function UpdateSnapTypeValue() {
	var sel = document.getElementById("SnapType");
	var selectedId = sel.selectedIndex;
	var v = sel.options[selectedId].value;
	if (1 == v) {
		//获取布局，并显示标签和窗口选择下拉框
		document.getElementById("SnapShotWndId").style.display = "";//显示
		oWebControl.JS_RequestInterface({
			funcName: "getLayout"
		}).then(function (oData) {
			//分析窗口数
			var Data = JSON.stringify(oData.responseMsg.data);
			Data = Data.replace(/\\n/g, "");
			Data = Data.replace(/\\/g, "");
			Data = Data.replace(/\"{/g, "{");
			Data = Data.replace(/}\"/g, "}");
			var DataNum = JSON.parse(Data).wndNum;

			createSnapSelectOption(DataNum);
		});
	}
	else {
		//隐藏标签和窗口选择下拉框
		document.getElementById("SnapShotWndId").style.display = "none";//隐藏
	}
}

function createSnapSelectOption(wndNum) {
	var _html = "";
	//先清空之后再添加
	$("#SnapWndId").empty();
	for (var _i = 0; _i < wndNum; _i++) {
		_html = _html + "<option value='" + (_i + 1) + "'>" + (_i + 1) + "</option>";
	}
	$("#SnapWndId").append(_html);
}

function UpdateSetOSDTypeValue() {
	var sel = document.getElementById("SetOSDType");
	var selectedId = sel.selectedIndex;
	var v = sel.options[selectedId].value;
	if (1 == v) {
		//获取布局，并显示标签和窗口选择下拉框
		document.getElementById("SetOSDWndId").style.display = "";//显示
		oWebControl.JS_RequestInterface({
			funcName: "getLayout"
		}).then(function (oData) {
			//分析窗口数
			var Data = JSON.stringify(oData.responseMsg.data);
			Data = Data.replace(/\\n/g, "");
			Data = Data.replace(/\\/g, "");
			Data = Data.replace(/\"{/g, "{");
			Data = Data.replace(/}\"/g, "}");
			var DataNum = JSON.parse(Data).wndNum;

			createSetOSDSelectOption(DataNum);
		});
	}
	else {
		//隐藏标签和窗口选择下拉框
		document.getElementById("SetOSDWndId").style.display = "none";//隐藏
	}
}

function createSetOSDSelectOption(wndNum) {
	var _html = "";
	//先清空之后再添加
	$("#osdWndId").empty();
	for (var _i = 0; _i < wndNum; _i++) {
		_html = _html + "<option value='" + (_i + 1) + "'>" + (_i + 1) + "</option>";
	}
	$("#osdWndId").append(_html);
}

// 标签关闭
$(window).unload(function () {
	if (oWebControl != null) {
		oWebControl.JS_HideWnd();  // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
		oWebControl.JS_Disconnect().then(function () { }, function () { });
	}
});

// 窗口resize
$(window).resize(function () {
	if (oWebControl != null) {
		oWebControl.JS_Resize(widtH, heighT);
		setWndCover();
	}
});

// 滚动条scroll
$(window).scroll(function () {
	if (oWebControl != null) {
		oWebControl.JS_Resize(widtH, heighT);
		setWndCover();
	}
});

// 设置窗口裁剪，当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口
function setWndCover() {
	var iWidth = $(window).width();
	var iHeight = $(window).height();
	var oDivRect = $("#playWnd").get(0).getBoundingClientRect();

	var iCoverLeft = (oDivRect.left < 0) ? Math.abs(oDivRect.left) : 0;
	var iCoverTop = (oDivRect.top < 0) ? Math.abs(oDivRect.top) : 0;
	var iCoverRight = (oDivRect.right - iWidth > 0) ? Math.round(oDivRect.right - iWidth) : 0;
	var iCoverBottom = (oDivRect.bottom - iHeight > 0) ? Math.round(oDivRect.bottom - iHeight) : 0;

	iCoverLeft = (iCoverLeft > 800) ? 800 : iCoverLeft;
	iCoverTop = (iCoverTop > 400) ? 400 : iCoverTop;
	iCoverRight = (iCoverRight > 800) ? 800 : iCoverRight;
	iCoverBottom = (iCoverBottom > 400) ? 400 : iCoverBottom;

	oWebControl.JS_RepairPartWindow(0, 0, 801, 400);  // 多1个像素点防止还原后边界缺失一个像素条
	if (iCoverLeft != 0) {
		oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 400);
	}
	if (iCoverTop != 0) {
		oWebControl.JS_CuttingPartWindow(0, 0, 801, iCoverTop);  // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
	}
	if (iCoverRight != 0) {
		oWebControl.JS_CuttingPartWindow(800 - iCoverRight, 0, iCoverRight, 400);
	}
	if (iCoverBottom != 0) {
		oWebControl.JS_CuttingPartWindow(0, 400 - iCoverBottom, 800, iCoverBottom);
	}
}

// 初始化插件
function initPlugin() {
	oWebControl = new WebControl({
		szPluginContainer: "playWnd",
		iServicePortStart: 15900,
		iServicePortEnd: 15909,
		szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11",   // 用于IE10使用ActiveX的clsid
		cbConnectSuccess: function () {
			initCount = 0;
			setCallbacks();
			oWebControl.JS_StartService("window", {
				dllPath: "./VideoPluginConnect.dll"
			}).then(function () {
				oWebControl.JS_CreateWnd("playWnd", 800, 400).then(function () {
					console.log("JS_CreateWnd success");
				});
			}, function () {

			});
		},
		cbConnectError: function () {
			console.log("cbConnectError");
			oWebControl = null;
			$("#playWnd").html("插件未启动，正在尝试启动，请稍候...");
			WebControl.JS_WakeUp("VideoWebPlugin://");
			initCount++;
			if (initCount < 3) {
				setTimeout(function () {
					initPlugin();
				}, 3000)
			} else {
				$("#playWnd").html("插件启动失败，请检查插件是否安装！");
			}
		},
		cbConnectClose: function (bNormalClose) {
			// 异常断开：bNormalClose = false
			// JS_Disconnect正常断开：bNormalClose = true
			console.log("cbConnectClose");
			oWebControl = null;
		}
	});
}

initPlugin();


// 获取公钥
function getPubKey(callback) {
	// pubKey = "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC6nxNdtHShP1QHDxlsaNU4+XM+mXVJw5MC2X6Dj5ND5Ce+Pj4Pu1PsXFEvpfmErO5phqh+rTa7fGXqT/anF3jogG734+mIO7XP9Dcb9nPE7Yw4/VLXk0NT/Fh3NZjF3OhZa+aGgNcRIZx7f2YHIondw+oZtEWKAnnsStOSNkDcxwIDAQAB";
	// callback()
	oWebControl.JS_RequestInterface({
		funcName: "getRSAPubKey",
		argument: JSON.stringify({
			keyLength: 1024
		})
	}).then(function (oData) {
		console.log(oData)
		if (oData.responseMsg.data) {
			pubKey = oData.responseMsg.data
			callback()
		}
	})
}


// 设置窗口控制回调
function setCallbacks() {
	oWebControl.JS_SetWindowControlCallback({
		cbIntegrationCallBack: cbIntegrationCallBack
	});
}

// 推送消息
function cbIntegrationCallBack(oData) {
	showCBInfo(JSON.stringify(oData.responseMsg));
}

// RSA加密
function setEncrypt(value) {
	var encrypt = new JSEncrypt();
	encrypt.setPublicKey(pubKey);
	return encrypt.encrypt(value);
}

// 初始化
$("#init").click(function () {
	console.log('初始化')
	getPubKey(function () {
		var appkey = 'xxxxxxx';//必要参数，从海康平台拿
		var secret = setEncrypt('xxxxxxxx');//必要参数，从海康平台拿
		var ip = '你的ip';
		var szPort = $("#port").val();//端口433
		var snapDir = $("#snapDir").val();//参数都在下面有html代码
		var videoDir = $("#videoDir").val();
		var layout = $("#layout").val();
		var encryptedFields = ['secret'];
		var szShowToolbar = $("#isShowToolbar").val();
		var szShowSmart = $("#isShowSmart").val();
		var btIds = $("#btId").val();
		var rectTimes = $("#reconnectTimes").val();
		var rectDuration = $("#duration").val();

		var sel = document.getElementById("language");
		var selectedId = sel.selectedIndex;
		var v = sel.options[selectedId].value;
		var language = "zh_CN&

最低0.47元/天解锁文章