# MediapipeHands

**Repository Path**: ffedu/mediapipe-hands

## Basic Information

- **Project Name**: MediapipeHands
- **Description**: 基于JavaScript用Mediapipe识别手势
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-27
- **Last Updated**: 2025-12-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# MediaPipe Hand Landmarker - 手势识别 Demo

完整复现 [MediaPipe Studio Hand Landmarker Demo](https://mediapipe-studio.webapps.google.com/studio/demo/hand_landmarker) 的功能。

## ✨ 功能特性

### 1. 标准 21 点手势检测
- 基于 MediaPipe Tasks Vision API
- 实时检测手部 21 个关键点
- 支持同时检测 2 只手
- 高精度跟踪，低延迟

### 2. 官方可视化风格
- ✅ 绿色连接线（骨架）
- ✅ 红色关键点（白色描边）
- ✅ 标准拓扑结构连接
- ✅ 平滑的动画效果

### 3. 手势识别
支持识别以下手势：
- ✋ Open Hand（张开手）
- ✊ Fist（握拳）
- ☝️ Point（指向）
- ✌️ Peace/Victory（剪刀手）
- 👌 OK（OK 手势）
- 🤙 Shaka（冲浪手势）
- 🖖 Three（三指）
- 🖐️ Four（四指）

### 4. 实时性能
- 60+ FPS（取决于硬件）
- GPU 加速
- 低延迟响应

## 🎯 21 个关键点说明

```
0  - WRIST (手腕)

拇指：
1  - THUMB_CMC
2  - THUMB_MCP
3  - THUMB_IP
4  - THUMB_TIP

食指：
5  - INDEX_FINGER_MCP
6  - INDEX_FINGER_PIP
7  - INDEX_FINGER_DIP
8  - INDEX_FINGER_TIP

中指：
9  - MIDDLE_FINGER_MCP
10 - MIDDLE_FINGER_PIP
11 - MIDDLE_FINGER_DIP
12 - MIDDLE_FINGER_TIP

无名指：
13 - RING_FINGER_MCP
14 - RING_FINGER_PIP
15 - RING_FINGER_DIP
16 - RING_FINGER_TIP

小指：
17 - PINKY_MCP
18 - PINKY_PIP
19 - PINKY_DIP
20 - PINKY_TIP
```

## 🚀 使用方法

### 1. 启动本地服务器

```bash
# 使用 Python
python -m http.server 8000

# 或使用 Node.js
npx http-server -p 8000
```

### 2. 访问应用

在浏览器中打开：`http://localhost:8000`

### 3. 开始检测

1. 点击"启动摄像头"按钮
2. 授予摄像头权限
3. 将手放在摄像头前
4. 实时查看关键点和手势识别结果

## 🔧 技术参数

### 检测参数
- `numHands`: 2（最多检测 2 只手）
- `minHandDetectionConfidence`: 0.5
- `minHandPresenceConfidence`: 0.5
- `minTrackingConfidence`: 0.5
- `runningMode`: VIDEO
- `delegate`: GPU

### 可视化参数
- 连接线宽度：2px
- 连接线颜色：#00FF00（绿色）
- 关键点半径：4px（内圈）、6px（外圈）
- 关键点颜色：#FF0000（红色）+ #FFFFFF（白色描边）

## 📊 性能表现

- **延迟**：< 50ms
- **帧率**：60+ FPS（Chrome + GPU）
- **准确率**：与官方 Demo 一致
- **支持分辨率**：1280x720（可调整）

## 🌐 浏览器兼容性

- ✅ Chrome 90+
- ✅ Edge 90+
- ✅ Safari 14+
- ✅ Firefox 88+

## 📝 API 接口

### 检测结果格式

```javascript
{
  landmarks: [
    [
      {x: 0.5, y: 0.6, z: -0.1},  // 第 0 个关键点
      {x: 0.52, y: 0.58, z: -0.08}, // 第 1 个关键点
      // ... 共 21 个点
    ]
  ],
  handednesses: [
    [{categoryName: "Left", score: 0.98}]
  ]
}
```

### 关键点坐标说明

- `x`, `y`: 归一化坐标 [0, 1]
- `z`: 深度值（相对于手腕）

## 🔗 参考链接

- [MediaPipe Studio Demo](https://mediapipe-studio.webapps.google.com/studio/demo/hand_landmarker)
- [MediaPipe Documentation](https://developers.google.com/mediapipe)
- [MediaPipe Tasks Vision API](https://developers.google.com/mediapipe/solutions/vision/hand_landmarker)

## 📄 许可证

MIT License