海康威视web控件开发+vue结合做网页开发

需求:vue的项目,需要在页面展示出海康的硬盘录像机连接的摄像头的实时监控画面以及回放功能.

准备:web开发包(包含插件以及demo,在海康官网即可下载32位64位的都有.那些需要积分下载的博主良心不疼么.)

点击这里下载:链接: https://pan.baidu.com/s/12FrbycWyWWyiRJH5Yd1tPA 提取码: gam5

开始开发:

1.安装demo目录下的WebComponentsKit.exe插件(根据自己的浏览器以及系统选择32位还是64位的插件)

2.打开demo.html.功能还是挺齐全的(不过web开发包目前不支持按文件回放(只提供了搜索功能.大华的是提供按文件回放功能的.))

这里说一下基本思路.首先初始化插件,成功之后调用登录方法,登录成功之后调用获取通道信息方法.再然后调用预览方法.基本就是这样的.

3.我看到很多博主没有说到vue项目怎么调用webVideoCtrl.js这个海康的js.这里说明一下.

在index.html里引入.

然后在自己建的webVideohk.js里可以直接引用.(但是你展示视频的页面需要import该js)

import{WebVideo}from"./webVideohk.js";

我这里把需要用到的方法都封装在webVideohk.js里面(方便调用)

在页面的mounted()里初始化

this.webVideo?=?new?WebVideo();

this.webVideo.init(this.isType,this.qrcodeData.route,parseInt(this.qrcodeData.port),this.qrcodeData.ruser,this.qrcodeData.rpwd);?//调用初始化方法

这里的参数可以自己传过去.(包括ip,root,username,password等)

4.注意点:

a.Plugin-1.0.0.min.js也需要放在webVideoCtrl.js同目录下，但是不需要在index.html引用，因为webVideoCtrl.js会主动去调用同目录下的jsPlugin-1.0.0.min.js

b.这里要定义个全局的g_iWndIndex变量(这个变量是用来存储选中的窗口的.)

c.在获取通道时,模拟通道获取不到,可以调用获取数字通道.(demo本身也获取不到模拟通道.)

    // 获取通道
    this.getChannelInfo = function () {
        var self = this
        self.channels = []
        if (null == self.szDeviceIdentify) {
            return;
        }
        // 数字通道
        WebVideoCtrl.I_GetDigitalChannelInfo(self.szDeviceIdentify, {
            async: false,
            success: function (xmlDoc) {
                var oChannels = $(xmlDoc).find("InputProxyChannelStatus");
                $.each(oChannels, function (i) {
                    var id = $(this).find("id").eq(0).text(),
                        name = $(this).find("name").eq(0).text(),
                        online = $(this).find("online").eq(0).text();
                    if ("false" == online) {// 过滤禁用的数字通道
                        return true;
                    }
                    if ("" == name) {
                        name = "IPCamera " + (i < 9 ? "0" + (i + 1) : (i + 1));
                    }
                    self.channels.push({
                        id: id,
                        name: name
                    })
                });
            },
            error: function (status, xmlDoc) {
            }
        });
    }

分享代码

1.初始化插件

    this.init = function (isType,ip,port,username,password) {
        this.ip = ip;
        this.port=port;
        this.username=username;
        this.password = password;
        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.changeWndNum("2");
        //调用登录方法
        this.clickLogin(isType);
    }

2.登录

    // 登录
    this.clickLogin = function (isType) {
        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(isType)//调用开始预览方法
                }, 500)
            },
            error: function (status, xmlDoc) {
                alert('登录失败!请检查用户名密码是否正确!')
            }
        });
    }

3.预览

// 开始预览
    this.clickStartRealPlay = function (isType) {
        var self = this
        var oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex);
        //iChannelID = self.channels[0].id

        if (null == self.szDeviceIdentify) {
            return;
        }
        for (var i = 0; i < self.channels.length; i++) {
            var startRealPlay = function () {
                console.log(self.deviceport, 1, self.channels[i].id, 'false')
                WebVideoCtrl.I_StartRealPlay(self.szDeviceIdentify, {
                    iStreamType:isType,//主码流和子码流1:主码流,2:子码流
                    iStreamType: 2,
                    iWndIndex: i,
                    iRtspPort: self.deviceport,
                    iStreamType: 1,
                    iChannelID: self.channels[i].id,
                    bZeroChannel: false,
                    success: function () {
                    },
                    error: function (status, xmlDoc) {
                        if (403 === status) {
                        } else {
                        }
                    }
                });
            }
            if (oWndInfo != null) {// 已经在播放了，先停止
                WebVideoCtrl.I_Stop({
                    success: function () {
                        startRealPlay();
                    }
                });
            } else {
                startRealPlay();
            }
        };
    }

成品展示:

1.监控

2.回放

发现的问题:

最后做测试的时候发现一个有意思的问题:

问题:当我重复关闭再打开10次后.第11次的时候.报这样一个错误.如图:

然后页面的视频虽然还是能加载出来,但是貌似插件初始化的时候都没有初始化成功

总结:总体来说开发比大华的简单些.但功能相对大华的来的简单.不过大华和海康的web开发都要记得在页面销毁前退出登录.不然插件会死的很难看.