Vue3 中集成海康 H5 监控视频播放功能

​🌈个人主页：前端青山
🔥系列专栏：Vue 篇
🔖 人终将被年少不可得之物困其一生

依旧 青山, 本期给大家带来 Vuet 篇专栏内容:Vue- 集成海康 H5 监控视频播放功能

目录

一、引言

二、环境搭建

三、代码解析

子组件部分

1. 导入模块和组件

2. 定义组件属性和事件

3. 初始化变量

4. 初始化视频插件

5. 控制分屏数量

6. 视频线路弹框按钮

7. 生命周期钩子

8. 初始化视频播放

9. 处理事件

10. 调用插件播放

父组件调用

一、引言

随着视频监控技术的发展，许多应用场景需要集成实时视频监控功能。本文将详细介绍如何在 Vue 3 应用中集成海康 H5 监控视频播放功能，实现视频的实时播放、分屏显示以及全屏切换等功能。

二、环境搭建

为了确保代码能够正常运行，我们需要准备以下开发环境：

• Vue 3：用于构建前端应用。

• Element Plus：用于 UI 组件库。

• 海康 H5 SDK：用于播放视频流。

三、代码解析

子组件部分

• 功能说明

  • play_windows 容器：包含两个主要部分，左侧为树形结构，右侧为视频播放区域。

  • el-tree 组件：展示监控设备树形结构，点击节点触发 pitchOns 方法。

  • 视频播放区域：通过按钮控制不同的分屏模式（1×1、3×3、4×4）及全屏模式。

  • id='corpvideo'：指定视频播放容器的 ID，供 H5 SDK 使用。

1. 导入模块和组件

import {ref, onMounted, nextTick, defineProps, defineExpose, defineEmits, watch, onBeforeUnmount} from 'vue';
import {ElMessage} from 'element-plus';
import {videoallList} from '@/api/screenVideo/index';
import {getGetByCode} from '@/api/videoSurveillance/index';

2. 定义组件属性和事件

const emit = defineEmits(["handleSpjkPOIClick"]);
const props = defineProps({
  playURL: String, // 视频 URL
  splitNum: Number, // 分屏播放，默认最大分屏 4*4
  dataTree: Object, // 树形数据
  defaultProps: Object
});

3. 初始化变量

let dataTree = ref(props.dataTree);
let defaultProps = ref(props.defaultProps);
let loading = ref(false);
let myPlugin = ref(null);
let index = ref(1); // 多屏播放显示第几个
let mode = ref(1); // 0 为低级播放，1 为高级播放
const urlList = ref([]);
let playURLs = ref("");
const jsPlugin = (window as any).JSPlugin;

4. 初始化视频插件

const myPlugins = () => {
  myPlugin.value = new jsPlugin({
    szId: 'corpvideo', // 需要英文字母开头，唯一性，必填
    szBasePath: '/h5player', // 必填，与 h5player.min.js 的引用目录一致
    bSupporDoubleClickFull: true, // 是否支持双击全屏，默认 true
    iMaxSplit: 4, // 分屏播放，默认最大分屏 4*4
    iCurrentSplit: splitNum.value,
    oStyle: {borderSelect: '#FFCC00',},
    openDebug: true,
  });
};

5. 控制分屏数量

const tabPosition = ref(1);
const playBackNum = (num: any) => {if (num == "3") {myPlugin.value.JS_FullScreenDisplay(true).then(() => {console.log(`wholeFullScreen success`) },
      (e: any) => {console.error(e) }
    );
    return;
  }
  if (num == splitNum.value) {return;}
  splitNum.value = num;
};

6. 视频线路弹框按钮

const splitNum = ref(1);
const videoIndex = ref(4); // 视频信息弹框默认值 index
const videoTabClick = (type: number) => {videoIndex.value = Number(type);
  if (type == 1) {
    splitNum.value = 3;
    const totalWindows = splitNum.value * splitNum.value;
    for (let i = 0; i  console.log(`Playing in window ${i}`),
        (e: any) => console.error('Error playing video', e)
      );
    }
  } else if (type == 2) {
    splitNum.value = 4;
    const totalWindows = splitNum.value * splitNum.value;
    for (let i = 0; i  console.log(`Playing in window ${i}`),
        (e: any) => console.error('Error playing video', e)
      );
    }
  } else if (type == 3) {myPlugin.value.JS_FullScreenDisplay(true).then(() => {console.log(`wholeFullScreen success`) },
      (e: any) => {console.error(e) }
    );
    return;
  } else if (type == 4) {splitNum.value = 1;}
  myPlugin.value.JS_ArrangeWindow(splitNum.value).then(() => {console.log(`arrangeWindow to ${splitNum.value}x${splitNum.value} success`) },
    (e: any) => {console.error(e) }
  );
  console.log(splitNum.value, '监控视频的值');
};

7. 生命周期钩子

