海康视频插件组件

html部分

  <div class="wh-100">
    <div
      ref="playWnd"
      :id="containerId"
      class="flex-1 hidden playWnd"
      v-html="oWebControl === null ? playText : ''"
    ></div>
  </div>

javascript部分

  props: {
    // 内网、公网 4个配置
    appkey: {
      type: "String",
      default: "",
    },
    secret: {
      type: "String",
      default: "",
    },
    ip: {
      type: "String",
      default: "",
    },
    port: {
      type: "Number",
      default: 8888,
    },
    // 视频布局
    layout: {
      type: "String",
      default: "1x1",
    },
    // 初始播放模式：0-预览，1-回放
    playMode: {
      type: "Number",
      default: 0,
    },
    // 是否显示工具栏，0-不显示，非0-显示
    showToolbar: {
      type: Number,
      default: 1,
    },
    // 工具栏按钮
    toolBarButtonIDs: {
      type: String,
      default: "4098,4097",
    },
    // 是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
    showSmart: {
      type: Number,
      default: 1,
    },
    // 自定义工具条按钮
    buttonIDs: {
      type: String,
      default: "0,16,256,257,258,259,260,512,515,516,517,768,769",
    },
    // 相机编号
    cameraIndexCode: {
      type: [String, Number],
    },
    // 销毁并重新初始化海康插件
    refresh: {
      type: Number,
    },
    // 视频播放容器id
    containerId: {
      type: String,
      default: "playWnd",
    }
  },
  data() {
    return {
      oWebControl: null,
      plugKey: "",
      // 视频相关参数
      videoParams: {
        cameraIndexCode: "", //监控点编号
        streamMode: 0, //主子码流标识：0-主码流，1-子码流
        transMode: 1, //传输协议：0-UDP，1-TCP
        gpuMode: 0, //是否启用GPU硬解，0-不启用，1-启用
        wndId: 1, //播放窗口序号
      },
      videoWidth: null,
      videoHeight: null,
      playText: "启动中...",
      initCount: 0, // 启动次数
      href: "",
    };
  },
  created() {
    this.getPluginUrl();
    this.createdVideo();
  },
  mounted() {
    this.$nextTick(() => {
      this.videoWidth = this.$refs.playWnd.offsetWidth;
      this.videoHeight = this.$refs.playWnd.offsetHeight;
    });
    // 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
    window.addEventListener("resize", this.windowResize);
    // // 监听滚动条scroll事件，使插件窗口跟随浏览器滚动而移动
    window.addEventListener("scroll", this.windowScroll);
  },
  watch: {
    // 监听相机编码
    cameraIndexCode(value) {
      if (value) {
        this.videoParams.cameraIndexCode = value.trim();
        this.videoParams.wndId = -1;
        if (this.oWebControl) {
          this.previewVideo();
        } else {
          this.createdVideo();
        }
      }
    },
    // 刷新
    refresh() {
      this.destroyeWnd();
      setTimeout(() => {
        this.createdVideo();
      }, 0);
    }
  },
  methods: {
    // 获取海康插件下载地址
    getPluginUrl() {
      getList(1, 999).then(res => {
        if(res.data.code === 200) {
          const data = res.data.data.records;
          data.length
          if(data.length) {
            let existArr = data.filter(item => item.paramKey === "hk.video.pluginUrl");
            if(existArr.length) {
              this.href = existArr[0].paramValue;
            }
          }
        }
      });
    },
    // 初始化+预览
    createdVideo() {
      this.initPlugin(() => {
        this.previewVideo();
      });
    },
    // 创建播放实例
    initPlugin(callback) {
      this.oWebControl = new WebControl({
        szPluginContainer: this.containerId, // 指定容器id
        iServicePortStart: 15900,
        iServicePortEnd: 15909,
        szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
        // 创建WebControl实例成功
        cbConnectSuccess: () => {
          this.oWebControl
            .JS_StartService("window", {
              // WebControl实例创建成功后需要启动服务
              dllPath: "./VideoPluginConnect.dll",
            })
            .then(() => {
              // 启动插件服务成功
              this.oWebControl.JS_SetWindowControlCallback({
                // 设置消息回调
                cbIntegrationCallBack: this.cbIntegrationCallBack,
              });
              this.oWebControl
                .JS_CreateWnd(this.containerId, this.videoWidth, this.videoHeight)
                .then(() => {
                  this.getVersion(callback);
                });
            });
        },
        cbConnectError: () => {
          // 创建WebControl实例失败
          this.oWebControl = null;
          this.playText = "插件未启动，正在尝试启动，请稍候...";
          WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
          this.initCount++;
          if (this.initCount < 3) {
            setTimeout(() => {
              this.initPlugin();
            }, 2000);
          } else {
            this.playText = `
              插件启动失败，请检查插件是否安装！
              <a href=${this.href} type="primary" download="视频插件.exe" style='color:#4194fc'>下载地址</a>`;
          }
        },
        cbConnectClose: () => {
          this.oWebControl = null;
        },
      });
    },
    // 消息回调
    cbIntegrationCallBack() {},
    // 初始化
    init(callback) {
      this.getPubKey(() => {
        this.oWebControl
          .JS_RequestInterface({
            funcName: "init",
            argument: JSON.stringify({
              appkey: this.appkey, //API网关提供的appkey
              secret: this.setEncrypt(this.secret), //API网关提供的secret
              ip: this.ip, //API网关IP地址z
              playMode: this.playMode, //播放模式（决定显示预览还是回放界面）
              port: this.port, //端口
              snapDir: "C:\\SnapDir", //抓图存储路径
              videoDir: "C:\\VideoDir", //紧急录像或录像剪辑存储路径
              layout: this.layout, //布局
              enableHTTPS: 1, //是否启用HTTPS协议
              encryptedFields: "secret", //加密字段
              showToolbar: this.showToolbar, //是否显示工具栏
              toolBarButtonIDs: this.toolBarButtonIDs,
              showSmart: this.showSmart, //是否显示智能信息
              buttonIDs: this.buttonIDs, //自定义工具条按钮
              protocol: "hls",
            }),
          })
          .then(() => {
            // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
            this.oWebControl.JS_Resize(this.videoWidth, this.videoHeight);
            if (callback) {
              callback();
            }
          });
      });
    },
    // 获取公钥
    getPubKey(callback) {
      const params = {
        funcName: "getRSAPubKey",
        argument: JSON.stringify({ keyLength: 1024 }),
      };
      this.oWebControl.JS_RequestInterface(params).then((res) => {
        if (res.responseMsg.data) {
          this.plugKey = res.responseMsg.data;
          callback();
        }
      });
    },
    // 视频流RSA加密
    setEncrypt(value) {
      const encrypt = new JSEncrypt();
      encrypt.setPublicKey(this.plugKey);
      return encrypt.encrypt(value);
    },
    // 视频预览
    previewVideo() {
      this.oWebControl.JS_RequestInterface({
        funcName: "startPreview",
        argument: JSON.stringify(this.videoParams),
      });
    },
    // 显示全屏
    showFullScreen() {
      this.oWebControl.JS_RequestInterface({
        funcName: "setFullScreen",
      });
    },
    // 退出全屏
    exitFullScreen() {
      this.oWebControl.JS_RequestInterface({
        funcName: "exitFullScreen",
      });
    },
    windowScroll() {
      if (this.oWebControl != null) {
        this.oWebControl.JS_Resize(this.videoWidth, this.videoHeight);
      }
    },
    windowResize() {
      this.videoWidth = this.$refs.playWnd.offsetWidth;
      this.videoHeight = this.$refs.playWnd.offsetHeight;
      if (this.oWebControl) {
        this.oWebControl.JS_Resize(this.videoWidth, this.videoHeight);
      }
    },
    // 销毁海康插件
    destroyeWnd() {
      if (this.oWebControl) {
        this.oWebControl.JS_HideWnd();
        this.oWebControl.JS_Disconnect().then(() => {});
      }
    },
    // 获取海康插件版本号
    getVersion(callback) {
      if(this.oWebControl) {
        this.oWebControl.JS_RequestInterface({
          funcName: "getVersion",
        }).then(res => {
          if(res.responseMsg.code === 0 && res.responseMsg.data === "V1.5.1") {
            //JS_CreateWnd创建视频播放窗口，宽高可设定
            this.init(callback); // 创建播放实例成功后初始化
            console.log("启动插件成功！");
          }else{
            this.destroyeWnd();
            this.playText = `
              插件版本不正确，请重新下载版本安装覆盖！
              <a href=${this.href} type="primary" download="视频插件.exe" style='color:#4194fc'>下载地址</a>`;
          }
        })
      }
    },
  },
  beforeDestroy() {
    if (this.oWebControl) {
      this.oWebControl.JS_HideWnd();
      this.oWebControl
        .JS_DestroyWnd({
          funcName: "destroyeWnd",
        })
        .then(() => {});
    }
    document.removeEventListener("resize", this.windowResize);
    document.removeEventListener("scroll", this.windowScroll);
  },