vue-element-admin 集成海康威视监控插件VideoWebPlugin

项目场景：

项目为智慧园区后台管理系统
需求 全部摄像头实时监控&&单个监控直播&&单个监控回放
集成 海康威视监控 WEB插件
网上有非常多的资源代码实例 大多数还需要根据自己的需求改进
实测 完美兼容

---

演示：

页面监控

弹出层监控

---

准备

海康开放平台
注册个账号=>下载 =>iSecureCenter=> 视频WEB插件V1.5.1
下载后在bin文件夹 VideoWebPlugin.exe 双击安装 (仅支持Windows)

里面的几个demo非常有用 挨个测试一下 至少知道怎么一回事
最关键 是这个开发指南 所有你想试下的功能 都在里边了

或许能用到的几个网址:
直播地址测试
Vue接入监控视频技术整理
基于vue项目 vue-video-player实现rtmp hls视频流播放
vue cli中播放rtmp&flv/m3u8/rtsp ; 在html原生页面中播放m3u8
vue截图，上传，下载，预览
vue实现播放rtmp直播视频流
阿里云Web端播放器

方案

封装一个海康威视的播放器组件

这里从父组件传入了几个参数 以及一些引入的库 实际开发因人而异
*index :当前组件所属页面 因为由多个页面用到
*type : 回放 || 直播
*code : 监控点编号 监控设备页面String || 实时监控 Array
*time 回放时间设定 暂时废弃
几点注意 :
监控组件的 宽高自适应外层父组件 ;
项目中另外一个监控组件是装在vxe-modal弹出层的,这个modal可以拖拽,拖拽时需要对视频组件进行重新定位,会有卡顿感;
监控视频的显示优先级最高,不知道怎么调整,因此需要确保每次只能初始化一个插件实例;
组件视频采用九宫格3x3展示,超出部分分页实现,我也写过根据监控id总量动态布局,后来默认了;
创建插件实例 initPlugin 这个方法 朝父组件发射了个事件 通知父组件 我这边正在初始化,防止重复加载监控实例;

/**
 * @author deep1nBlur
 * @email mailbrcee@gmail.com 
 * @create date 2020-11-05 09:10:05 
 * @modify date 2020-11-05 09:10:05
 * @desc [海康监控视频组件]
 *  */
<template>
  <div
    class="root-haikang-video"
    id="video-frame"
    :style="{
      width: sizes.width,
      height: sizes.height
    }"
  >
    <div
      id="playWnd"
      class="playWnd"
      v-html="playText"
      :style="{ width: swfWidth + 'px', height: swfHeight + 'px' }"
    ></div>

    <el-button-group
      v-if="show"
      style="margin-top: 5px; display: flex; justify-content: center"
    >
      <el-button
        size="mini"
        type="primary"
        icon="el-icon-arrow-left"
        @click="nextPage('left')"
        :disabled="page == 0"
        >上一页</el-button
      >
      <el-button
        size="mini"
        type="primary"
        @click="nextPage('right')"
        :disabled="page + 1 == pageNum"
        >下一页<i class="el-icon-arrow-right el-icon--right"
      /></el-button>
    </el-button-group>
  </div>
</template>

<script>
import request from "@/utils/request";
impor