最近在给公司平台写视频监控的页面需求，于是接触到了海康威视的视频控件，网上查阅一番资料后，发现有很多大佬们给出了简易的海康视频控件的上手方法，但是发现仍然有很多地方没有总结到，于是在这里对我个人对海康控件开发的经验做出一点总结。话不多说现在开始。

运行环境与设备支持

海康控件开发包链接：

32位浏览器：

https://pan.baidu.com/s/160ia40-hlFd1MynbxSBI2Q  密码：d3pf

64位浏览器：

https://pan.baidu.com/s/1TbNHqfZSw9PPS4Z-xYvcoQ  密码：38qq

Web控件V3.0基于ActiveX和NPAPI开发，接口封装于JavaScript脚本，以JavaScript接口形式提供用户集成，支持网页上实现预览、回放、云台控制等功能。该控件仅支持B/S开发，不适用C/S开发。

Web控件V3.0支持多种我司设备，包括DVR、NVR、DVS、网络摄像机、网络球机等，设备需要支持PSIA或ISAPI协议。

该控件所需运行环境：

操作系统:WindowsXP、Windows7、Windows8、Windows8.1（实际上目前Windows10也可以用）

浏览器：

IE8~IE11、Chrome31+、Firefox35+，32位浏览器

IE8~IE11、Chrome31~Chrome44、Firefox35~Firefox51，64位浏览器

（ps：这里其实有很大的坑，浏览器一旦版本位数没有和插件对上，页面显示就会有问题，很多人没看清这点盲目上手就踩在了这一点上）

demo

官方文档给的demo其实有很多我们不需要的方法，这就需要我们二次开发时，有选择的使用他所提供的方法

快速二次开发

其实这方面已经有很多人给过差不多的代码，但我姑且还是在这里放一下简易开发的代码

首先是页面文件，页面需要导入官方的webVideoCtrl.js，建议将该文件放在官方给的codebase文件夹目录下一同导入项目中，运行项目时，该文件会自动寻找同目录下的其他文件。

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <title></title>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.     <meta http-equiv="Pragma" content="no-cache" />
  7.     <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
  8.     <meta http-equiv="Expires" content="0" />
  9.     <script>
  10.         document.write("<link type='text/css' href='css/demo.css?version=" + new Date().getTime() + "' rel='stylesheet' />");
  11.     </script>
  12. </head>
  13. <body>
  14. <div id="divPlugin" class="plugin"></div>
  15. </body>
  16. <script src="jquery-1.7.1.min.js"></script>
  17. <script id="videonode" src="codebase/webVideoCtrl.js"></script>
  18. <script src="test.js"></script>
  19. </html>

