vue集成海康威视WebVideoCtrl.js实现实时预览

1.环境配置

预先下载海康威视web开发包，安装WebComponentsKit.exe，代码集成webVideoCtrl.js，vue npm安装jquery。

2.插件引入

index.html引入script

<script type="text/javascript" src="./static/hk/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="./static/hk/webVideoCtrl.js"></script>

3.vue组件编写

vue template里加上插件

<div id="divPlugin" class="plugin"></div>

script里import插件，为方便插件函数调用，也需要引入jquery

import { WebVideoCtrl } from "../../public/static/hk/webVideoCtrl";
import $ from "jquery";

data中一些内容略
mounted中初始化并打开预览

this.videoInitPlugin();

videoInitPlugin: function() {
      var iRet = WebVideoCtrl.I_CheckPluginInstall();
      if (iRet === -1) {
        alert("您还未安装过插件，双击开发包目录里的WebComponentsKit.exe安装！");
        this.downLoadPlugin();
        return;
      }
      this.initPlugin();
    },
    initPlugin: function() {
      var that = this;
      WebVideoCtrl.I_InitPlugin(this.iWidth, this.iHeight, {
        bWndFull: false, //是否支持单窗口双击全屏，默I_CheckPluginInstall
        iWndowType: 4,
        cbInitPluginComplete: function() {
          WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
          // 检查插件是否最新
          if (WebVideoCtrl.I_CheckPluginVersion() === -1) {
            alert(
              "检测到新的插件版本，双击开发包目录里的WebComponentsKit.exe升级！"
            );
            return;
          }

          var szIP = that.szIP;
          WebVideoCtrl.I_Login(
            szIP,
            that.iProtocol,
            that.szPort,
            that.szUsername,
            that.szPassword,
            {
              async: false,
              success: function(xmlDoc) {
                console.log(xmlDoc); //不能删除
                that.getChannelInfo();
              },
              error: function() {
                console.log("login error");
              }
            }
          );
          console.log("开始预览");
          for (var i = 0; i < that.nDigitalChannel; i++) {
            var szDeviceIdentify = szIP + "_" + that.szPort;
            // console.log("xinzhi:", i);
            that.startRealPlay(szDeviceIdentify, i, i + 1); //i+1为通道号,  i 为窗口
          }
        }
      });
    },

获取通道函数

getChannelInfo() {
      var that = this;
      // 模拟通道
      var szIP = that.szIP;
      WebVideoCtrl.I_GetAnalogChannelInfo(szIP, {
        async: false,
        success: function(xmlDoc) {
          var oChannels = $(xmlDoc).find("VideoInputChannel"); 
          that.nAnalogChannel = oChannels.length;
          console.log("获取模拟通道成功！");
        },
        error: function(error) {
          console.log(
            "获取模拟通道失败！" + error + WebVideoCtrl.I_GetLastError()
          );
        }
      });
      // 数字通道
      WebVideoCtrl.I_GetDigitalChannelInfo(szIP, {
        async: false,
        success: function(xmlDoc) {
          var oChannels = $(xmlDoc).find("InputProxyChannelStatus");
          $.each(oChannels, function() {
              var online = $(this).find("online").eq(0).text();
            if ("false" == online) {// 过滤禁用的数字通道
                return true;
            }
            that.nDigitalChannel+=1;
          });
          console.log("获取数字通道成功！");
        },
        error: function() {
          WebVideoCtrl.I_GetLastError();
          console.log("获取数字通道失败！" + WebVideoCtrl.I_GetLastError());
        }
      });
      // 零通道
      WebVideoCtrl.I_GetZeroChannelInfo(szIP, {
        async: false,
        success: function(xmlDoc) {
          var oChannels = $(xmlDoc).find("ZeroVideoChannel");
          that.nZeroChannel = oChannels;
          console.log("获取零通道成功！");
        },
        error: function() {
          console.log("获取零通道失败！" + WebVideoCtrl.I_GetLastError());
        }
      });
    },

预览函数

startRealPlay: function(szDeviceIdentify, iWndIndex, iChannelID) {
      console.log("startRealPlay@@: ", szDeviceIdentify, iWndIndex, iChannelID);
      WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
        iWndIndex: iWndIndex,
        iStreamType: 1,
        iChannelID: iChannelID,
        bZeroChannel: false,
        success: function() {
          console.log("开始预览成功 ");
        },
        error: function(status, xmlDoc2) {
          console.log(xmlDoc2); //不能删除
          if (status === 403) {
            console.log("szInfo 设备不支持Websocket取流！");
          } else {
            console.log("开始预览失败 ");
          }
        }
      });
    },

页面打开初始化直接开始预览，自动获取通道。

初学前端设计，水平不高见谅，希望多多交流，互相学习。
另外，目前在官方插件里没有找到能够更改插件里每一个通道样式的方法，有大神知道方法的话，还请多多指教，谢谢。

在大神设计基础上改动实现，在此感谢：
海康威视web3.0+vue项目使用(踩坑之路)
vue中使用webVideoCtrl播放海康插件