最近一个vue的项目里面需要呈现某现场的实时视频，组里购买了一组海康威视的网络摄像头，是那种带CS端管理程序的，通过ip，port，用户名，密码登录摄像头，但是不知道如何应用到web项目中。查找资料后，我在网上找到一个web控件开发包，于是在此基础上进行开发，实现vue项目需要的功能。

20210524更新

海康威视出了 3.2 版本的 web 插件，可以支持高版本 Chrome了，需要调试海康的友友们的福音！地址看下面！我没用过，但是思路应该是差不多的！

https://open.hikvision.com/download/5cda567cf47ae80dd41a54b3?type=10&id=4c945d18fa5f49638ce517ec32e24e24

熟悉demo程序

打开这个web控件开发包的文档，可以看到，这个控件是利用ActiveX控件和NPAPI实现的。IE上用ActiveX控件，Chrome基于NPAPI实现，并且需要安装codebase目录下的WebComponentsKit.exe插件。这里我们可以了解到，该控件不适用于高版本Chrome浏览器，这是一个很不爽的地方。不过目前还没有找到其他合适的方案，也只能试试这个方案了。

打开demo目录下的index.html，我们可以看到它支持的功能还是很多的。

而我并不需要这么多功能，只需要能把网络摄像头的画面呈现在项目页面上就好了。

定制开发

遇到的问题： 一开始也没有熟读这个控件的demo源码，就想着把从初始化到登录，再到预览这部分功能截取出来移植到Vue项目里就好。然而在裁剪代码的过程出现了各种报错，尝试定位错误的过程浪费了不少时间。

解决方法： 之后想到的方法是，把demo中的多余的功能一个一个去掉，在此过程中要观察demo是否可以正常登录和预览画面。最后的demo中我只保留了从初始化到登录以及预览这部分的代码。这个过程下来，我对这部分的js逻辑也是比较清楚了，最终也是顺利地移植到Vue项目中。

代码分享

移植的这部分代码我封装成了一个webVideo,js文件，供页面调用。

而在页面中，首先需要引入该js文件

import { WebVideo } from '@/assets/js/webVideo.js'

然后需要在mounted方法中进行初始化对象

this.webVideo = new WebVideo()

最后在打开dialog显示视频的位置调用init方法和clickLogin方法(我在clickLogin方法的成功回调函数中调用获取频道信息和设备端口的方法，并在这之后调用了预览方法)。

// 显示视频dialog
this.videoBoxVisible = true
// nextTick回调中调用init和clickLogin
this.$nextTick(() => {this.webVideo.init()this.webVideo.clickLogin()
})

最终可以看到摄像头画面啦，算是有了成果！

有朋友留言说想看一下这个js文件的写法，这里分享一下。有时候不能及时看到评论，见谅