接下来是js文件，其中四项参数username，password、ip、port分别对应登录所必须的用户名、密码、设备ip及端口号

  1. // 初始化插件
  2. $(function() {
  3. 	initialValue = new Object();
  4. 	initialValue.g_iWndIndex = 0;
  5. 	initialValue.szDeviceIdentify = '';
  6. 	initialValue.deviceport = '';
  7. 	initialValue.rtspport = '';
  8. 	initialValue.channels = [];
  9. 	/*这里是登录视频插件所需的四项参数*/
  10. 	initialValue.ip = '';
  11. 	initialValue.port = '';
  12. 	initialValue.username = '';
  13. 	initialValue.password = '';
  14. 	t_init(initialValue);
  15. 	t_login(initialValue);
  16. })
  17.  
  18. // 初始化
  19. function t_init(initialValue) {
  20. 	// 检查插件是否已经安装过
  21. 	var iRet = WebVideoCtrl.I_CheckPluginInstall();
  22. 	if (-1 == iRet) {
  23. 		alert("您还未安装过插件，双击开发包目录里的WebComponentsKit.exe安装！");
  24. 		return;
  25. 	}
  26. 	// 初始化插件参数及插入插件
  27. 	WebVideoCtrl.I_InitPlugin(500, 300, {
  28. 		bWndFull: true,
  29. 		iPackageType: 2,
  30. 		iWndowType: 1,
  31. 		cbInitPluginComplete: function() {
  32. 			WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
  33. 		}
  34. 	});
  35. }
  36.  
  37. function t_login(initialValue) {
  38. 	if ("" == initialValue.ip || "" == initialValue.port) {
  39. 		return;
  40. 	}
  41. 	initialValue.szDeviceIdentify = initialValue.ip + "_" + initialValue.port;
  42. 	WebVideoCtrl.I_Login(initialValue.ip, 1, initialValue.port, initialValue.username, initialValue.password, {
  43. 		success: function(xmlDoc) {
  44. 			setTimeout(function() {
  45. 				t_getChannelInfo(initialValue);
  46. 				t_getDevicePort(initialValue);
  47. 			}, 10);
  48. 			setTimeout(function() {
  49. 				t_StartRealPlay(initialValue);
  50. 			}, 500)
  51. 		},
  52. 		error: function(status, xmlDoc) {}
  53. 	});
  54. }
  55.  
  56. // 获取通道
  57. function t_getChannelInfo(initialValue) {
  58. 	initialValue.channels = []
  59. 	if (null == initialValue.szDeviceIdentify) {
  60. 		return;
  61. 	}
  62. 	// 模拟通道
  63. 	WebVideoCtrl.I_GetAnalogChannelInfo(initialValue.szDeviceIdentify, {
  64. 		async: false,
  65. 		success: function(xmlDoc) {
  66. 			var oChannels = $(xmlDoc).find("VideoInputChannel");
  67. 			$.each(oChannels, function(i) {
  68. 				var id = $(this).find("id").eq(0).text(),
  69. 					name = $(this).find("name").eq(0).text();
  70. 				if ("" == name) {
  71. 					name = "Camera " + (i < 9 ? "0" + (i + 1) : (i + 1));
  72. 				}
  73. 				initialValue.channels.push({
  74. 					id: id,
  75. 					name: name
  76. 				})
  77. 			});
  78. 		},
  79. 		error: function(status, xmlDoc) {}
  80. 	});
  81. 	// 数字通道
  82. 	WebVideoCtrl.I_GetDigitalChannelInfo(initialValue.szDeviceIdentify, {
  83. 		async: false,
  84. 		success: function (xmlDoc) {
  85. 			var oChannels = $(xmlDoc).find("InputProxyChannelStatus");
  86.  
  87. 			$.each(oChannels, function (i) {
  88. 				var id = $(this).find("id").eq(0).text(),
  89. 					name = $(this).find("name").eq(0).text(),
  90. 					online = $(this).find("online").eq(0).text()
  91. 				ip = $(this).find("ipAddress").eq(0).text(),
  92. 					port = $(this).find("port").eq(0).text();
  93. 				if ("false" == online) { // 过滤禁用的数字通道
  94. 					return true;
  95. 				}
  96. 				if ("" == name) {
  97. 					name = "IPCamera " + (i < 9 ? "0" + (i + 1) : (i + 1));
  98. 				}
  99. 				var arr = {
  100. 					"id": id,
  101. 					"title": name,
  102. 					"ipaddress": initialValue.szDeviceIdentify
  103. 				};
  104. 				IPaddress.push(arr);
  105. 			});
  106. 			console.log("获取数字通道成功！");
  107. 		},
  108. 		error: function (status, xmlDoc) {
  109. 			console.log("获取数字通道失败！");
  110. 		}
  111. 	});
  112. 	// 零通道
  113. 	WebVideoCtrl.I_GetZeroChannelInfo(initialValue.szDeviceIdentify, {
  114. 		async: false,
  115. 		success: function (xmlDoc) {
  116. 			var oChannels = $(xmlDoc).find("ZeroVideoChannel");
  117.  
  118. 			$.each(oChannels, function (i) {
  119. 				var id = $(this).find("id").eq(0).text(),
  120. 					name = $(this).find("name").eq(0).text();
  121. 				if ("" == name) {
  122. 					name = "Zero Channel " + (i < 9 ? "0" + (i + 1) : (i + 1));
  123. 				}
  124. 				if ("true" == $(this).find("enabled").eq(0).text()) { // 过滤禁用的零通道
  125. 					console.log("id:" + id + ",name:" + name);
  126. 				}
  127. 			});
  128. 			console.log("获取零通道成功！");
  129. 		},
  130. 		error: function (status, xmlDoc) {
  131. 			console.log("获取零通道失败！");
  132. 		}
  133. 	});
  134. }
  135.  
  136. // 获取端口
  137. function t_getDevicePort(initialValue) {
  138. 	if (null == initialValue.szDeviceIdentify) {
  139. 		return;
  140. 	}
  141. 	var oPort = WebVideoCtrl.I_GetDevicePort(initialValue.szDeviceIdentify);
  142. 	if (oPort != null) {
  143. 		initialValue.deviceport = oPort.iDevicePort;
  144. 		initialValue.rtspport = oPort.iRtspPort;
  145. 	}
  146. }
  147.  
  148. // 开始预览
  149. function t_StartRealPlay(initialValue) {
  150. 	var oWndInfo = WebVideoCtrl.I_GetWindowStatus(initialValue.g_iWndIndex),//获取当前窗口的状态
  151. 		iChannelID = initialValue.channels[0].value
  152.  
  153. 	if (null == initialValue.szDeviceIdentify) {
  154. 		return;
  155. 	}
  156.  
  157. 	var startRealPlay = function() {
  158. 		WebVideoCtrl.I_StartRealPlay(initialValue.szDeviceIdentify, {
  159. 			iRtspPort: initialValue.rtspport,
  160. 			iStreamType: 1,
  161. 			iChannelID: iChannelID,
  162. 			bZeroChannel: false,
  163. 			success: function() {},
  164. 			error: function(status, xmlDoc) {
  165. 				if (403 === status) {} else {}
  166. 			}
  167. 		});
  168. 	};
  169.  
  170. 	if (oWndInfo != null) { // 已经在播放了，先停止
  171. 		WebVideoCtrl.I_Stop({
  172. 			success: function() {
  173. 				startRealPlay();
  174. 			}
  175. 		});
  176. 	} else {
  177. 		startRealPlay();
  178. 	}
  179. }

