海康威视Web3.0控件个人开发经验及问题总结

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

运行环境与设备支持

海康控件开发包链接：

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文件夹目录下一同导入项目中，运行项目时，该文件会自动寻找同目录下的其他文件。