海康视频监控二次开发基于B/S架构

最新推荐文章于 2025-06-17 15:41:07 发布

KyrieCao

最新推荐文章于 2025-06-17 15:41:07 发布

阅读量1.2w

点赞数 12

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： webVideoCtrl

本文链接：https://blog.youkuaiyun.com/qq_22067469/article/details/86479513

前言

最近做了一个音视频监控模块，是基于海康的视频平台进行的，今天将一些基本的使用分享给大家。

环境准备

由于调用视频监控需要安装一个插件WebComponentsKit.exe，链接: https://pan.baidu.com/s/1RCQxh8ZjXTiHjohLYAVxKw 提取码: s58a，注意此控制不支持高版本的chrome，我这里使用的是360浏览器8.1.1。

视频监控

界面展示

示例代码

由于此api是基于jquery开发的，所以需要引入jquery，版本不要求，还需要引入一个核心jswebVideoCtrl.js，所有的功能都是来自于它，所以必不可少，后面会附加一个更详细的demo。

初始化代码

html

<!doctype html>
<html>
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="left">
	<div id="divPlugin" class="plugin"></div>
</body>
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/webVideoCtrl.js"></script>
<script src="js/demo.js"></script>
</html>

demo.js

// 初始化插件
// 全局保存当前选中窗口
var g_iWndIndex = 0; //可以不用设置这个变量，有窗口参数的接口中，不用传值，开发包会默认使用当前选择窗口
$(function () {
   
   
	// 检查插件是否已经安装过
    var iRet = WebVideoCtrl.I_CheckPluginInstall();
	if (-2 == iRet) {
   
   
		alert("您的Chrome浏览器版本过高，不支持NPAPI插件！");
		//window.open('WebComponentsKit.exe');
		return;
	} else if (-1 == iRet) {
   
   
      //  alert("您还未安装过插件，双击开发包目录里的WebComponentsKit.exe安装！");
		if(window.confirm('您还未安装过插件，确定要下载WebComponentsKit.exe安装吗？')){
   
   
                 window.open('WebComponentsKit.exe');
                 return true;
              }else{
   
   
                 //alert("取消");
                 return false;
             }
		return;
    }
	
	// 初始化插件参数及插入插件
	WebVideoCtrl.I_InitPlugin(600, 400, {
   
   
        bWndFull: true,//是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
		iWndowType:2,
		cbSelWnd: function (xmlDoc) {
   
   
			g_iWndIndex = $(xmlDoc).find("SelectWnd").eq(0).text();
			var szInfo = "当前选择的窗口编号：" + g_iWndIndex;
			console.log(g_iWndIndex);
			console.log(szInfo);
			showCBInfo(szInfo);
		}
	});
	WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
	// 检查插件是否最新
	if (-1 == WebVideoCtrl