Vue 3集成海康Web插件实现视频监控

​🌈个人主页：前端青山

🔥系列专栏：组件封装篇

🔖人终将被年少不可得之物困其一生

依旧青山,本期给大家带来组件封装篇专栏内容:Vue 3集成海康Web插件实现视频监控

引言

最近在项目中使用了 Vue 3 结合海康Web插件来实现视频监控功能，过程中遇到了一些挑战和解决方案。为了帮助开发小伙伴们更好地理解和应用这一技术栈，特此分享一下我们的经验和代码实现。

目录

项目背景

准备工作

1. 官网下载

2.安装插件

3.插件js文件引入vue项目

子组件结构

1. 模板部分

2. 脚本部分

2.1 导入依赖

2.2 定义属性和事件

2.3 定义变量

2.4 RSA加密

2.5 初始化插件

2.6 获取公钥

2.7 初始化视频播放

2.8 播放视频

2.9 隐藏和显示窗口

2.10 监听窗口关闭和调整大小

2.11 处理节点点击事件

2.12 暴露方法

3. 样式部分

父组件调用

1. 模板部分

2. 脚本部分

3. 样式部分

项目背景

在当前的项目中，我们需要实现一个视频监控系统，能够展示多个监控点的实时视频流，并支持用户通过树形结构选择不同的监控点。为了实现这一需求，我们选择了 Vue 3 作为前端框架，并集成了海康Web插件来处理视频流的播放和管理。

准备工作

1. 官网下载

在官网海康开放平台下载视频web插件

2.安装插件

3.插件js文件引入vue项目

将这3个js文件引入vue项目中的public文件夹下新建文件夹放入

然后在index.html文件中根路径引入配置文件

最后我们开始构建本次所需要调用的组件封装功能

子组件结构

1. 模板部分

• : 主容器，包含视频树形结构和视频播放区域。

• : Element Plus 的树形组件，用于展示视频监控点的层级结构。

• : 视频播放区域，包含一个 id 为 corpvideo 的 div，用于嵌入海康Web插件。

  2. 脚本部分

  2.1 导入依赖

  • dialogVideo: 一个响应式变量，用于控制对话框的显示和隐藏。

  • dataTree: 树形结构的数据，用于传递给 ScreenMonitoring 子组件。

  • defaultProps: 树形组件的默认属性，用于传递给 ScreenMonitoring 子组件。

  • screenmonitoring: 一个响应式变量，用于存储 ScreenMonitoring 子组件的实例，以便在父组件中调用其方法。

  • handleSpjkPOIClick: 处理监控点点击事件的方法。当用户点击某个监控点时，会调用子组件的 JSRequestInterface 方法，并传递 poiId 参数。注释掉的部分是获取视频 URL 的逻辑，可以根据实际需求启用。

  • onCloseDialog: 当对话框关闭时调用的方法。调用子组件的 JSHideWnd 方法，停止视频播放。

  • onOpenDialog: 当对话框打开时调用的方法。调用子组件的 initPlugin 方法，初始化视频播放。

    3. 样式部分

    • .my_dialog_slot: 设置对话框内容的样式，确保内容居中显示。

      通过上述代码，我们在父组件中实现了视频监控对话框的显示和隐藏，并在对话框打开和关闭时调用子组件的相应方法，以控制视频的播放和停止。

      本文详细介绍了如何使用 Vue 3 框架集成海康Web插件实现视频监控功能。通过定义属性、事件、变量，以及编写初始化、播放视频、处理节点点击事件等方法，我们成功实现了视频监控系统的前端部分。同时，通过样式部分的定制，确保了良好的用户体验。希望本文对读者在开发类似项目时有所帮助。