DT_screen/src/components/hk/hkCamara.vue

<template>
  <div class="video-player">
    <div id="divPlugin1" class="divPlugin"></div>
    <!-- <div id="divPlugin" class="divPlugin" ref="divPlugin" v-if="plugin">
        </div> -->
    <!-- <div class="down" v-else>
            <a href="http://jbfsys.oss-cn-beijing.aliyuncs.com/download/VideoWebPlugin-1564128302790.exe">下载</a>
        </div> -->
  </div>
</template>
<script>
export default {
  name: "videoPlayer1",
  props: {
    //从父组件传来的数据，IP、用户名、密码、端口号
    companyVideoData: {
      type: Array,
    },
    //分屏
    videoType: Number,
  },
  data() {
    return {
      plugin: true,
      zoom: window.devicePixelRatio,
      iWidth: "100%",
      iHeight: "100%",
      webVideo: {},
      iStreamType: 1,
      iProtocol: 1,
      bZeroChannel: false,
      xmlDocData: {},
      g_iWndIndex: 0, //可以不用设置这个变量，有窗口参数的接口中，不用传值，开发包会默认使用当前选择窗口
      videoNum: "",
    };
  },
  created() {},
  beforeUnmount() {
    window.removeEventListener("resize", this.handleResize);
  },
  mounted() {
    this.videoInitPlugin();
  },
  destroyed() {
    this.$router.go(0);
  },
  methods: {
    handleResize() {
      this.zoom = window.devicePixelRatio;
      setTimeout(() => {
        WebVideoCtrl.I_Resize(
          600 / (this.zoom / 1.25),
          240 / (this.zoom / 1.25)
        );
      }, 1000);
    },
    videoInitPlugin() {
      var iRet = WebVideoCtrl.I_CheckPluginInstall();
      if (iRet === -1) {
        alert("您还未安装过插件，请安装WebComponentsKit.exe插件！");
        return;
      }
      this.initPlugin();
    },
    //插件初始化
    initPlugin() {
      var that = this;
      WebVideoCtrl.I_InitPlugin({
        bWndFull: true, //是否支持单窗口双击全屏，默I_CheckPluginInstall
        iWndowType: 1,

        bDebugMode: true,
        cbSelWnd: function (xmlDoc) {},
      });
      WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin1");

      // 检查插件是否最新
      if (-1 == WebVideoCtrl.I_CheckPluginVersion()) {
        alert("检测到新的插件版本，请双击WebComponents.exe插件，进行升级！");
        // return;
      }
      setTimeout(() => {
        WebVideoCtrl.I_Resize(
          600 / (this.zoom / 1.25),
          240 / (this.zoom / 1.25)
        );
      }, 100);
      window.addEventListener("resize", this.handleResize);

      this.clickLogin();
      setTimeout(() => {
        this.$emit("init", true);
      }, 1000);
    },
    clickLogin() {
      console.log("this.companyVideoData :>> ", this.companyVideoData);
      const uniqueArr = [];
      const uniqueSet = new Set();

      this.companyVideoData.forEach((obj) => {
        if (obj !== undefined) {
          const key = JSON.stringify(obj);
          if (!uniqueSet.has(key)) {
            uniqueSet.add(key);
            uniqueArr.push(obj);
          }
        }
      });
      console.log(uniqueArr);
      for (let index = 0; index < uniqueArr.length; index++) {
        this.singleLogin(uniqueArr[index], index);
      }
    },
    singleLogin(Data, index) {
      setTimeout(() => {
        var that = this;
        WebVideoCtrl.I_Login(
          Data.ip,
          1,
          Data.Port,
          Data.Username,
          Data.Password,
          {
            timeout: 1000,
            async: false,
            success: function (xmlDoc) {
              console.log("开始预览"); //不能删除
              let oChannels = that.getChannelInfo();
              that.initPlay(Data, index,oChannels);
            },
            error: function () {
              console.log("login error");
            },
          }
        );
      }, 2000);
    },
    //获取通道
    getChannelInfo() {
      var that = this;
      // 模拟通道
      WebVideoCtrl.I_GetAnalogChannelInfo(this.szIP, {
        async: false,
        success: function (xmlDoc) {
          var oChannels = $(xmlDoc).find("VideoInputChannel");
          nAnalogChannel = oChannels.length;
          console.log("获取模拟通道成功！");
          return oChannels
        },
        error: function () {
          console.log("获取模拟通道失败！" + WebVideoCtrl.I_GetLastError());
        },
      });
      // 数字通道
      WebVideoCtrl.I_GetDigitalChannelInfo(that.companyVideoData.ip, {
        async: false,
        success: function (xmlDoc) {
          var oChannels = $(xmlDoc).find("InputProxyChannelStatus");
         return oChannels
        },
        error: function () {
          WebVideoCtrl.I_GetLastError();
          console.log("获取数字通道失败！" + WebVideoCtrl.I_GetLastError());
        },
      });
      // 零通道
      WebVideoCtrl.I_GetZeroChannelInfo(this.szIP, {
        async: false,
        success: function (xmlDoc) {
          var oChannels = $(xmlDoc).find("ZeroVideoChannel");
          return oChannels
        },
        error: function () {
          console.log("获取零通道失败！" + WebVideoCtrl.I_GetLastError());
        },
      });
    },
    //初始化视频，为了让用户进来就可以看到视频播放
    initPlay(data, index,oChannels) {
      let szIP = data.ip; //ip地址
      //循环16次是因为插件分屏最大为4x4（可以根据情况而定）

      WebVideoCtrl.I_StartRealPlay(szIP, {
        iStreamType: 1,
        iChannelID: oChannels.id,//按格式修改
        iWndIndex: index,
      });
    },
    // 点击查看具体哪个监控
    startRealPlay(oChannels) {
      let that = this;
      let szIP = this.companyVideoData.ip; //ip地址
      let iChannelID = oChannels; //播放通道号
      var iStreamType = 1;
      var oWndInfo = WebVideoCtrl.I_GetWindowStatus(that.g_iWndIndex);
      if (oWndInfo != null) {
        // 已经在播放了，先停止
        WebVideoCtrl.I_Stop();
      }
      WebVideoCtrl.I_StartRealPlay(szIP, {
        iStreamType: iStreamType,
        iChannelID: iChannelID,
      });
    },
  },
  //因为项目中需求，总公司要查看所有子公司的监控，所以做了个监听来切换查看各个子公司的监控
  watch: {
    companyVideoData: {
      handler(val, oldval) {
        if (oldval) {
          for (let i = 0; i < 16; i++) {
            WebVideoCtrl.I_Stop(i); //停止正在播放的页面
          }
          this.$emit("func", "");
          WebVideoCtrl.I_Logout(oldval.ip);
          this.clickLogin(this.companyVideoData);
        }
      },
      immediate: true, //关键
      deep: true,
    },
    videoType: {
      handler(val, oldval) {
        if (oldval) {
          WebVideoCtrl.I_ChangeWndNum(this.videoType); //分屏
          this.initPlay();
        }
      },
      immediate: true, //关键
      deep: true,
    },
  },
};
</script>
<style scoped>
.video-player {
  width: 120%;
  height: 120%;
}
.divPlugin {
  width: 100%;
  height: 100%;
  color: red;
  /* display: flex; */
  justify-content: center;
  align-items: center;
  font-size: 18px;
  position: fixed;
  /* top: 680px; */
  /* top: 0px; */
  /* right: 0px; */

  overflow: hidden;
}
.down {
  width: 100%;
  height: 100%;
  color: red;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
}
.down a {
  color: red;
}
</style>