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

🕗 发布于 2024-09-25 10:50 javascript 前端 开发语言

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

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

一、引言

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

二、环境搭建

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

Vue 3：用于构建前端应用。
Element Plus：用于 UI 组件库。
海康 H5 SDK：用于播放视频流。

三、代码解析

子组件部分

<template>
    <div class="play_windows" v-loading="loading" element-loading-background="rgba(122, 122, 122, 0.8)">
        <div class="tree-form">
            <el-tree
                ref="tree"
                :data="dataTree"
                :props="defaultProps"
                :highlight-current="true"
                @node-click="pitchOns"
            >
                <template #default="{ node, data }">
                    <span class="custom-tree-node">
                        {{ data.name }}
                    </span>
                </template>
            </el-tree>
        </div>
        <div class="video">
            <div class="dialog-slot-video-header-right">
                <el-button class="myButton" :class="{ 'active': videoIndex == 4 }" @click="videoTabClick(4)">1×1</el-button>
                <el-button class="myButton" :class="{ 'active': videoIndex == 1 }" @click="videoTabClick(1)">3×3</el-button>
                <el-button class="myButton" :class="{ 'active': videoIndex == 2 }" @click="videoTabClick(2)">4×4</el-button>
                <el-button class="myButton" :class="{ 'active': videoIndex == 3 }" @click="videoTabClick(3)">整体全屏</el-button>
            </div>
            <div id='corpvideo'></div>
        </div>
    </div>
</template>

功能说明
- 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';

功能说明：导入了 Vue 的一些核心函数，如 ref、onMounted、nextTick 等，以及 Element Plus 的消息提示组件 ElMessage 和相关 API。

2. 定义组件属性和事件

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

功能说明：定义了组件的属性 props 和自定义事件 emit，用于接收父组件传递的数据和触发事件。

3. 初始化变量

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

功能说明：定义了一些响应式变量，用于存储数据和状态，如 loading 用于控制加载状态，myPlugin 用于存储视频插件实例。

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,
  });
};

功能说明：定义了一个方法 myPlugins，用于初始化视频插件实例，并配置相关参数。

5. 控制分屏数量

const tabPosition = ref<any>(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;
};

功能说明：定义了一个方法 playBackNum，用于控制分屏数量，并支持全屏显示。

6. 视频线路弹框按钮

const splitNum = ref<any>(1);
const videoIndex = ref<number>(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 < totalWindows; i++) {
      const url = urlList.value[i] || urlList.value[0];
      myPlugin.value.JS_Play(url, { playURL: url, mode: mode.value }, i).then(
        () => 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 < totalWindows; i++) {
      const url = urlList.value[i] || urlList.value[0];
      myPlugin.value.JS_Play(url, { playURL: url, mode: mode.value }, i).then(
        () => 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, '监控视频的值');
};

功能说明：定义了一个方法 videoTabClick，用于控制视频线路弹框按钮，并根据不同的类型调整分屏数量和播放视频。

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('监控视频异常'); // 失败操作
    }
  );
};

功能说明：定义了一个方法 initialize，用于初始化视频播放，并处理加载状态和错误提示。

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
      })

父组件调用

<template>
  <div>
    <ScreenMonitoring ref="screenmonitoring" :dataTree="dataTree" :defaultProps="defaultProps" @handleSpjkPOIClick="handleSpjkPOIClick" />
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue';

const dataTree = ref<any>([]);
const dataTree1 = ref<any>([]);
let screenmonitoring = ref();
const defaultProps = {
  children: 'children',
  label: 'name',
};

onMounted(() => {
  nextTick(() => {
    let params = {};
    getTreeJson(params).then((res: any) => {
      let list = res.rows[0].children[9].children;

      list.forEach((item: any) => {
        extractNameAndRebuildTree(item);  // 对每个根节点执行递归提取
      });

      dataTree.value = list;  // 将处理后的列表赋值给 dataTree
    });
  });
});

const extractNameAndRebuildTree = (node: any) => {
  // 如果节点有 self，提取 name 并放在最外层
  if (node.self && node.self.name) {
    node.name = node.self.name;
  }
  // 如果节点有 children，递归处理每个子节点
  if (node.children && node.children.length > 0) {
    node.children.forEach((child: any) => {
      extractNameAndRebuildTree(child);
    });
  }
};
const handleSpjkPOIClick = (poiId: string, coord: string) => {
  let params = {
    UnitIndexCode: poiId,
  };
  getGetByCodes(params).then((res: any) => {
    setTimeout(() => {
      screenmonitoring.value.initialize(res.data.urls[0], res.data.urls);
    }, 1);
  });
};
</script>

