vue.js对接海康威视摄像头web开发包

一、登录海康开放平台下载web开发包，下载需要先登录海康账号，没有的需先注册一个。

这里的appkey、ip、port、secret 和cameraIndexCodeasd是自己去申请的

   appkey: "****", 
    ip: "****", 
    port: **, 
    secret: "****", //必填
  },
  cameraIndexCodeasd: "***", //必填 摄相机的code``

海康开放平台web开发包下载地址：开发包下载地址点击下载即可
在这里插入图片描述

二、打开bin文件夹下的VideoWebPlugin.exe点击安装完成

在这里插入图片描述

三、将web开发包引入vue项目

demo下的js文件
在这里插入图片描述

放到public中即可

<script src="./jquery-1.12.4.min.js"></script>
<script src="./web-control_1.2.5.min.js"></script>
<script src="./jsencrypt.min.js"></script>

四、template内容和data

<template>
  <div>
    <div id="playWnd" class="playWnd" />
  </div>
</template>
<script>
// 声明公用变量
var oWebControl = null;
var initCount = 0;
var pubKey = "";
export default {
  /**
   * index :当前组件所属页面 设备管理 为空 ||实时监控 realTime
   * type : 回放 || 直播
   * code : 监控点编号 监控设备页面String || 实时监控 Array
   * time 回放时间 暂时废弃
   */
  props: ["mode", "code"],
  data() {
    return {
      swfWidth: 1920, //宽度
      swfHeight: 1080, //高度
      playText: "",
      objData: {
        appkey: "****", //必填
        ip: "****", //必填
        port: **, //必填443是默认
        secret: "****", //必填
      },
      cameraIndexCodeasd: "***8", //必填 摄相机的codeA线挂牌机器人入口
    };
  },}
</script>

五、在methods中创建WebControl实例

  initPlugin() {
      var that = this;
      oWebControl = new WebControl({
        szPluginContainer: "playWnd",
        iServicePortStart: 15900,
        iServicePortEnd: 15900,
        szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
        cbConnectSuccess() {
          console.log("创建WebControl实例成功");
          oWebControl
            .JS_StartService("window", {
              // WebControl实例创建成功后需要启动服务
              dllPath: "./VideoPluginConnect.dll", // 值"./VideoPluginConnect.dll"写死
            })
            .then(
              () => {
                // // 启动插件服务成功
                oWebControl.JS_SetWindowControlCallback({
                  // 设置消息回调
                  cbIntegrationCallBack: that.cbIntegrationCallBack,
                });
                oWebControl
                  .JS_CreateWnd("playWnd", that.swfWidth, that.swfHeight)
                  .then(() => {
                    //JS_CreateWnd创建视频播放窗口，宽高可设定
                    // oWebControl.JS_SetDocOffset({
                    //   left: 250,
                    //   top: 125,
                    // }); // 更新插件窗口位置
                    oWebControl.JS_Resize(that.swfWidth, that.swfHeight);
                    setTimeout(() => {
                      that.initBtnClicked(); // 创建播放实例成功后初始化
                    }, 1000);
                  });
              },
              () => {
                // 启动插件服务失败
              }
            )
            .catch((err) => {
              console.log(err);
            });
        },
        cbConnectError: function () {
          var that = this;
          // 创建WebControl实例失败
          oWebControl = null;
          that.$message.warning("插件未启动，正在尝试启动，请稍候...");
          that.playText = "插件未启动，正在尝试启动，请稍候...";
          window.WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
          initCount++;
          if (initCount < 3) {
            setTimeout(function () {
              that.initPlugin();
            }, 3000);
          } else {
            that.$message.warning("插件启动失败，请检查插件是否安装！");
            // console.log(initCount)
            that.playText = "插件启动失败，请检查插件是否安装！";
            if (initCount == 3) {
              that.frontDownload();//未安装安装包执行下载安装
            }
          }
        },
        cbConnectClose: () => {
          var that = this;
          // 创建WebControl实例失败
          oWebControl = null;
          that.$message.warning("插件未启动，正在尝试启动，请稍候...");
          that.playText = "插件未启动，正在尝试启动，请稍候...";
          window.WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
          initCount++;
          if (initCount < 3) {
            setTimeout(function () {
              that.initPlugin();
            }, 3000);
          } else {
            that.$message.warning("插件启动失败，请检查插件是否安装！");
            // console.log(initCount)
            that.playText = "插件启动失败，请检查插件是否安装！";
            if (initCount == 3) {
              that.frontDownload();
            }
          }
        },
      });
    },

