最近一個vue的項目里面需要呈現(xiàn)某現(xiàn)場的實時視頻，組里購買了一組?？低暤木W(wǎng)絡攝像頭，是那種帶CS端管理程序的，通過ip，port，用戶名，密碼登錄攝像頭，但是不知道如何應用到web項目中。查找資料后，我在網(wǎng)上找到一個web控件開發(fā)包，于是在此基礎上進行開發(fā)，實現(xiàn)vue項目需要的功能。

熟悉demo程序

打開這個web控件開發(fā)包的文檔，可以看到，這個控件是利用ActiveX控件和NPAPI實現(xiàn)的。IE上用ActiveX控件，Chrome基于NPAPI實現(xiàn)，并且需要安裝codebase目錄下的WebComponentsKit.exe插件。這里我們可以了解到，該控件不適用于高版本Chrome瀏覽器，這是一個很不爽的地方。不過目前還沒有找到其他合適的方案，也只能試試這個方案了。

打開demo目錄下的index.html，我們可以看到它支持的功能還是很多的。

而我并不需要這么多功能，只需要能把網(wǎng)絡攝像頭的畫面呈現(xiàn)在項目頁面上就好了。

定制開發(fā)

遇到的問題： 一開始也沒有熟讀這個控件的demo源碼，就想著把從初始化到登錄，再到預覽這部分功能截取出來移植到Vue項目里就好。然而在裁剪代碼的過程出現(xiàn)了各種報錯，嘗試定位錯誤的過程浪費了不少時間。

解決方法： 之后想到的方法是，把demo中的多余的功能一個一個去掉，在此過程中要觀察demo是否可以正常登錄和預覽畫面。最后的demo中我只保留了從初始化到登錄以及預覽這部分的代碼。這個過程下來，我對這部分的js邏輯也是比較清楚了，最終也是順利地移植到Vue項目中。

代碼分享

移植的這部分代碼我封裝成了一個webVideo,js文件，供頁面調(diào)用。

而在頁面中，首先需要引入該js文件

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

然后需要在mounted方法中進行初始化對象

this.webVideo = new WebVideo()

最后在打開dialog顯示視頻的位置調(diào)用init方法和clickLogin方法(我在clickLogin方法的成功回調(diào)函數(shù)中調(diào)用獲取頻道信息和設備端口的方法，并在這之后調(diào)用了預覽方法)。

// 顯示視頻dialog
this.videoBoxVisible = true
// nextTick回調(diào)中調(diào)用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
        // 檢查插件是否已經(jīng)安裝過
        var iRet = WebVideoCtrl.I_CheckPluginInstall();
        if (-1 == iRet) {
            alert("您還未安裝過插件，雙擊開發(fā)包目錄里的WebComponentsKit.exe安裝！");
            return;
        }
        // 初始化插件參數(shù)及插入插件
        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) {// 已經(jīng)在播放了，先停止
            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控件開發(fā)包。

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

對了,還有一個jsPlugin-1.0.0.min.js也需要放在static目錄下，但是不需要在index.html引用，因為webVideoCtrl.js會主動去調(diào)用同目錄下的jsPlugin-1.0.0.min.js。

我能補充的坑大概就這些了吧，因為這個項目也過去很久了，我用到的功能也真的少，對于不能答復大家太多深入的問題，我感到抱歉。

---

開發(fā)包64位下載地址
鏈接：https://pan.baidu.com/s/19uCuu838TwP-OBqWqo-MPw
提取碼：futg

開發(fā)包32位下載地址
鏈接：https://pan.baidu.com/s/1byAij-cStvoYhS9SlV5dDw
提取碼：f24r