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

本文链接：https://blog.csdn.net/2401_84616230/article/details/138958329

下面是我在学习HTML和CSS的时候整理的一些笔记，有兴趣的可以看下：

HTML、CSS部分截图

进阶阶段

进阶阶段，开始攻 JS，对于刚接触 JS 的初学者，确实比学习 HTML 和 CSS 有难度，但是只要肯下功夫，这部分对于你来说，也不是什么大问题。

JS 内容涉及到的知识点较多，看到网上有很多人建议你从头到尾抱着那本《JavaScript高级程序设计》学，我是不建议的，毕竟刚接触 JS 谁能看得下去，当时我也不能，也没那样做。

我这部分的学习技巧是，增加次数，减少单次看的内容。就是说，第一遍学习 JS 走马观花的看，看个大概，去找视频以及网站学习，不建议直接看书。因为看书看不下去的时候很打击你学下去的信心。

然后通过一些网站的小例子，开始动手敲代码，一定要去实践、实践、实践，这一遍是为了更好的去熟悉 JS 的语法。别只顾着来回的看知识点，眼高手低可不是个好习惯，我在这吃过亏，你懂的。

1、JavaScript 和 ES6

在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。

JavaScript部分截图

2、前端框架

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。

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

以 Vue 为例，我整理了如下的面试题。

Vue部分截图

      this.$refs.myVedio.reduction('drop')
    })
    var top = this.$store.state.user.rightMenuTop
    var width = localStorage.getItem('rightMenuWidth')
    var left = this.$store.state.user.rightMenuLeft
    var height = localStorage.getItem('rightMenuHeight')
    this.$nextTick(() => {
      const playWnd = document.getElementById('paneR')
      // let dialogBox = document.getElementById("dialogBox");
      var headconWidth = $('.sidebar-logo-container').width()

      // 计算裁剪的偏移量
      this.$refs.myVedio.cutting(
        left - playWnd.offsetLeft + 2,
        0,
        width,
        height - (playWnd.offsetTop + 84 - top)
      )
      // console.log("ccc", this.$refs.myVedio.getWndNum());
      // this.$refs.myVedio.getWndNum();
      // this.getList(2);

      // this.show();
    })
  }
  //  if (
  //   !this.$store.state.user.rightMenuVisible &&
  //   this.$route.name === "PlacementIntegration"
  // )
  else if (this.$route.name === 'PlacementIntegration') {
    // this.handleClose();
    // let playWnd = document.getElementById("dialogBox");
    this.$nextTick(() => {
      // 窗口还原
      this.$refs.myVedio.reduction('drop')
    })
  }
}

},
// 离开页面销毁窗口，断开连接
beforeDestroy() {
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. $re f s . m y V e d i o . c u tt in g 裁剪被海康插件遮挡需要显示的内容 // re d u c t i o n () 被遮挡的内容关闭后还原被裁减的海康插件 // : w n d - n u m . sy n c = " Wn d N u m " 设置播放窗口数，不需要就直接组件设成默认 4 或者 9// : l a yo u t . sy n c = " l a yo u t " 设置窗口排列方式，不需要就直接组件设成默认 2 x 2 或者 3 x 3// t hi s .$ 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：



> 
> 这个可以复用
> 
> 
>