六、如果未安装提示安装下载

    // 下载插件
    frontDownload() {
      var a = document.createElement("a"); // 创建一个<a></a>标签
      var peizhiurl = this.changeIp;
      a.href = peizhiurl + "/VideoWebPlugin.exe"; // 给a标签的href属性值加上地址，注意，这里是绝对路径，不用加 点.
      a.download = "VideoWebPlugin.exe"; // 设置下载文件文件名，这里加上.xlsx指定文件类型，pdf文件就指定.fpd即可
      a.style.display = "none"; // 障眼法藏起来a标签
      document.body.appendChild(a); // 将a标签追加到文档对象中
      a.click(); // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
      a.remove(); // 一次性的，用完就删除a标签
    },

七、初始化

// 初始化
    requestInterface(value) {
      oWebControl.JS_RequestInterface(JSON.parse(value)).then(function (oData) {
        // console.log(oData);
        // this.showCBInfo(JSON.stringify(oData ? oData.responseMsg : ""));
      });
    },
    startPreview(cameraCode) {
      console.log("cameraCode", cameraCode);
      // 点击查询后显示
      oWebControl.JS_ShowWnd();
      var cameraIndexCode = "0e3c3db37ff042f58b4b87e12d08f812"; // 获取输入的监控点编号值，必填
      var streamMode = 0; // 主子码流标识：0-主码流，1-子码流
      var transMode = 1; // 传输协议：0-UDP，1-TCP
      var gpuMode = 0; // 是否启用GPU硬解，0-不启用，1-启用
      var wndId = -1; // 播放窗口序号（在2x2以上布局下可指定播放窗口）

      cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");

      oWebControl.JS_RequestInterface({
        funcName: "startPreview",
        argument: JSON.stringify({
          cameraIndexCode: cameraIndexCode, // 监控点编号
          streamMode: streamMode, // 主子码流标识
          transMode: transMode, // 传输协议
          gpuMode: gpuMode, // 是否开启GPU硬解
          wndId: wndId, // 可指定播放窗口
        }),
      });
    },
    // 获取公钥
    getPubKey(callback) {
      oWebControl
        .JS_RequestInterface({
          funcName: "getRSAPubKey",
          argument: JSON.stringify({
            keyLength: 1024,
          }),
        })
        .then(function (oData) {
          console.log(oData);
          if (oData.responseMsg.data) {
            pubKey = oData.responseMsg.data;
            callback();
          }
        });
    },

    // 设置窗口控制回调
    setCallbacks() {
      oWebControl.JS_SetWindowControlCallback({
        cbIntegrationCallBack: this.cbIntegrationCallBack(),
      });
    },

    // 推送消息
    // cbIntegrationCallBack(oData) {
    //   showCBInfo(JSON.stringify(oData.responseMsg));
    // },

    // RSA加密
    setEncrypt(value) {
      var encrypt = new JSEncrypt();
      encrypt.setPublicKey(pubKey);
      return encrypt.encrypt(value);
    },

    // 显示接口返回的消息及插件回调信息
    showCBInfo(szInfo, type) {
      if (type === "error") {
        szInfo =
          "<div style='color: red;'>" +
          dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss") +
          " " +
          szInfo +
          "</div>";
      } else {
        szInfo =
          "<div>" +
          dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss") +
          " " +
          szInfo +
          "</div>";
      }
      $("#cbInfo").html(szInfo + $("#cbInfo").html());
    },

    initBtnClicked() {
      var that = this;
      var appkey = this.objData.appkey; // 综合安防管理平台提供的appkey，必填
      var secret = this.objData.secret; // 综合安防管理平台提供的secret，必填
      var ip = this.objData.ip; //综合安防管理平台IP地址，必填
      var playMode = 0; //初始播放模式：0-预览，1-回放
      var port = this.objData.port; //综合安防管理平台端口，若启用HTTPS协议，默认443
      var snapDir = ""; //抓图存储路径
      var videoDir = ""; //紧急录像或录像剪辑存储路径
      var layout = "1x1"; //playMode指定模式的布局
      var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
      // var encryptedFields = "secret"; //加密字段，默认加密领域为secret
      var showToolbar = 0; //是否显示工具栏，0-不显示，非0-显示
      var showSmart = 0; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
      var buttonIDs = ""; //自定义工具条按钮
      var params = {
        argument: {
          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, //自定义工具条按钮
        },
        funcName: "init",
      };

      var param = JSON.stringify(params);
      // console.log(params);
      //删除字符串中的回车换行
      param = param.replace(/(\s*)/g, "");

      // 执行初始化
      this.requestInterface(param);
      this.playFn();
    },

    playFn() {
      var cameraIndexCode = this.cameraIndexCodeasd;
      (""); //获取输入的监控点编号值，必填
      var streamMode = 0; //主子码流标识：0-主码流，1-子码流
      var transMode = 1; //传输协议：0-UDP，1-TCP
      var gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用
      var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口）
      cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
      cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");

      var params = {
        argument: {
          cameraIndexCode: cameraIndexCode, //监控点编号
          streamMode: streamMode, //主子码流标识
          transMode: transMode, //传输协议
          gpuMode: gpuMode, //是否开启GPU硬解
          wndId: wndId, //可指定播放窗口
        },

        funcName: "startPreview",
      };

      var param = JSON.stringify(params);

      // console.log(param);

      //删除字符串中的回车换行
      param = param.replace(/(\s*)/g, "");
      // 执行预览
      this.requestInterface(param);
    },
    // 插件窗口销毁
    destoryWnd() {
      if (oWebControl != null) {
        oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
        oWebControl.JS_RequestInterface({
          funcName: "destroyWnd",
        }); // 销毁当前播放的视频
        oWebControl.JS_Disconnect(); // 断开与插件服务连接
      }
    },
    SetDocOffset() {
      if (oWebControl != null) {
        oWebControl.JS_Resize(this.swfWidth, this.swfHeight);
      }
    },
    // 格式化时间
    dateFormat(oDate, fmt) {
      var o = {
        "M+": oDate.getMonth() + 1, //月份
        "d+": oDate.getDate(), //日
        "h+": oDate.getHours(), //小时
        "m+": oDate.getMinutes(), //分
        "s+": oDate.getSeconds(), //秒
        "q+": Math.floor((oDate.getMonth() + 3) / 3), //季度
        S: oDate.getMilliseconds(), //毫秒
      };
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(
          RegExp.$1,
          (oDate.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      }
      for (var k in o) {
        if (new RegExp("(" + k + ")").test(fmt)) {
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length == 1
              ? o[k]
              : ("00" + o[k]).substr(("" + o[k]).length)
          );
        }
      }
      return fmt;
    },

