checkhand/WEB_INTERFACE_GUIDE.md

🖥️ 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  # 第二优先级

🎬 如何生成测试视频

如果测试视频不存在，运行以下命令生成：

# 生成测试视频
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：按钮点击没有反应

原因：测试视频文件不存在 解决：

# 检查文件是否存在
ls -la data/videos/

# 如果没有文件，生成测试视频
python create_test_video.py

问题2：出现错误信息

查看日志：在Web界面的"系统日志"区域查看具体错误信息

问题3：视频不显示

检查：

• 确保测试视频文件存在
• 查看浏览器控制台是否有错误
• 检查服务器日志

🎯 使用步骤

1. 确保测试视频存在：

   # 检查文件
   ls data/videos/
   
   # 如果没有，生成测试视频
   python create_test_video.py
   

2. 启动服务器：

   ./start_service.sh
   

3. 打开Web界面： 访问 http://localhost:5000

4. 点击测试按钮： 点击"开始本地视频测试"按钮

5. 观察结果： 查看视频预览和检测数据

💡 提示

• 这个功能主要用于系统测试和功能演示
• 如果要使用真实视频流，需要：
  • 启动时指定视频文件：./start_service.sh --test-video your_video.mp4
  • 或者通过外部客户端发送视频流

🔗 相关文档

• 本地测试指南 - 详细的本地测试说明
• README.md - 项目总体说明
• 系统测试脚本 - 自动化测试

🎉 现在试试吧！

1. 运行 python create_test_video.py 生成测试视频
2. 启动服务器 ./start_service.sh
3. 打开 http://localhost:5000
4. 点击"开始本地视频测试"按钮
5. 观察手部检测的神奇效果！