// 初始化插件
export function WebVideo() {this.g_iWndIndex = 0this.szDeviceIdentify = ''this.deviceport = ''this.deviceport = ''this.channels = []this.ip = '172.29.3.101'this.port = '80'this.username = 'admin'this.password = '123456'this.init = function() {var self = this// 检查插件是否已经安装过var iRet = WebVideoCtrl.I_CheckPluginInstall();if (-1 == iRet) {alert("您还未安装过插件，双击开发包目录里的WebComponentsKit.exe安装！");return;}// 初始化插件参数及插入插件WebVideoCtrl.I_InitPlugin('100%', '100%', {bWndFull: true,iPackageType: 2,iWndowType: 1,cbInitPluginComplete: function () {WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");}});}// 登录this.clickLogin = function () {var self = thisif ("" == self.ip || "" == self.port) {return;}self.szDeviceIdentify = self.ip + "_" + self.port;WebVideoCtrl.I_Login(self.ip, 1, self.port, self.username, self.password, {success: function (xmlDoc) {        setTimeout(function () {self.getChannelInfo();self.getDevicePort();}, 10);setTimeout(function() {self.clickStartRealPlay()}, 500)},error: function (status, xmlDoc) {}});}// 退出this.clickLogout = function() {var self = thisif (null == self.szDeviceIdentify) {return;}var iRet = WebVideoCtrl.I_Logout(self.szDeviceIdentify);if (0 == iRet) {self.getChannelInfo();self.getDevicePort();}}// 获取通道this.getChannelInfo = function() {var self = thisself.channels = []if (null == self.szDeviceIdentify) {return;}// 模拟通道WebVideoCtrl.I_GetAnalogChannelInfo(self.szDeviceIdentify, {async: false,success: function (xmlDoc) {var oChannels = $(xmlDoc).find("VideoInputChannel");$.each(oChannels, function (i) {var id = $(this).find("id").eq(0).text(),name = $(this).find("name").eq(0).text();if ("" == name) {name = "Camera " + (i < 9 ? "0" + (i + 1) : (i + 1));}self.channels.push({id: id,name: name})});},error: function (status, xmlDoc) {}});}// 获取端口this.getDevicePort = function() {var self = thisif (null == self.szDeviceIdentify) {return;}var oPort = WebVideoCtrl.I_GetDevicePort(self.szDeviceIdentify);if (oPort != null) {self.deviceport = oPort.iDevicePort;self.deviceport = oPort.iRtspPort;}}// 开始预览this.clickStartRealPlay = function() {var self = thisvar oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex),iChannelID = self.channels[0].valueif (null == self.szDeviceIdentify) {return;}var startRealPlay = function () {WebVideoCtrl.I_StartRealPlay(self.szDeviceIdentify, {iRtspPort: self.deviceport,iStreamType: '1',iChannelID: iChannelID,bZeroChannel: false,success: function () {},error: function (status, xmlDoc) {if (403 === status) {} else {}}});};if (oWndInfo != null) {// 已经在播放了，先停止WebVideoCtrl.I_Stop({success: function () {startRealPlay();}});} else {startRealPlay();}}// 停止预览this.clickStopRealPlay = function() {var self = thisvar oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex)if (oWndInfo != null) {WebVideoCtrl.I_Stop({success: function () {},error: function () {}});}}
}

2018年12月1日补充
很多人都有报错的情况，请检查下是否在index.html中引用了这个js，这个js来源于Web控件开发包。

<script type="text/javascript" id="videonode" src="static/webVideoCtrl.js"></script>

对了,还有一个jsPlugin-1.0.0.min.js也需要放在static目录下，但是不需要在index.html引用，因为webVideoCtrl.js会主动去调用同目录下的jsPlugin-1.0.0.min.js。

我能补充的坑大概就这些了吧，因为这个项目也过去很久了，我用到的功能也真的少，对于不能答复大家太多深入的问题，我感到抱歉。

开发包64位下载地址
链接：https://pan.baidu.com/s/19uCuu838TwP-OBqWqo-MPw
提取码：futg

开发包32位下载地址
链接：https://pan.baidu.com/s/1byAij-cStvoYhS9SlV5dDw
提取码：f24r

海康威视web控件开发的正确姿势相关推荐

web控件开发系列(四) 自定义控件属性(下)
控件在WEB开发时经常要用到,虽然有部分已经存在工具箱里,但有时总需要根据自己的要求,开发一些合适自己的控件.接上一节,已经说过了控件的属性, 例如,我们需要一组属性的集合时,这时我们需要用到的就是复 ...
海康威视视频ocx控件开发总结
因工作需要,需要开发一个海康威视的视频ocx控件,嵌入到intouch,组态王一类的组态软件中使用. 之前从没做过ocx控件的开发,连MFC的开发也没做过,折腾了几天,终于基本完成.记录一下这个过程. ...
探讨ASP.NET 2.0中的Web控件改进技术(3)
当你最开始在Visual Studio 2005中使用Windows表单控件或是ASP.NET Web控件时,你首先会注意到,在许多控件右上角出现一个箭头形状的小玩意儿(见图2中的示例).点击这个箭头 ...
探讨ASP.NET2.0的Web控件改进之概述
作者: 朱先忠编译一. 引言到目前为止,你可能已经了解了大量的ASP.NET 2.0新特征-母版页面,主题,提供者,等等--所有这样内容都相当精彩:但是,你是否了解到有关定制Web控件开发方面的重 ...
探讨ASP.NET2.0中的Web控件改进技术
全面探讨ASP.NET 2.0中的Web控件改进技术之概述(一) ASP.NET 2.0并没有抛弃1.1版本中的任何现有控件,而是增加了一组新的控件;同时还引入了若干新的控件开发技术.本系列文章将对这 ...
wpf控件开发基础(1)
从现在开始,我将尝试写有关wpf控件开发相关的知识,把文章这对我来说很难,所以这个系列的文章在时间跨度上可能会拖的比较长.我希望我介绍是比较详细的,而不仅仅是一个简单的控件开发流程.我是一个真正的We ...
快速入门Web前端开发的正确姿势
入门标准很简单,就一条:达到能参与 Web 前端实际项目的开发水平.请注意,是实际项目,这就需要了解如今的实际项目开发都用了哪些技术栈.HTML/CSS/JavaScript 这三大基础技术栈肯定是需 ...
OCX控件开发及WEB Javascript如何使用OCX控件
一.OCX控件开发 1.使用IDE版本: VS2010 2..基于MFC技术开发OCX控件. 3..基本OCX开发过程 3.1.打开VS 2010 新建项目,选择MFC模板,"MFC ...
[转]利用ASP.NET 2.0创建自定义Web控件(1)
原址:http://hi.baidu.com/sjbh/blog/item/cc58fd1bd35d3ad2ad6e7593.html 简介从使用基本的文本编辑器到创作标记页面,Web 开发已经 ...

海康威视web控件开发的正确姿势

20210524更新

熟悉demo程序

定制开发

代码分享

海康威视web控件开发的正确姿势相关推荐

最新文章

热门文章