vue2实现海康威视根据海康插件进行监控实时预览和回放功能，全套代码，开箱即用。

---

 这是一套拿到手就能直接用的根据海康提供的摄像机节点实时预览和回放的全步骤代码，开箱即用。

先点赞后观看，养成好习惯。

前言

 我的是基于vue2写的，vue3可以看我下一篇文章。

因我已经从上家公司离职，而我当时的项目还在跑，说明这一套代码还是可以使用的。

 点击跳转至vue3关于海康视频开发文章。

很多人在开发vue项目的时候，不知道怎么去开发视频实时预览和回放功能，然后一直查文档，再去看别人写的项目，就是无从下手。这篇文章是我刚开始接触到这个项目的时候从头到尾写下来的，功能已经实现希望有用。

---

一、插件下载与安装

首先去海康开放平台下载海康提供的Demo，这里面有项目需要用到的播放器插件和js文件。

点击进入海康开放平台

我使用的是V1.6.1版本。

上面的海康地址好像是打不开了，具体地址需要官网的可以自行去查。

下面我附上我阿里网盘的下载地址:网盘链接

然后下载这一个，首次下载需要登录，没有的直接手机号注册一个就行了。

然后安装视频播放插件，如下图。 

二、使用步骤

 1.引入js

 在vue项目中的public目录下新建文件夹，把刚才下载好的js复制到这个文件夹里面，然后再在public目录下的index.html文件里面引入sj文件。

 

2.代码部分

代码如下（示例）：

这里是template部分，只给一个盒子，然后给个宽和高就行了，插件会自适应盒子大小和位置的。

ref对应的名字在初始化插件的时候会用到。

    <div class="videoMain" ref="playWndBox">
        <div
          id="playWnd"
          class="playWnd"
          :style="{
            height: playWndHeight + 'px',
            width: playWndWidth + 'px',
          }"
        ></div>
      </div>

这是data里面的数据，可根据自己需求修改。

 data() {
        return {
            // 视频盒子的高度
            playWndHeight: "",
            // 视频盒子的宽度
            playWndWidth: "",
            oWebControl: null,
            initCount: 0,
            pubKey: "",
            cameraIndexCode: "",  // 这里面是监控点编号
            objData: {
                appkey: "",        //海康平台提供的appkey
                ip: "",            //平台地址
                secret: "",        //海康平台提供的secret
                port: 443,
                playMode: 0,         // 0 预览 1回放
                layout: "1x1",     //页面展示的模块数【16】
                
            },
        }
    },

 这是monted里面的代码，组件加载后先获取视频盒子的高度和宽度

   // 首次加载时的到父容器的高度
    this.playWndHeight = this.$refs.playWndBox.clientHeight;
    // 首次加载时的到父容器的宽度
    this.playWndWidth = this.$refs.playWndBox.clientWidth;

    // 初始化播放器插件
    this.$nextTick(() => {
      this.initPlugin();
    });

    // 监听scroll事件，使插件窗口尺寸跟随DIV窗口变化
    window.addEventListener("scroll", () => {
      if (this.oWebControl != null) {
        this.oWebControl.JS_Resize(
          this.$refs.playWndBox.clientWidth,
          this.$refs.playWndBox.clientHeight
        );
        this.setWndCover();
      }
    });

    // 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
    window.addEventListener("resize", (e) => {
      if (this.oWebControl != null) {
        this.oWebControl.JS_Resize(
          this.$refs.playWndBox.clientWidth,
          this.$refs.playWndBox.clientHeight
        );
        this.setWndCover();
      }
    });

 组件销毁的时候要调用插件销毁方法，要不然页面会有插件残留。