海康webVue监控求解决

Question

全屏可以正常放大播放，但是退出全屏后，海康插件的canvas的宽高都变成0了，没找到原因，请求各位，帮忙解决一下问题

import store from '@/store'
let WebVideo = {
  // 全局保存当前选中窗口
  //可以不用设置这个变量，有窗口参数的接口中，不用传值，开发包会默认使用当前选择窗口
  g_iWndIndex: null,
  indexAll:{},    //窗口集合

  //插件宽高  (单位px,100%默认撑满插件容器)
  szWidth: '100%',
  szHeight: '100%',

  // 分屏类型 1:1*1  2:2*2  3：3*3  
  iWndowType: 1,

  // ip
  szDeviceIdentify:'',

  // 登录信息
  userInfo:{},
  



  // 初始化插件
  init: function (options) {
    console.log(options,"options");
    return new Promise(function (resolve, reject) {
      WebVideo.szDeviceIdentify = options.ip + "_" + options.port;
      WebVideo.userInfo = options;

      let width = options.width ?? WebVideo.szWidth,
          height = options.height ?? WebVideo.szHeight,
          iWndowType = options.iWndowType ?? WebVideo.iWndowType;

      WebVideoCtrl.I_InitPlugin(width, height,{
        //是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
        bWndFull: true,
        //插件背景颜色  bg，子窗口bg，窗口边框，窗口边框选中
        szColorProperty: "plugin-background:#18293c; sub-background:#18293c; sub-border:#18293c; sub-border-select:#0000ff", //2:PS 11:MP4
        //分屏
        iWndowType: iWndowType,
        cbSelWnd: function (xmlDoc) {
          WebVideo.g_iWndIndex = parseInt($(xmlDoc).find("SelectWnd").eq(0).text(), 10);
          console.log("xmlDoc",$(xmlDoc).find("SelectWnd"));
        },
        // 插件初始化完成回调,必带项
        cbInitPluginComplete: () => {
          WebVideoCtrl.I_InsertOBJECTPlugin(options.domID);
          resolve();
        }
      })
    })

  },

  // 登录
  loginOn: function(){
    return new Promise(function (resolve, reject) {
    let info = WebVideo.userInfo;

    if ("" == info.ip || "" == info.port) {
      return;
    }

    var iRet = WebVideoCtrl.I_Login(info.ip, 1, info.port, info.username, info.password, {
      success: function (xmlDoc) {    
        console.log("登陆成功");        
        setTimeout(function () {
          resolve();
        }, 10);
      },
      error: function (status, xmlDoc) {
        console.log("登录失败！", status, xmlDoc);     
      }
    });

    if (-1 == iRet) {
      console.log("已登录过！");
    }
  })


  },

  // 退出登录
  logout: function(){
    // if (null == WebVideo.szDeviceIdentify) {
    //   return;
    // }

    var iRet = WebVideoCtrl.I_Logout(WebVideo.szDeviceIdentify);
    if (0 == iRet) {
      console.log("退出成功！");
    } else {
      console.log("退出失败！");
    }
  },


  /**
   * options={
   *  iWndIndex-播放窗口（不传默认为0)
   *  iStreamType 码流类型 1-主码流，2-子码流，默认使用主码流预览
   *  iChannelID 播放通道号，默认通道 1
   *  bZeroChannel 是否播放零通道，默认为 false
   *  iPort RTSP 端口号，可以选择传入，如果不传，开发包会自动判断设备的 RTSP 端口
   * }
   */
  // 开始预览  设备标识，参数对象
  startRealPlay: function(iChannelID,iWndIndex){
    WebVideo.indexAll[`video${iWndIndex}`] = WebVideoCtrl.I_GetWindowStatus(iWndIndex);
    if (null == WebVideo.szDeviceIdentify) {
      return;
    }
console.log(iChannelID,iWndIndex,"45454554a");
    var startRealPlayVideo = () => {
      WebVideoCtrl.I_StartRealPlay(WebVideo.szDeviceIdentify, {
        iChannelID: iChannelID,
        bZeroChannel: false,
        iStreamType: 2,
        iWndIndex:iWndIndex,
        success: function () {
            console.log('预览成功')
        },
        error: function (status, xmlDoc) {
          if (403 === status) {
              console.log('设备不支持Websocket取流')
          } else {
              console.log('预览失败')
          }
        }
      });
    };

    if (WebVideo.indexAll[`video${iWndIndex}`] != null) {// 已经在播放了，先停止
      WebVideoCtrl.I_Stop({
        success: function () {
          startRealPlayVideo();
        }
      });
    } else {
      startRealPlayVideo();
    }
    
  },  

  // 停止预览
  stopRealPlay: function(iWndIndex){
    // if ( WebVideo.indexAll[`video${iWndIndex}`] != null) {
      WebVideoCtrl.I_Stop({
        iWndIndex:iWndIndex,
        success: function () {
          console.log('停止预览成功')
        },
        error: function () {
          console.log('停止预览失败')
        }
      });
    // }
  },

  // 全屏
  clickFullScreens(iWndIndex) {
    WebVideoCtrl.I_FullScreen(iWndIndex,true);
  },


}