错误总结

首先，还是再强调一点，海康威视的插件时根据浏览器位数来的，而不是根据电脑系统位数，比如你用的64位系统，装的32位浏览器，使用插件时就必须要使用32位插件。海康威视WEB3.0多版本开发控件中包含官方控件：CH_32位、CH_64位、以及CN_64位。其中还包含官方指定的测试浏览器火狐浏览器多版本，4.00/45.0/50.0.1  IE浏览器IE7  32位、64位，所以在进行二次开发时，一定要注意插件版本于浏览器是否适配的问题。

（1）页面控制台报错:/ISAPI/Security/sessionLogin/capabilities?username=admin Failed to load resource: the server responded with a status of 404 (Not Found)

　　  解决方法：引用js是否有问题，查看页面js是否引入路径，是否全面正确。

　　　　　　    使用的浏览器是否正确，仔细查阅官方注意事项中要求使用的浏览器。

　　　　　　    如果排查没有上述错误，而且你使用的nginx，请查看压缩文件中的nginx文件，配置你的nginx.conf内容，可以试着加上这一段，实现路径的跳转

  1. location ~ /ISAPI|SDK/ {
  2.  
  3.     if ($http_cookie ~ "webVideoCtrlProxy=(.+)") {
  4.  
  5.            proxy_pass http://$cookie_webVideoCtrlProxy;
  6.  
  7.             break;
  8.  
  9.     }
  10.  
  11. }

　　

（2）控制台报错：TypeError: c.HWP_GetLocalConfig is not a function

　　  解决方法：这个报错的原因是因为浏览器没有激活插件，将其激活就行了。

（3）demo操作信息报错：设备不支持Websocket取流！

　     demo操作信息及控制台同时报错：403错误

　　  解决方法：请换个浏览器。。。。。。请使用官方文档给出的浏览器

（4）demo操作信息：获取零通道失败！(403, invalidOperation)

　　　　　　　　　    获取数字通道失败！(403, invalidOperation)

　　　　　　　　　    获取模拟通道成功

　　　　　　　　　    登录成功

　　  解决方法：如果只是操作界面报错而控制台没有报错，点击开始预览便能看到视频了。。。

最后

刚开始进行二次开发海康控件时走了不少弯路，光顾着网上找资源了，忽略了官方文档的查阅，现在回头看来是浪费了不少时间。这篇博文作为我入职以来第一篇博文，对我来说也有着深刻警醒的意义，希望今后的我也能保持初心，时刻关注着技术，警醒自己不要止步、安于现状。

