vue引入海康播放实时监控(包含遮挡裁剪，销毁窗口方法，设置初始化窗口数)_海康摄像头窗口销毁方法

最后

我可以将最近整理的前端面试题分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等，还在持续整理更新中，希望大家都能找到心仪的工作。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

篇幅有限，仅展示部分截图：

if (this.$refs.myVedio) {

  this.$refs.myVedio.back()
}

},

created() {
// this.getList();
// this.getUserOrgId();
},

// mounted() {
// // window.addEventListener(“storage”, (event) => {
// // if (event.key === “dropdownVisible”) {
// // console.log(“dropdownVisible”, event.newValue);
// // }
// // });
// },
mounted() {
// 初始化海康插件
this.initShow()
// 获取初始化播放列表 都是业务逻辑，不需要的可以不用管
this.getList()
//重点关注
// 进入页面要先设置ip appkey secret才能成功初始化，这里是在登陆后存了缓存,不变的话可以直接在组件写死
// localStorage.setItem(“appKey”); // 综合安防管理平台提供的appkey，必填
// localStorage.setItem(“appSecret”); // 综合安防管理平台提供的secret，必填
// localStorage.setItem(“ip”); // 综合安防管理平台IP地址，必填
// show()根据从后台获取到的code实现实时预览
// initShow() 初始化海康插件
// stopAllPreview() 停止预览
//this.$refs.myVedio.cutting裁剪被海康插件遮挡需要显示的内容//reduction()被遮挡的内容关闭后还原被裁减的海康插件//:wnd-num.sync="WndNum"设置播放窗口数，不需要就直接组件设成默认4或者9//:layout.sync="layout"设置窗口排列方式，不需要就直接组件设成默认2x2或者3x3//this.$refs.myVedio.back() 离开页面调用销毁插件，断开连接

},
methods: {

initShow() {
  this.$refs.myVedio.initPlugin()
  const that = this
  this.oHeight = $(window).height() - 160
  // this.oHeight = $(window).height() - 100;
  // this.oWidth = $("#paneR").height();
  this.oWidth = $('#paneR').width()
  // console.log("this.oHeight", this.oHeight, " this.oWidth", this.oWidth);
  // 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
  const element = document.getElementById('paneR') // dom注意ref=“paneR”不要写在组件上，容易无效
  // 监听及监听后操作
  const robserver = new ResizeObserver((entries) => {
    if (that.$refs.myVedio.oWebControl != null) {
      that.$refs.myVedio.oWebControl.JS_Resize(
        entries[0].contentRect.width,
        that.oHeight
      )
    }
  })
  robserver.observe(element)
},
// 修改保存的播放列表，这是我们的业务逻辑，与海康播放无关
handleEdit() {
  this.dialogVisible = false
  // console.log("checkedSpots", this.checkedSpots, thischeckedSpotsId);
  const params = {
    list: this.checkedSpotsId,
    layout: this.layout
  }

  hikScreen.edit(params).then((res) => {
    if (res.code === "0") {
      this.$message({
        message: '保存成功',
        type: 'success'
      })
      // this.initShow();
      this.getList()
    }
    // console.log("res");
    // this.spots = res.data;
  })
},
getList(flag) {
  // const params = {
  //   deviceName: this.seachValue,
  // };
  hikScreen.list(this.seachValue).then((res) => {
    this.spots = res.data
    var that = this
    if (flag !== 1) {
      hikScreen.selectlist().then((res) => {
        if (res.data.code.length > 0) {
          that.checkedSpots = []
          that.checkedSpotsId = []
          // res.data.code.forEach((item) => {
          //   that.checkedSpots.push(item.deviceCode);
          // });
          res.data.code.forEach((ele, index) => {
            var xData = that.spots.find((item) => {
              return item.id === ele.deviceInfoId
            })
            if (xData) {
              that.checkedSpots.push(xData.deviceCode)
              that.checkedSpotsId.push(ele.deviceInfoId)

              // that.checkedSpots = that.checkedSpots.splice(index, 1);
            }
            // xData
          })
          if (that.checkedSpots.length > that.WndNum) {
            that.checkedSpots.splice(that.WndNum - 1, that.checkedSpots.length - that.WndNum)
            that.checkedSpotsId.splice(that.WndNum - 1, that.checkedSpotsId.length - that.WndNum)
          }

          // this.$forceUpdate()

          // this.layout = res.data.code[0].layout;

          // that.show();
          if (flag !== 2) {
            this.$nextTick(() => {
              this.layout = res.data.code[0].layout
              this.$refs.myVedio.stopAllPreview()
              this.$refs.myVedio.init()
            })
          }

          // setTimeout(this.$refs.myVedio.init(), 5000);
          // this.initShow();
        }

        // console.log("res");
        // this.spots = res.data;
      })
    }
  })
},

handleOpen() {
  this.getList(2)

  this.dialogVisible = true

  this.$nextTick(() => {
    const playWnd = document.getElementById('paneR')
    const dialogBox = document.getElementById('dialogBox')
    var headconWidth = $('.sidebar-logo-container').width()

    // console.log(
    //   "sidebar-logo-container",
    //   document.getElementById("sidebar-logo-container"),
    //   headconWidth
    // );

    // 计算裁剪的偏移量
    this.$refs.myVedio.cutting(
      dialogBox.childNodes[0].offsetLeft -
      playWnd.offsetLeft -
      headconWidth,
      0,
      dialogBox.childNodes[0].offsetWidth + 2,
      dialogBox.childNodes[0].offsetHeight -
      (playWnd.offsetTop + 84 - dialogBox.childNodes[0].offsetTop)
    )
    // console.log("ccc", this.$refs.myVedio.getWndNum());
    // this.$refs.myVedio.getWndNum();
    // this.getList(2);

    // this.show();
  })
},
show() {
  // const code = [
  //   "dc14243a7b1447778299bfc0b8bc8d3d",
  //   // "a942f916f5644cdb940bb8c1bd843a5c",
  //   // "453320f459f142b0a18c946662489619",
  //   // "b6ac907050574a4fac20b0447e2a8289",
  // ];
  this.checkedSpots.forEach((item, index) => {
    this.$refs.myVedio.startPreview(item, index + 1)
  })
  // code.forEach((item) => {
  //   this.$refs.myVedio.startPreview(item);
  // });
},

handleClose() {
  const playWnd = document.getElementById('dialogBox')
  this.$refs.myVedio.reduction(playWnd)

  this.seachValue = ''
}
// 获取组织id
// getUserOrgId() {
//   api
//     .getUserOrgId({ userId: this.$store.state.user.userInfo.username })
//     .then((res) => {
//       if (res.code === "0") {
//         this.getDeviceTree(res.data.organizationId);
//         this.getRoleList(res.data.organizationId);
//       } else {
//         this.$message({
//           type: "error",
//           message: res.message,
//         });
//       }
//     });
// },
// 获取角色列表
// getRoleList(organizationId) {
//   const that = this;
//   api.getRoleList({ orgId: organizationId }).then((res) => {
//     res.data.forEach((ele) => {
//       if (ele.roleId === "ff91429f-e56c-46ab-bc90-f22647a20c09") {
//         // 是否可以操作摄像头角色
//         that.role = 1;
//       }
//     });
//     that.$refs.myVedio.initPlugin();
//   });
// },
// 获取组织树
// getDeviceTree(organizationId) {
//   const data = {
//     userId: this.$store.state.user.userInfo.username,
//     orgId: organizationId,
//     cameraName: "",
//   };
//   api.deviceTree(data).then((res) => {
//     if (res.code === "0") {
//       this.treeData = res.data;
//     } else {
//       this.$message({
//         type: "error",
//         message: res.message,
//       });
//     }
//   });
// },
// handleClick(data) {
//   this.$store.dispatch("app/closeSideBar", { withoutAnimation: false });
//   if (data.nodeType === 2) {
//     this.$refs.myVedio.startPreview(data.nodeId);
//   }
// },
// filterNode(value, data) {
//   if (!value) return true;
//   return data.nodeName.indexOf(value) !== -1;
// },

}
}

---


## 封装组件vedio：



> 
> 这个可以复用
> 
> 
>