vue3在浏览器段展示海康监控视频

目录

一、需求

二、最后成果展示

三、思路和方法

3.1 首先安装插件,可以在上面的地址中下载安装,建立一个dom

3.2 初始化的时候可以获取一个视频展示的一个长宽

3.3 vue data中定义

3.4 初始化视频的方法在vue的methods中

3.5 开始方法

3.6 暂停方法

3.7 销毁监控方法


一、需求

需要在浏览器点击查看海康的监控视频

二、最后成果展示

插件下载地址:https://download.csdn.net/download/xm_w_xm/87995593

三、思路和方法

3.1 首先安装插件,可以在上面的地址中下载安装,建立一个dom

3.2 初始化的时候可以获取一个视频展示的一个长宽

 mounted() {
    this.clientWidth = document.body.clientWidth * (7 / 10);
    this.clientHeight = document.body.clientHeight * (7 / 10);
  },

3.3 vue data中定义

data() {
    return {
      initCount: 0,
      pubKey: "",
      oWebControl: null,
      cameraIndexCode: "",
      title: "",
      clientWidth: 1000,
      clientHeight: 800,
      downloadUrl: `${process.env.VUE_APP_IMG_API}/js/video/VideoWebPlugin.exe`,
    };
  },

3.4 初始化视频的方法在vue的methods中

initPlugin(val) {
      let that = this;
      if (val) {
        that.cameraIndexCode = val.cameraIndex;
        this.title = val.name;
        that.oWebControl = new WebControl({
          szPluginContainer: "playWnd", // 指定容器id
          iServicePortStart: 15900, // 指定起止端口号,建议使用该值
          iServicePortEnd: 15900,
          szClassId: "用于IE10使用ActiveX的clsid", // 用于IE10使用ActiveX的clsid
          cbConnectSuccess: function () {
            // 创建WebControl实例成功
            that.oWebControl
              .JS_StartService("window", {
                // WebControl实例创建成功后需要启动服务
                dllPath: "./VideoPluginConnect.dll", // 值"./VideoPluginConnect.dll"写死
              })
              .then(
                function () {
                  // 启动插件服务成功
                  that.oWebControl
                    .JS_CreateWnd(
                      "playWnd",
                      that.clientWidth,
                      that.clientHeight
                    )
                    .then(function () {
                      //JS_CreateWnd创建视频播放窗口,宽高可设定
                      that.init(); // 创建播放实例成功后初始化
                      setTimeout(() => {
                        that.startPreview();
                      }, 2500);
                    });
                },
                function () {
                  // 启动插件服务失败
                }
              );
          },
          cbConnectError: function () {
            // 创建WebControl实例失败
            that.oWebControl = null;
            $("#playWnd").html(
              "插件未启动,正在尝试启动,请到这个地址下载并安装:" +
                that.downloadUrl
            );
            WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数,采用wakeup来启动程序
            that.initCount++;
            if (that.initCount < 3) {
              setTimeout(function () {
                // that.initPlugin();
              }, 3000);
            } else {
              $("#playWnd").html("插件启动失败,请检查插件是否安装!");
            }
          },
          cbConnectClose: function (bNormalClose) {
            // 异常断开:bNormalClose = false
            // JS_Disconnect正常断开:bNormalClose = true
            console.log("cbConnectClose");
            that.oWebControl = null;
            $("#playWnd").html(
              "插件未启动,正在尝试启动,请到这个地址下载并安装:" +
                that.downloadUrl
            );
            WebControl.JS_WakeUp("VideoWebPlugin://");
            that.initCount++;
            if (that.initCount < 3) {
              setTimeout(function () {
                // that.initPlugin();
              }, 3000);
            } else {
              $("#playWnd").html("插件启动失败,请检查插件是否安装!");
            }
          },
        });
      }
    },
    getPubKey(callback) {
      let that = this;
      that.oWebControl
        .JS_RequestInterface({
          funcName: "getRSAPubKey",
          argument: JSON.stringify({
            keyLength: 1024,
          }),
        })
        .then(function (oData) {
          // console.log(oData);
          if (oData.responseMsg.data) {
            that.pubKey = oData.responseMsg.data;
            callback();
          }
        });
    },
    setEncrypt(value) {
      var encrypt = new JSEncrypt();
      encrypt.setPublicKey(this.pubKey);
      return encrypt.encrypt(value);
    },
    init() {
      let that = this;
      that.getPubKey(function () {
        var appkey = "综合安防管理平台提供的appkey"; //综合安防管理平台提供的appkey,必填
        var secret = that.setEncrypt("综合安防管理平台提供的secret,必填"); //综合安防管理平台提供的secret,必填
        var ip = "综合安防管理平台IP地址,必填"; //综合安防管理平台IP地址,必填
        var playMode = 0; //初始播放模式:0-预览,1-回放
        var port = 443; //综合安防管理平台端口,若启用HTTPS协议,默认443
        var snapDir = "D:\\SnapDir"; //抓图存储路径
        var videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
        var layout = "1x1"; //playMode指定模式的布局
        var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互,这里总是填1
        var encryptedFields = "secret"; //加密字段,默认加密领域为secret
        var showToolbar = 1; //是否显示工具栏,0-不显示,非0-显示
        var showSmart = 1; //是否显示智能信息(如配置移动侦测后画面上的线框),0-不显示,非0-显示
        var buttonIDs =
          "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮

        that.oWebControl
          .JS_RequestInterface({
            funcName: "init",
            argument: JSON.stringify({
              appkey: appkey, //API网关提供的appkey
              secret: secret, //API网关提供的secret
              ip: ip, //API网关IP地址
              playMode: playMode, //播放模式(决定显示预览还是回放界面)
              port: port, //端口
              snapDir: snapDir, //抓图存储路径
              videoDir: videoDir, //紧急录像或录像剪辑存储路径
              layout: layout, //布局
              enableHTTPS: enableHTTPS, //是否启用HTTPS协议
              encryptedFields: encryptedFields, //加密字段
              showToolbar: showToolbar, //是否显示工具栏
              showSmart: showSmart, //是否显示智能信息
              buttonIDs: buttonIDs, //自定义工具条按钮
            }),
          })
          .then(function (oData) {
            that.oWebControl.JS_Resize(that.clientWidth, that.clientHeight); // 初始化后resize一次,规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
          });
      });
    },

