# 海康插件

**Repository Path**: boy_lin/hikvision-plugin

## Basic Information

- **Project Name**: 海康插件
- **Description**: 海康 H5player 插件 Demo，修复官方直播切换一分屏问题，完整实现直播工具（截图/云台控制/倍率缩放/分屏） / 回放 （进度条 / 日期选择 / 视频工具）
- **Primary Language**: JavaScript
- **License**: BSD-3-Clause
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2026-04-23
- **Last Updated**: 2026-04-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


## 🔥 核心价值
解决海康官方H5player插件Demo存在的以下问题，同时完整实现直播/回放全功能：
- ✅ 修复直播切换画面时「一分屏异常」的问题；
- ✅ 直播页面：完整实现各类操作工具（全屏、声音、截图、云台控制、倍率缩放等）；
- ✅ 回放页面：重写UI，完整实现进度条拖动、视频工具（暂停/播放/倍速）、日期时间选择等核心功能。


## 📸 效果展示
### 直播页面（修复一分屏）
![alt text](a17b7e8ba43e47cc38a28176c238d1c8.png)
![alt text](6da511bd7d7aa49a8997448d9e499f1d.png)

### 回放页面（完整UI+功能）
![alt text](0b71f120f8d8bee7ff92f08ad3090d2b.png)
![alt text](121ed214174f1e85bf6ed8791e71113e.png)
![alt text](5a515d6f8b2317bf560b6046b6775122.png)
## 🚀 快速上手
### 1. 环境要求
- 浏览器：Chrome/Firefox/Edge（兼容ES6）；
- 依赖：海康H5player插件（已内置在public/h5player目录）,注意：插件必须放置在public目录下,并且在index.html中引入h5player.min.js文件；
- 前提：拥有海康设备的合法直播/回放流地址。
### 2. 使用步骤
1. 直播：
   - 调用直播接口：使用getLiveStream接口获取直播流地址，将地址传入h5player插件进行播放。
   - 测试：点击测试按钮，输入摄像头信息（播放URL），测试摄像头播放；例如：ws://**.***.***.**/openUrl/vsig5GEkPII46effba0ea4a42cbaead8。
   ![alt text](image.png)
2. 回放：
   - 调用回放接口：使用getPlaybackStream接口获取回放流地址，将地址传入h5player插件进行播放。
   - 测试：点击测试按钮，输入摄像头信息（播放URL），测试摄像头播放。