onMounted(() => {nextTick(() => {myPlugins();
    // 事件回调绑定
    myPlugin.value.JS_SetWindowControlCallback({windowEventSelect: function (iWndIndex: any) { // 插件选中窗口回调
        console.log('windowSelect callback:', iWndIndex);
      },
      pluginErrorHandler: function (iWndIndex: any, iErrorCode: any, oError: any) { // 插件错误回调
        console.log('pluginError callback:', iWndIndex, iErrorCode, oError);
      },
      windowEventOver: function (iWndIndex: any) { // 鼠标移过回调
        // console.log(iWndIndex);
      },
      windowEventOut: function (iWndIndex: any) { // 鼠标移出回调
        // console.log(iWndIndex);
      },
      windowEventUp: function (iWndIndex: any) { // 鼠标 mouseup 事件回调
        // console.log(iWndIndex);
      },
      windowFullCreenChange: function (bFull: any) { // 全屏切换回调
        console.log('fullScreen callback:', bFull);
      },
      firstFrameDisplay: function (iWndIndex: any, iWidth: any, iHeight: any) { // 首帧显示回调
        console.log('firstFrame loaded callback:', iWndIndex, iWidth, iHeight);
      },
      performanceLack: function () { // 性能不足回调
        console.log('performanceLack callback:');
      }
    });
  });
});
​
onBeforeUnmount(() => {console.log('切换了');
});

8. 初始化视频播放

const initialize = (playURL: any, urls?: any[]) => {
  urlList.value = urls;
  playURLs.value = playURL;
  loading.value = true;
  index.value = myPlugin.value.currentWindowIndex;
  myPlugin.value.JS_Play(playURL, { playURL, mode: mode.value}, index.value).then(() => {loading.value = false}, // 成功操作
    (e: any) => { 
      loading.value = false;
      ElMessage.error('监控视频异常'); // 失败操作
    }
  );
};

9. 处理事件

const pitchOns = (e: any) => {if (!e || !e.self) {if (e.equipmentCoding) {handleAddChild(e);
    }
    return;
  }
  if (e.children) {emit("handleSpjkPOIClick", e.self.indexCode, '');
    return;
  } else {handleAddChild(e);
  }
};

const handleAddChild = (e: any) => {if (!e || !e.self) {if (e.equipmentCoding) {videoUrl(e.equipmentCoding);
    }
    return;
  }
  if (e.self.indexCode) {
    let params = {UnitIndexCode: e.self.indexCode,};
    videoallList(params).then((res: any) => {if (res.data.rows.length == 0) {emit("handleSpjkPOIClick", e.self.indexCode, '');
      } else {e.children = e.children || [];
        // 修改 res.data.rows 中所有数据对象的字段 equipmentName 变成 name
            res.data.rows = res.data.rows.map((child: any) => ({
              ...child,
              name: child.equipmentName, // 将 equipmentName 字段复制到 name 字段
              // 删除原 equipmentName 字段
            }));
            res.data.rows.forEach((child: any) => {e.children.push(child);
            });
            // 展开当前节点
            (e as any).expanded = true;
            }
          })
        }
}

10. 调用插件播放

const videoUrl =(e:any)=>{
    let params = {equipmentCoding: e,};
    getGetByCode(params).then(res => {setTimeout(() => {initialize(res.data.url);
      }, 1);
    });
}
         // 使用 watch 监听 splitNum 的变化
   watch(splitNum, (newValue, oldValue) => {if (newValue !== oldValue) {myPlugins();
    myPlugin.value.JS_ArrangeWindow(splitNum.value).then(() => {console.log(`arrangeWindow to ${splitNum.value}x${splitNum.value} success`) },
          (e: any) => {console.error(e) }
        )
  }
});
// 最后暴露方法
      defineExpose({
        initialize,
        myPlugins
      })

父组件调用

1. 初始化数据树：

   • dataTree 和 dataTree1 是两个响应式数组，用于存储处理后的数据。

   • screenmonitoring 是一个引用，用于指向 ScreenMonitoring 子组件的实例。

   • defaultProps 是传递给子组件的默认属性配置。

2. 组件挂载时：

   • nextTick()：等待 DOM 更新完成后再执行后续操作。

   • getTreeJson(params)：从服务器获取数据，并处理返回的数据。

   • extractNameAndRebuildTree(item)：递归处理每个节点，提取 name 并放在最外层。

3. 处理点击事件：

   • handleSpjkPOIClick(poiId, coord)：当点击某个 时，获取对应的视频 URL 并初始化视频播放。

   • getGetByCodes(params)：从服务器获取视频 URL 数据。

   • setTimeout(() => {...}, 1)：延迟 1 毫秒后初始化视频播放。

通过这种方式，父组件能够有效地初始化数据树，并在点击 树状 时触发视频播放。

本文旨在详细介绍如何在 Vue 3 应用中集成海康 H5 监控视频播放功能，实现视频的实时播放、分屏显示以及全屏切换等功能。