3.5 开始方法

// 点击开始
    startPreview() {
      var streamMode = 0; //主子码流标识:0-主码流,1-子码流
      var transMode = 1; //传输协议:0-UDP,1-TCP
      var gpuMode = 0; //是否启用GPU硬解,0-不启用,1-启用
      var wndId = -1; //播放窗口序号(在2x2以上布局下可指定播放窗口)
      this.oWebControl.JS_RequestInterface({
        funcName: "startPreview",
        argument: JSON.stringify({
          cameraIndexCode: this.cameraIndexCode, //监控点编号
          streamMode: streamMode, //主子码流标识
          transMode: transMode, //传输协议
          gpuMode: gpuMode, //是否开启GPU硬解
          wndId: wndId, //可指定播放窗口
        }),
      });
    },

3.6 暂停方法

// 停止
    stopAllPreview() {
      this.oWebControl.JS_RequestInterface({
        funcName: "stopAllPreview",
      });
    },

3.7 销毁监控方法

closeAllPreview() {
      if (this.oWebControl) {
        this.stopAllPreview();
        this.oWebControl.JS_HideWnd();
        this.oWebControl
          .JS_DestroyWnd({
            funcName: "destroyeWnd",
          })
          .then(function () {});
      }
      this.oWebControl = null;
    },
    closeVideo() {
      this.closeAllPreview();
    },

你可能感兴趣的:(vue.js-功能,前端,javascript,html)