Vue+TS 开发海康威视 Web3.0控件

2024-02-08 18:50:22

　　最近在给公司平台写视频监控的页面需求，于是接触到了海康威视的视频控件，网上查阅一番资料后，发现有很多大佬们给出了简易的海康视频控件的上手方法，但是发现仍然有很多地方没有总结到，于是在这里对我个人对海康控件开发的经验做出一点总结。话不多说现在开始。
1|0运行环境与设备支持
　　海康控件开发包链接：
　　32位浏览器：https://pan.baidu.com/s/160ia40-hlFd1MynbxSBI2Q 密码：d3pf
　　64位浏览器：https://pan.baidu.com/s/1TbNHqfZSw9PPS4Z-xYvcoQ 密码：38qq
　　浏览器等相关环境看开发包内的官方文档，主流浏览器基本不支持
　　（ps：经过测试，win10下64位浏览器安装64位插件基本都有问题，只在IE11(win10 64自带应该是64位，但插件需要32位)和360(32位)切换至IE11内核安装32位插件的情况可以使用；
但是IE有另一个问题，本地开发环境正常，测试环境会卡死，360测试环境正常）
2|0Demo测试
　　建议先使用demo进行本地测试显示是否正常，一般情况下浏览器支持就可以正常显示图像了，如果登录成功但点击预览没有图像，则可能是摄像头的端口未开放或码率设置不正确，demo测试正常后就可以搬运到Vue+TS项目了
3|0迁移

官方demo功能比较复杂，实际项目需要的只是在网页显示实时监控，所以很多代码进行简化

　　1.将官方js文件放至Public文件夹（编译的出口文件），在index.html，将官方的webVideoCtrl.js文件导入页面（PS:记得要jsPlugin-1.0.0.min.js和webVideoCtrl.js两个文件都放入文件夹，webVideoCtrl.js会引用jsPlugin-1.0.0.min.js）

<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="./static/webVideoCtrl.js"></script>
</body>

　　2.在vue新建webVideo.ts视频配置文件作为类导出，

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

　　可能会出现WebVideoCtrl 报错提示不存在此模块，需要在shims-vue.d.ts（Vue-cli3以上创建TS的Vue项目会在src下自动生成此文件）文件内定义WebVideoCtrl 模块

declare var WebVideoCtrl: any;

　　3.做完以上操作后，只需要在.vue页面导入自定义配置的webVideo.ts文件并进行初始化即可　　　　

import WebVideo from "@/config/webVideo";
let webVideo: any;

mounted() {
webVideo = new WebVideo();
}

// 在要进行播放的函数进行初始化并登陆预览
webVideo.init();
webVideo.clickLogin();

码农公寓

相关文章