vue使用海康视频web插件

完成的效果是：点击按钮然后弹出所播放的视频

使用的海康web插件：由海康官网下载的视频WEB插件V1.5.2版本，解压完毕后目录如下：

第一步：安装插件

安装在bin文件下面的VideoWebPlugin.exe

第二步：引入必要的文件

在public下面创建文件夹，文件名称可以自己起名字，我这里的是lib下面的js，然后把demo文件下的jquery-1.12.4.min.js、jsencrypt.min.js、web-control_1.2.5.min.js三个文件复制到所创建的文件夹下，最后在public/index.html引入所需要的文件

引入：

然后在views下面创建一个vue文件：

父组件：            播放                                    x                                                                             import stationVideo from "./stationVideo"export default {    components: {        stationVideo    },    data() {        return {            dialogVisible: false,            cameraId: "",//通过接口拿到的每个视频的id        }    },    methods: {        //关闭窗口        close() {            this.dialogVisible = false            this.$refs.stationVideo.hideWindow()        },        talkTo() {                  this.dialogVisible = true        }    }}子组件：        export default {  props: ["cameraId"],  data() {    return {      // 插件对象实例，初始化为null，需要创建多个插件窗口时，需要定义多个插件对象实例变量，各个变量唯一标志对应的插件实例      oWebControl: null,      bIE: !!window.ActiveXObject || "ActiveXObject" in window, // 是否为IE浏览器      pubKey: "", // demo中未使用加密，可根据需求参照开发指南自行使用加密功能      initCount: 0,      playMode: 0, // 播放类型，0-预览，1-回放      timer: null,      objData: {        argument: {          authUuid: "",          cameraIndexCode: "",          ezvizDirect: 0,          gpuMode: 0,          streamMode: 0,          transMode: 1,          wndId: -1,      cascade: 1        },        funcName: "startPreview"      }    };  },  mounted() {    this.initPlugin();    setTimeout(()=>{      this.initBtn();      this.UpdatePlayParamValue()    },1000)  },  methods: {    // 创建插件实例，并启动本地服务建立websocket连接，创建插件窗口    initPlugin() {      this.oWebControl = new WebControl({        szPluginContainer: "playWnd",        iServicePortStart: 15900,        iServicePortEnd: 15900,        szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid        cbConnectSuccess: () => {          this.initCount = 0;          this.setCallbacks();          this.oWebControl            .JS_StartService("window", {              dllPath: "./VideoPluginConnect.dll",            })            .then(              () => {                this.oWebControl.JS_CreateWnd("playWnd", 2100, 900).then(() => {                  console.log("JS_CreateWnd success");                  this.oWebControl                    .JS_RequestInterface({                      funcName: "getRSAPubKey",                      argument: JSON.stringify({                        keyLength: 1024,                      }),                    })                    .then((oData) => {                      console.log(oData);                      if (oData.responseMsg.data) {                        this.pubKey = oData.responseMsg.data;                      }                    });                });              },              () => {}            );        },        cbConnectError: () => {          console.log("cbConnectError");          this.oWebControl = null;          $("#playWnd").html("插件未启动，正在尝试启动，请稍候...");          WebControl.JS_WakeUp("VideoWebPlugin://");          this.initCount++;          if (this.initCount  {              this.initPlugin();            }, 3000);          } else {            $("#playWnd").html("插件启动失败，请检查插件是否安装！");          }        },        cbConnectClose: (bNormalClose) => {          // 异常断开：bNormalClose = false          // JS_Disconnect正常断开：bNormalClose = true          console.log("cbConnectClose");          this.oWebControl = null;          $("#playWnd").html("插件未启动，正在尝试启动，请稍候...");          WebControl.JS_WakeUp("VideoWebPlugin://");          this.initCount++;          if (this.initCount  {              this.initPlugin();            }, 3000);          } else {            $("#playWnd").html("插件启动失败，请检查插件是否安装！");          }        },      });    },    initBtn() {       let param = JSON.stringify({          "argument": {            "appkey": "",            "ip": "",            "port": 443,            "secret": "",            "enableHTTPS": 1,            "language": "zh_CN",            "layout": "1x1",            "playMode": 0,            "reconnectDuration": 5,            "reconnectTimes": 5,            "showSmart": 0,            "showToolbar": 1,            "toolBarButtonIDs": "2048,2049,2050,2304,2306,2305,2307,2308,2309,4096,4608,4097,4099,4098,4609,4100",            "snapDir": "D:/snap",            "videoDir": "D:/video"          },          "funcName": "init"        }, null, 2);      this.isJSON(param);      var JsonParam = JSON.parse(param);      if (!JsonParam.hasOwnProperty("argument")) {        // this.showCBInfo("init failed, param miss argument field");      } else {        if (JsonParam.argument.hasOwnProperty("playMode")) {          this.playMode = JsonParam.argument.playMode;        }        //如果包含加密处理，处理加密字段        if (JsonParam.argument.hasOwnProperty("encryptedFields")) {          var enFields = JsonParam.argument.encryptedFields;          var strArray = new Array();          strArray = enFields.split(",");          for (var i = 0, len = strArray.length; i  {        console.log(oData);        // this.showCBInfo(JSON.stringify(oData ? oData.responseMsg : ""));        // this.UpdatePlayParamValue();        this.oWebControl.JS_Resize(2100, 900); //      });    },    // 判断字符串是否为json    isJSON(str) {      if (typeof str == "string") {        try {          var obj = JSON.parse(str);          if (typeof obj == "object" && obj) {            return true;          } else {            // this.showCBInfo("param is not the correct JSON message");            return false;          }        } catch (e) {          // this.showCBInfo("param is not the correct JSON message");          return false;        }      }      console.log("It is not a string!");    },    // RSA加密    setEncrypt(value) {      var encrypt = new JSEncrypt();      encrypt.setPublicKey(this.pubKey);      return encrypt.encrypt(value);    },    // 格式化时间    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.,          (oDate.getFullYear() + "").substr(4 - RegExp..length)        );      }      for (var k in o) {        if (new RegExp("(" + k + ")").test(fmt)) {          fmt = fmt.replace(            RegExp.,            RegExp..length == 1              ? o[k]              : ("00" + o[k]).substr(("" + o[k]).length)          );        }      }      return fmt;    },    // 设置窗口控制回调    setCallbacks() {      this.oWebControl.JS_SetWindowControlCallback({        cbIntegrationCallBack: this.cbIntegrationCallBack,      });    },    UpdatePlayParamValue() {      this.objData = {        argument: {          authUuid: "",          cameraIndexCode: this.cameraId,          ezvizDirect: 0,          gpuMode: 0,          streamMode: 0,          transMode: 1,          wndId: -1,      cascade: 1        },        funcName: "startPreview"      }      let param = JSON.stringify(this.objData, null, 2);      this.playBtn(param);    },    playBtn(param) {      this.requestInterface(param);    },    // value为字符串，JS_RequestInterface仅接收json格式的变量，且需要先解析出argument，并且将argument字段的内容转为字符串    requestInterface(value) {      this.isJSON(value);      let JsonParam = JSON.parse(value);      console.log(JsonParam);      let JsonArgument = JsonParam.argument;      JsonParam.argument = JSON.stringify(JsonArgument);      this.oWebControl.JS_RequestInterface(JsonParam).then((oData) => {        console.log(oData);        // this.showCBInfo(JSON.stringify(oData ? oData.responseMsg : ""));      });    },    //隐藏窗口    hideWindow() {      this.oWebControl.JS_HideWnd();  // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题      //更新为停止所有播放请求的参数，根据初始化时的playmode字段，设置为预览或回放      this.objData = {        argument: {          authUuid: "",          cameraIndexCode: "",          ezvizDirect: 0,          gpuMode: 0,          streamMode: 0,          transMode: 1,          wndId: -1,      cascade: 1        },        funcName: "stopAllPreview"      }      let param = JSON.stringify(this.objData, null, 2);      this.playBtn(param);      console.log("stopAllPreview success");    }  },};.playWnd {  width: 2100px;  height: 100%;  /* border: 1px solid red; */}.cbInfoDiv {  float: left;  width: 360px;  margin-left: 16px;  border: 1px solid #7f9db9;}.cbInfo {  height: 200px;  padding: 5px;  border: 1px solid #7f9db9;  overflow: auto;  word-break: break-all;}.operate {  margin-top: 24px;}.operate::after {  content: "";  display: block;  clear: both;}.operate .btns {  height: 32px;}.module {  float: left;  width: 340px;  min-height: 320px;  margin-left: 16px;  padding: 16px 8px;  box-sizing: border-box;  border: 1px solid #e5e5e5;}.module .item {  margin-bottom: 4px;}.module .label {  width: 150px;  display: inline-block;  vertical-align: middle;  margin-right: 8px;  text-align: right;}.module input[type="text"],.module select {  box-sizing: border-box;  display: inline-block;  vertical-align: middle;  margin-left: 0;  width: 150px;  min-height: 20px;}.module .btn {  min-width: 80px;  min-height: 24px;  margin-top: 16px;  margin-left: 158px;}/* 弹框风格.white_content { display: none; position: absolute; top: 25%; left: 25%; width: 30%; height: 30%; padding: 20px; border: 3px solid orange; background-color: white; z-index:1002; overflow: auto;}   */.white_content {  display: none;  position: absolute;  top: 80px;  left: 450px;  width: 600px;  height: 300px;  border: 3px solid orange;  background-color: white;  z-index: 1002;}

里面的appkey，secret，ip等必要参数需要联系海康的对接人员，摄像头的编号值（cameraIndexCode）这个需要从接口获取

效果图：鼠标hover的时候出现操作栏