135 lines
3.6 KiB
Markdown
135 lines
3.6 KiB
Markdown
# 🖥️ Web界面使用指南
|
||
|
||
## 📋 界面功能说明
|
||
|
||
### 🎯 "开始本地视频测试" 按钮功能
|
||
|
||
这个按钮的作用是：
|
||
- **启动预置测试视频** - 使用系统自带的测试视频进行手部检测
|
||
- **无需外部视频流** - 不需要摄像头或外部视频文件
|
||
- **一键测试** - 点击按钮即可开始测试系统功能
|
||
|
||
### 🔧 按钮工作原理
|
||
|
||
1. **点击按钮** → 发送 `start_local_test` 事件到服务器
|
||
2. **服务器检查** → 查找以下测试视频文件：
|
||
- `data/videos/test_basic.mp4` (基础手部移动测试)
|
||
- `data/videos/test_gesture.mp4` (手势测试)
|
||
3. **自动播放** → 找到测试视频后自动开始播放和检测
|
||
4. **实时显示** → 在Web界面显示检测结果
|
||
|
||
### 📁 测试视频文件要求
|
||
|
||
按钮会按顺序查找以下文件：
|
||
```
|
||
data/videos/test_basic.mp4 # 第一优先级
|
||
data/videos/test_gesture.mp4 # 第二优先级
|
||
```
|
||
|
||
### 🎬 如何生成测试视频
|
||
|
||
如果测试视频不存在，运行以下命令生成：
|
||
|
||
```bash
|
||
# 生成测试视频
|
||
python create_test_video.py
|
||
|
||
# 或者指定类型
|
||
python create_test_video.py --type both --duration 10
|
||
```
|
||
|
||
### 🔍 按钮状态说明
|
||
|
||
| 按钮状态 | 说明 |
|
||
|---------|------|
|
||
| "开始本地视频测试" | 按钮就绪，可以点击 |
|
||
| "启动中..." | 正在启动测试，按钮禁用 |
|
||
| 恢复原状态 | 5秒后自动恢复 |
|
||
|
||
### 📊 测试结果显示
|
||
|
||
点击按钮后，你会看到：
|
||
|
||
1. **系统日志区域**：
|
||
- ✅ 成功信息：`本地测试已开始，使用视频: data/videos/test_basic.mp4`
|
||
- ❌ 错误信息：`未找到测试视频文件`
|
||
- 💡 帮助信息：`请先生成测试视频：python create_test_video.py`
|
||
|
||
2. **视频预览区域**：
|
||
- 显示测试视频内容
|
||
- 显示手部检测结果
|
||
- 显示关键点和连接线
|
||
|
||
3. **控制面板**：
|
||
- 实时更新的X、Y、Z角度值
|
||
- 抓取状态指示器
|
||
- 当前动作显示
|
||
- FPS计数
|
||
|
||
### 🚨 常见问题
|
||
|
||
#### 问题1：按钮点击没有反应
|
||
**原因**：测试视频文件不存在
|
||
**解决**：
|
||
```bash
|
||
# 检查文件是否存在
|
||
ls -la data/videos/
|
||
|
||
# 如果没有文件，生成测试视频
|
||
python create_test_video.py
|
||
```
|
||
|
||
#### 问题2：出现错误信息
|
||
**查看日志**：在Web界面的"系统日志"区域查看具体错误信息
|
||
|
||
#### 问题3：视频不显示
|
||
**检查**：
|
||
- 确保测试视频文件存在
|
||
- 查看浏览器控制台是否有错误
|
||
- 检查服务器日志
|
||
|
||
### 🎯 使用步骤
|
||
|
||
1. **确保测试视频存在**：
|
||
```bash
|
||
# 检查文件
|
||
ls data/videos/
|
||
|
||
# 如果没有，生成测试视频
|
||
python create_test_video.py
|
||
```
|
||
|
||
2. **启动服务器**：
|
||
```bash
|
||
./start_service.sh
|
||
```
|
||
|
||
3. **打开Web界面**：
|
||
访问 `http://localhost:5000`
|
||
|
||
4. **点击测试按钮**：
|
||
点击"开始本地视频测试"按钮
|
||
|
||
5. **观察结果**：
|
||
查看视频预览和检测数据
|
||
|
||
### 💡 提示
|
||
|
||
- 这个功能主要用于**系统测试**和**功能演示**
|
||
- 如果要使用**真实视频流**，需要：
|
||
- 启动时指定视频文件：`./start_service.sh --test-video your_video.mp4`
|
||
- 或者通过外部客户端发送视频流
|
||
|
||
### 🔗 相关文档
|
||
|
||
- [本地测试指南](LOCAL_TEST_GUIDE.md) - 详细的本地测试说明
|
||
- [README.md](README.md) - 项目总体说明
|
||
- [系统测试脚本](test_system.py) - 自动化测试
|
||
|
||
## 🎉 现在试试吧！
|
||
|
||
1. 运行 `python create_test_video.py` 生成测试视频
|
||
2. 启动服务器 `./start_service.sh`
|
||
3. 打开 `http://localhost:5000`
|
||
4. 点击"开始本地视频测试"按钮
|
||
5. 观察手部检测的神奇效果！ |