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

熟悉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 = 0
    this.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 = this
        if ("" == 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 = this
        if (null == self.szDeviceIdentify) {
            return;
        }
        var iRet = WebVideoCtrl.I_Logout(self.szDeviceIdentify);
        if (0 == iRet) {
            self.getChannelInfo();
            self.getDevicePort();
        }
    }
    // 获取通道
    this.getChannelInfo = function() {
        var self = this
        self.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 = this
        if (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 = this
        var oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex),
            iChannelID = self.channels[0].value
    
        if (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 = this
        var 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