初始化数据树：
- dataTree 和 dataTree1 是两个响应式数组，用于存储处理后的数据。
- screenmonitoring 是一个引用，用于指向 ScreenMonitoring 子组件的实例。
- defaultProps 是传递给子组件的默认属性配置。
组件挂载时：
- nextTick()：等待 DOM 更新完成后再执行后续操作。
- getTreeJson(params)：从服务器获取数据，并处理返回的数据。
- extractNameAndRebuildTree(item)：递归处理每个节点，提取 name 并放在最外层。
处理点击事件：
- handleSpjkPOIClick(poiId, coord)：当点击某个时，获取对应的视频 URL 并初始化视频播放。
- getGetByCodes(params)：从服务器获取视频 URL 数据。
- setTimeout(() => { ... }, 1)：延迟 1 毫秒后初始化视频播放。

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

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

原文地址：https://blog.csdn.net/2302_76329106/article/details/142491419

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：【CoppeliaSim V4.7】The Python interpreter could not handle the wrapper script
下一篇：java springboot 集成 okHttp 发送get、post请求

c++ std::string初始化为nullptr的问题
在c++ std::string或者std::wstring 中是否可以使用nullptr初始化，首先可以说的是是可以用nullptr初始化的，但是程序编译没有问题，运行起来就挂了，char*是可以
阅读更多2024-09-25
HarmonyOS鸿蒙开发实战（5.0）多文件下载监听应用案例实践
多文件下载监听在应用开发中是一个非常常见的需求。本示例将介绍如何使用request上传下载模块实现多文件下载监听，如监听每个文件下载任务的进度，任务暂停，下载完成等下载情况。
阅读更多2024-09-25
实现网上超市：SpringBoot技术详解
基本类和包装类从根本的定义上，都有很明显的区分，计算机运行也会有很明显的差别，如果用错了会编译错误还会影响运行效果的，Java的各种优点只需要按部就班的学习使用即可。Oracle数据库不比SQL Se
阅读更多2024-09-25
必应广告投放推广收费标准和流程
微软必应Bing广告平台，凭借其强大的技术实力和精准的数据分析能力，已成为众多企业广告推广的首选。携手云衔科技，企业不仅能够轻松完成必应Bing国内广告的开户流程，还能享受到专业的代运营服务，实现精准
阅读更多2024-09-25
算法：数值的整数次方
本文主要介绍数值的整数次方问题
阅读更多2024-09-25
服务器安装SG15扩展全版本（宝塔+任意服务器通用）完整教程
这篇文章介绍了在服务器上安装 SG15 扩展全版本的步骤，以宝塔为平台，适用于任意服务器。作者为了保护免费插件不被盗卖，决定记录下安装 SG15 扩展的过程。
阅读更多2024-09-25
【C++掌中宝】C++ 中的空指针救世主——nullptr
C++中nullptr的相关内容分享
阅读更多2024-09-25
【LLM开源项目】LLMs-微调框架-LLaMA-Factory入门指南v3.0
我们通过量化技术将高精度表示的预训练模型转换为低精度的模型，从而在避免过多损失模型性能的情况下减少显存占用并加速推理，我们希望低精度数据类型在有限的表示范围内尽可能地接近高精度数据类型的表示，因此我们
阅读更多2024-09-25
多用户自定义商城小程序源码系统独立部署到源代码包以及搭建部署教程
这一系统的开发旨在为企业和商家提供一个自主掌控、高度定制化的商城平台，使其能够根据自身业务特点和目标客户群体，打造独具特色的线上购物体验。同时，独立部署的方式让用户拥有更大的自主权和数据安全性，满足了
阅读更多2024-09-25
开源UNI-SOP云统一认证平台
一款开源的商用级别认证平台UNI-SOP
阅读更多2024-09-25

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

一、引言

二、环境搭建

三、代码解析

子组件部分

1. 导入模块和组件

2. 定义组件属性和事件

3. 初始化变量

4. 初始化视频插件

5. 控制分屏数量

6. 视频线路弹框按钮

7. 生命周期钩子

8. 初始化视频播放

9. 处理事件

10.调用插件播放

父组件调用

相关文章