export default WebVideo

<template>
  <div class="videoPage full" :class="flag?'active':''" v-if="videoShow">
    <div>
      <span class="title"> {{ info.deviceName }}</span>
      <p class="flex flex-align flex-center pl-6">
        <img
          src="@/assets/images/homePage/fire/sx1.png"
          class="point pr-9"
          @click="screenHandler"
        />
        <img
          src="@/assets/images/homePage/fire/sx2.png"
          class="point"
          @click="close"
        />
      </p>
      <div id="divVideo" class="divPlugins" ref="plugin"></div>
    </div>
    <!-- <div id="app" v-show="false">
      <input type="text" v-on:keyup.esc="screenHandler"> 
    </div> -->
  </div>
</template>

<script>
import { WebVideo } from "@/api/HKwebVideo/HKwebVideo.js";
import { decrypt } from "@/utils/jsencrypt";
export default {
  data() {
    return {
      videoShow: false,
      flag: false,
      webRtcServer: null,
      webVideo: "",
      info:null
    };
  },

  methods: {
    open(options) {
      this.videoShow = true;
      this.info = options;
      console.log(this.info);
      console.log(options.rtspUrl);

      this.$nextTick(() => {
        this.initVideoPlay(options);
      });

      
    },

    close() {
      this.videoShow = false;
      this.flag = false;
      this.stopVideoPlay();
    },

    // 全屏
    screenHandler(){
      this.$HK.clickFullScreens(0)
    },

    initVideoPlay(options) {
      let that = this;
      let width = this.$refs.plugin.offsetWidth;
      let height = this.$refs.plugin.offsetHeight;
      let optionInfo = {
        width: width,
        height: height,
        iWndowType: 1,
        domID: "divVideo",
        ip: options.ipUrl,
        port: options.port,
        username: options.userName,
        password: decrypt(options.password),
      };
      that.$HK.init(optionInfo).then(() => {
        that.$HK.loginOn().then(() => {
          that.$HK.startRealPlay(options.deviceChannel,0); 
        });
      });
    },

    // 停止
    stopVideoPlay() {
      this.$HK.stopRealPlay(0);
      this.$HK.logout();
      
    },
  },
  // beforeDestroy() {
  //   if(this.webVideo !== ''){
  //     this.stopVideoPlay();
  //   }
  //   this.webRtcServer.disconnect()
  // },
};
</script>

<style lang="scss" scoped>
@function vw($px) {
  @return $px/1920 * 100vw;
}
@function vh($px) {
  @return $px/1080 * 100vh;
}
.videoPage {
  background-color: rgba(0, 0, 0, 0.4);
  box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(4px);
  position: absolute;
  z-index: 999999;
  pointer-events: auto;

  > div {
    // width: 46vw;
    // height: 58vh;
    position: absolute;
    left: 50%;
    top: 50%;
    padding-top: 38px;
    -webkit-transform: translate(-50%);
    transform: translate(-50%, -50%);
    background: red;
    pointer-events: auto;
    border: 2px solid rgba(28, 191, 254, 1);
    background: linear-gradient(
      136deg,
      rgba(1, 14, 20, 0.88) 1%,
      rgba(0, 29, 54, 0.87) 100%
    );
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    .title{
      position: absolute;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
      color: #fff;

    }
    > p {
      width: 56px;
      height: 26px;

      position: absolute;
      right: 0;
      top: 0;
      z-index: 9;
      background: url('~@/assets/images/homePage/fire/sx-bg.png') no-repeat;
      background-size: 100% 100%;
    }

    > i {
      position: absolute;
      top: 0;
      color: #01bbf5;
    }
  }
}
.divPlugins{
  width: 800px;
  height: 450px;
}

.active {
  position: fixed;
  top: 0;

  > div {
    width: 100% !important;
    height: 100% !important;
  }
}
</style>

Answer 1

让阿豪来帮你解答，本回答参考chatgpt3.5编写提供，如需一对一服务私聊我哦

问题描述： 全屏状态下，海康插件的 canvas 可以正常放大播放，但是退出全屏后，插件的 canvas 的宽高都变成 0 了。无法找到问题原因。 解决方案：

1. 海康插件 API 的限制：海康插件在全屏下的 canvas 宽高变为 100%，如果在退出全屏的时候，canvas 的宽高没有设置成具体数值，那么就会变成 0。
2. 解决方法：在退出全屏的时候，重新设置 canvas 的宽高。 案例： 代码示例：

// 全屏状态下设置海康插件的 canvas 的宽高为 100%
let canvas = document.getElementById('canvas');
canvas.style.width = '100%';
canvas.style.height = '100%';
// 退出全屏后重新设置 canvas 的宽高为具体数值，这里的 w 和 h 是具体数值
let w = 800;
let h = 600;
canvas.style.width = `${w}px`;
canvas.style.height = `${h}px`;