海康威视Web3.0控件个人开发经验及问题总结的更多相关文章

  1. 微软 microsoft calendar control 11.0 控件下载

    微软 microsoft calendar control  11.0 控件下载 https://files.cnblogs.com/files/mqingqing123/csccal2.rar

  2. UiAutomator2.0 - 控件实现点击操作原理

    目录 一.UiObject 二.UiObject2 穿梭各大技术博客网站,每天都能看到一些的新的技术.突然感觉UiAutomator 2.0相对于现在来说已经是个很久远的东西了ε=(´ο｀*))).写 ...

  3. vs2005中microsoft ado data control 6.0控件问题

    在vs2005中是没有这个控件的,需要注册,步骤如下: 1. 先到C:\WINDOWS\system32目录下看看你的系统里是否已经有了MSADODC.ocx和MSDATGRD.ocx这两个文件(多半 ...

  4. 自定义圆形控件 RoundImageView

    1.自定义圆形控件 RoundImageView package com.ronye.CustomView; import android.content.Context; import androi ...

  5. 重新想象 Windows 8.1 Store Apps (77) - 控件增强: 文本类控件的增强, 部分控件增加了 Header 属性和 HeaderTemplate 属性, 部分控件增加了 PlaceholderText 属性

    [源码下载] 重新想象 Windows 8.1 Store Apps (77) - 控件增强: 文本类控件的增强, 部分控件增加了 Header 属性和 HeaderTemplate 属性, 部分控件 ...

  6. 【VB技巧】VB ListView 控件功能使用详解

    来源:http://lcx.cc/?i=494 ListView控件 在工具箱上击鼠标右键,选择快捷菜单的Components(部件)项,在控件列表中选择Microsoft Windows Commo ...

  7. Silverlight Visifire控件 .net后台控制aspx页面控件的显示与隐藏，动态给控件赋值，选定默认值的设定

    .net后台代码: 控件的显示与隐藏: this.dateStart.Visibility = Visibility.Collapsed;//不显示控件 this.dateYear.Visibilit ...

  8. Flex自定义组件开发之日周月日期选择日历控件

    原文:Flex自定义组件开发之日周月日期选择日历控件         使用过DateField的我们都知道,DateField 控件是用于显示日期的文本字段,字段右侧带有日历图标.当用户在控件边框内的 ...

  9. WebBrowser控件使用详解

    原文:WebBrowser控件使用详解 方法 说明 GoBack 相当于IE的“后退”按钮,使你在当前历史列表中后退一项 GoForward 相当于IE的“前进”按钮,使你在当前历史列表中前进一项 G ...

随机推荐

  1. 第七届蓝桥杯javaB组真题解析-剪邮票（第七题）

    题目 /* 剪邮票 如[图1.jpg], 有12张连在一起的12生肖的邮票. 现在你要从中剪下5张来,要求必须是连着的. (仅仅连接一个角不算相连) 比如,[图2.jpg],[图3.jpg]中,粉红色 ...

  2. 区间树Splay——[NOI2005]维护数列

    无指针Splay超详细讲解 区间树这玩意真TM玄学. 学这东西你必须要拥有的 1.通过[模板]文艺平衡树(Splay),[模板]普通平衡树,GSS3 - Can you answer these qu ...

  3. Primecoin服务端更新--操作流程

    Primecoin服务端更新流程:  一.下载更新文件primecoin_x.y.z_xx.zip到/servers目录下:这里是把:版本primecoin0161alpha1更新到:版本primec ...

  4. Unity表面着色器

    表面着色器和之前无光照着色器不同,其中没有顶点着色器和片元着色器,而增加了光照函数: 接下写了一个求两个贴图的光照效果 两个贴图做插值运算: Shader "Custom/SurfaceSh ...

  5. Linux Kernel 5.5 最终删除 SYSCTL 系统调用

    导读 Linux Kernel 5.5 最终消除了支持sysctl系统调用的代码,该代码已被弃用了大约十年,目前对任何体系结构的现代系统都没有影响. 长期以来,Linux sysctl系统调用都不建议 ...

  6. gcd && exgcd算法

    目录 欧几里德算法与扩展欧几里德算法 1.欧几里德算法 2.扩展欧几里德算法 欧几里德算法与扩展欧几里德算法 1.欧几里德算法 #include<bits/stdc++.h> using ...

  7. HTML table表头排序箭头绘制法【不用箭头图片】

    效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="ut ...

  8. bat批处理下如何像shell一样将命令执行的效果赋值给变量

    在bat下如何实现像shell一样,把执行命令行后的结果赋值给变量呐? 刚开始,可真难为到我了.随着对bat批处理知识熟悉的加深. 学习到了!!! 举个 栗子: svnlook  uuid  C:\R ...

  9. Android 学习笔记四：创建工具栏按钮

    原文:http://blog.csdn.net/lihongxun945/article/details/48951199 前面我们已经可以在一个Activity中添加一些按钮之类的组件.由于手机的屏 ...

  10. ORACLE A表字段更改为B表的字段

    UPDATE IM_PARA_CHECK_DATA_NEW A SET (OPERASTATE, COVER_TYPE, COVER_PRO, WORK_BAND, DEVICE_TYPE) =(SE ...