八、挂载和销毁

  mounted() {
    this.initPlugin(); // 初始化video界面
    window.addEventListener("resize", this.SetDocOffset);
  },
  destroyed() {
    // 组件销毁后
    this.destoryWnd();
    window.removeEventListener("resize", this.SetDocOffset);
  },
  beforeDestroy() {
    this.destoryWnd();
  },

九、最终实现

在这里插入图片描述

十、一些规格参数

initBtnClicked方法中有配置性文件
var playMode = 0; //初始播放模式：0-预览，1-回放
      var port = this.objData.port; //综合安防管理平台端口，若启用HTTPS协议，默认443
      var snapDir = ""; //抓图存储路径
      var videoDir = ""; //紧急录像或录像剪辑存储路径
      var layout = "1x1"; //playMode指定模式的布局
      var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
      // var encryptedFields = "secret"; //加密字段，默认加密领域为secret
      var showToolbar = 0; //是否显示工具栏，0-不显示，非0-显示
      var showSmart = 0; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示

十一、最终vue页面代码

<template>
  <div>
    <div id="playWnd" class="playWnd" />
  </div>
</template>

<script>
// 声明公用变量
var oWebControl = null;
var initCount = 0;
var pubKey = "";

export default {
  /**
   * index :当前组件所属页面 设备管理 为空 ||实时监控 realTime
   * type : 回放 || 直播
   * code : 监控点编号 监控设备页面String || 实时监控 Array
   * time 回放时间 暂时废弃
   */
  props: ["mode", "code"],
  data() {
    return {
      swfWidth: 900,
      swfHeight: 520,
      // swfWidth: 1920, //宽度
      // swfHeight: 1080, //高度
      playText: "",
      objData: {
        appkey: "", //必填
        ip: "", //必填
        port: 443, //必填
        secret: "", //必填
      },
      cameraIndexCodeasd: "", //必填 摄相机的codeA线挂牌机器人入口
    };
  },

  created() {},
  mounted() {
    this.initPlugin(); // 初始化video界面
    window.addEventListener("resize", this.SetDocOffset);
  },
  destroyed() {
    // 组件销毁后
    this.destoryWnd();
    window.removeEventListener("resize", this.SetDocOffset);
  },
  beforeDestroy() {
    this.destoryWnd();
  },

  methods: {
    ...mapActions("ajax", ["fetchChangeIp"]),
    // 下载插件
    frontDownload() {
      var a = document.createElement("a"); // 创建一个<a></a>标签
      a.href =  "http://172.17.20008.1:8003/VideoWebPlugin.exe"; // 给a标签的href属性值加上地址，注意，这里是绝对路径，不用加 点.
      a.download = "VideoWebPlugin.exe"; // 设置下载文件文件名，这里加上.xlsx指定文件类型，pdf文件就指定.fpd即可
      a.style.display = "none"; // 障眼法藏起来a标签
      document.body.appendChild(a); // 将a标签追加到文档对象中
      a.click(); // 模拟点击了a标签，会触发a标签的href的读取，浏览器就会自动下载了
      a.remove(); // 一次性的，用完就删除a标签
    },
    initPlugin() {
      var that = this;
      oWebControl = new WebControl({
        szPluginContainer: "playWnd",
        iServicePortStart: 15900,
        iServicePortEnd: 15900,
        szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
        cbConnectSuccess() {
          console.log("创建WebControl实例成功");
          oWebControl
            .JS_StartService("window", {
              // WebControl实例创建成功后需要启动服务
              dllPath: "./VideoPluginConnect.dll", // 值"./VideoPluginConnect.dll"写死
            })
            .then(
              () => {
                // // 启动插件服务成功
                oWebControl.JS_SetWindowControlCallback({
                  // 设置消息回调
                  cbIntegrationCallBack: that.cbIntegrationCallBack,
                });
                oWebControl
                  .JS_CreateWnd("playWnd", that.swfWidth, that.swfHeight)
                  .then(() => {
                    //JS_CreateWnd创建视频播放窗口，宽高可设定
                    // oWebControl.JS_SetDocOffset({
                    //   left: 250,
                    //   top: 125,
                    // }); // 更新插件窗口位置
                    oWebControl.JS_Resize(that.swfWidth, that.swfHeight);
                    setTimeout(() => {
                      that.initBtnClicked(); // 创建播放实例成功后初始化
                    }, 1000);
                  });
              },
              () => {
                // 启动插件服务失败
              }
            )
            .catch((err) => {
              console.log(err);
            });
        },
        cbConnectError: function () {
          var that = this;
          // 创建WebControl实例失败
          oWebControl = null;
          that.$message.warning("插件未启动，正在尝试启动，请稍候...");
          that.playText = "插件未启动，正在尝试启动，请稍候...";
          window.WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
          initCount++;
          if (initCount < 3) {
            setTimeout(function () {
              that.initPlugin();
            }, 3000);
          } else {
            that.$message.warning("插件启动失败，请检查插件是否安装！");
            // console.log(initCount)
            that.playText = "插件启动失败，请检查插件是否安装！";
            if (initCount == 3) {
              that.frontDownload();//未安装安装包执行下载安装
            }
          }
        },
        cbConnectClose: () => {
          var that = this;
          // 创建WebControl实例失败
          oWebControl = null;
          that.$message.warning("插件未启动，正在尝试启动，请稍候...");
          that.playText = "插件未启动，正在尝试启动，请稍候...";
          window.WebControl.JS_WakeUp("VideoWebPlugin://"); // 程序未启动时执行error函数，采用wakeup来启动程序
          initCount++;
          if (initCount < 3) {
            setTimeout(function () {
              that.initPlugin();
            }, 3000);
          } else {
            that.$message.warning("插件启动失败，请检查插件是否安装！");
            // console.log(initCount)
            that.playText = "插件启动失败，请检查插件是否安装！";
            if (initCount == 3) {
              that.frontDownload();
            }
          }
        },
      });
    },
    // 初始化
    requestInterface(value) {
      oWebControl.JS_RequestInterface(JSON.parse(value)).then(function (oData) {
        // console.log(oData);
        // this.showCBInfo(JSON.stringify(oData ? oData.responseMsg : ""));
      });
    },
    startPreview(cameraCode) {
      console.log("cameraCode", cameraCode);
      // 点击查询后显示
      oWebControl.JS_ShowWnd();
      var cameraIndexCode = "0e3c3db37ff042f58b4b87e12d08f812"; // 获取输入的监控点编号值，必填
      var streamMode = 0; // 主子码流标识：0-主码流，1-子码流
      var transMode = 1; // 传输协议：0-UDP，1-TCP
      var gpuMode = 0; // 是否启用GPU硬解，0-不启用，1-启用
      var wndId = -1; // 播放窗口序号（在2x2以上布局下可指定播放窗口）

      cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");

      oWebControl.JS_RequestInterface({
        funcName: "startPreview",
        argument: JSON.stringify({
          cameraIndexCode: cameraIndexCode, // 监控点编号
          streamMode: streamMode, // 主子码流标识
          transMode: transMode, // 传输协议
          gpuMode: gpuMode, // 是否开启GPU硬解
          wndId: wndId, // 可指定播放窗口
        }),
      });
    },
    // 获取公钥
    getPubKey(callback) {
      oWebControl
        .JS_RequestInterface({
          funcName: "getRSAPubKey",
          argument: JSON.stringify({
            keyLength: 1024,
          }),
        })
        .then(function (oData) {
          console.log(oData);
          if (oData.responseMsg.data) {
            pubKey = oData.responseMsg.data;
            callback();
          }
        });
    },
    // 设置窗口控制回调
    setCallbacks() {
      oWebControl.JS_SetWindowControlCallback({
        cbIntegrationCallBack: this.cbIntegrationCallBack(),
      });
    },

    // 推送消息
    // cbIntegrationCallBack(oData) {
    //   showCBInfo(JSON.stringify(oData.responseMsg));
    // },

    // RSA加密
    setEncrypt(value) {
      var encrypt = new JSEncrypt();
      encrypt.setPublicKey(pubKey);
      return encrypt.encrypt(value);
    },
    // 显示接口返回的消息及插件回调信息
    showCBInfo(szInfo, type) {
      if (type === "error") {
        szInfo =
          "<div style='color: red;'>" +
          dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss") +
          " " +
          szInfo +
          "</div>";
      } else {
        szInfo =
          "<div>" +
          dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss") +
          " " +
          szInfo +
          "</div>";
      }
      $("#cbInfo").html(szInfo + $("#cbInfo").html());
    },

    initBtnClicked() {
      var that = this;
      var appkey = this.objData.appkey; // 综合安防管理平台提供的appkey，必填
      var secret = this.objData.secret; // 综合安防管理平台提供的secret，必填
      var ip = this.objData.ip; //综合安防管理平台IP地址，必填
      var playMode = 0; //初始播放模式：0-预览，1-回放
      var port = this.objData.port; //综合安防管理平台端口，若启用HTTPS协议，默认443
      var snapDir = ""; //抓图存储路径
      var videoDir = ""; //紧急录像或录像剪辑存储路径
      var layout = "1x1"; //playMode指定模式的布局
      var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
      // var encryptedFields = "secret"; //加密字段，默认加密领域为secret
      var showToolbar = 0; //是否显示工具栏，0-不显示，非0-显示
      var showSmart = 0; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
      var buttonIDs = ""; //自定义工具条按钮
      var params = {
        argument: {
          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, //自定义工具条按钮
        },
        funcName: "init",
      };

      var param = JSON.stringify(params);
      // console.log(params);
      //删除字符串中的回车换行
      param = param.replace(/(\s*)/g, "");

      // 执行初始化
      this.requestInterface(param);
      this.playFn();
    },

    playFn() {
      var cameraIndexCode = this.cameraIndexCodeasd;
      (""); //获取输入的监控点编号值，必填
      var streamMode = 0; //主子码流标识：0-主码流，1-子码流
      var transMode = 1; //传输协议：0-UDP，1-TCP
      var gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用
      var wndId = -1; //播放窗口序号（在2x2以上布局下可指定播放窗口）
      cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
      cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");

      var params = {
        argument: {
          cameraIndexCode: cameraIndexCode, //监控点编号
          streamMode: streamMode, //主子码流标识
          transMode: transMode, //传输协议
          gpuMode: gpuMode, //是否开启GPU硬解
          wndId: wndId, //可指定播放窗口
        },

        funcName: "startPreview",
      };

      var param = JSON.stringify(params);

      // console.log(param);

      //删除字符串中的回车换行
      param = param.replace(/(\s*)/g, "");
      // 执行预览
      this.requestInterface(param);
    },
    // 插件窗口销毁
    destoryWnd() {
      if (oWebControl != null) {
        oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
        oWebControl.JS_RequestInterface({
          funcName: "destroyWnd",
        }); // 销毁当前播放的视频
        oWebControl.JS_Disconnect(); // 断开与插件服务连接
      }
    },
    SetDocOffset() {
      if (oWebControl != null) {
        oWebControl.JS_Resize(this.swfWidth, this.swfHeight);
      }
    },
    // 格式化时间
    dateFormat(oDate, fmt) {
      var o = {
        "M+": oDate.getMonth() + 1, //月份
        "d+": oDate.getDate(), //日
        "h+": oDate.getHours(), //小时
        "m+": oDate.getMinutes(), //分
        "s+": oDate.getSeconds(), //秒
        "q+": Math.floor((oDate.getMonth() + 3) / 3), //季度
        S: oDate.getMilliseconds(), //毫秒
      };
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(
          RegExp.$1,
          (oDate.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      }
      for (var k in o) {
        if (new RegExp("(" + k + ")").test(fmt)) {
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length == 1
              ? o[k]
              : ("00" + o[k]).substr(("" + o[k]).length)
          );
        }
      }
      return fmt;
    },
  },
};
</script>

<style lang="scss" scoped>
html,
body {
  padding: 0;
  margin: 0;
}
.root-haikang-video {
  .playWnd {
    // width: 100%;
    // height: 100%;
  }
}
</style>