手指关键点追踪 - MediaPipe手势检测

MediaPipe Hands 是 Google 开发的高精度手部关键点检测解决方案。它使用机器学习模型从单帧图像中实时检测手部的 21个3D关键点，包括指尖、关节和手腕位置。该技术在浏览器端运行，无需服务器，所有数据处理均在本地完成，保障用户隐私。

21个关键点分布如下：

• 0 - 手腕：手掌根部中心点
• 1-4 - 拇指：CMC关节(1) → MCP关节(2) → IP关节(3) → 指尖(4)
• 5-8 - 食指：MCP关节(5) → PIP关节(6) → DIP关节(7) → 指尖(8)
• 9-12 - 中指：MCP关节(9) → PIP关节(10) → DIP关节(11) → 指尖(12)
• 13-16 - 无名指：MCP关节(13) → PIP关节(14) → DIP关节(15) → 指尖(16)
• 17-20 - 小指：MCP关节(17) → PIP关节(18) → DIP关节(19) → 指尖(20)

每个关键点包含 x, y, z 三个坐标值，分别表示水平位置、垂直位置和深度信息。

手势识别基于关键点之间的几何关系：

• 手指伸直判断：比较指尖与对应关节的y坐标差值和距离
• 拇指特殊处理：拇指运动方向与其他手指不同，通过比较拇指尖到食指MCP的距离来判断
• 组合判断：根据各手指的伸直/弯曲状态组合识别特定手势（如张开手掌=5指伸直，拳头=5指弯曲）

支持识别的手势包括：张开手掌、握拳、胜利手势✌️、大拇指向上👍、食指指向☝️、OK手势、摇滚手势🤘等。

检测效果受以下因素影响：

• 光照条件：光线充足、均匀的环境效果最佳
• 背景复杂度：简洁背景有助于提高检测精度
• 手部距离：手部应占据画面适当比例，不要过远或过近
• 运动速度：快速移动可能导致跟踪丢失
• 遮挡：手指交叉或部分遮挡会降低检测质量

可尝试调整摄像头角度、改善光照或降低运动速度来优化检测效果。

本工具的突出优势是完全本地处理：

• 摄像头画面仅用于浏览器端的实时分析
• 所有 AI 推理在本地 WebAssembly 环境中运行
• 不会上传任何图像或视频到远程服务器
• 无需联网即可进行检测（模型加载后）

这使得本工具非常适合处理敏感场景，如手势控制、医疗康复监测等。

需要支持 WebAssembly 和 WebRTC 的现代浏览器：

• ✅ Chrome 87+ / Edge 87+
• ✅ Firefox 89+
• ✅ Safari 15.4+ (macOS / iOS)
• ✅ Opera 73+
• ⚠️ 需要 HTTPS 或 localhost 才能访问摄像头
• ⚠️ 移动端浏览器（Chrome Mobile、Safari）均支持