我如何构建一个完全在浏览器中运行的实时手部追踪平台

Source: Dev.to

传统手部追踪的问题

• 安装 Python、OpenCV 以及其他十几项依赖
• 要求用户信任本地应用下载
• 在不同操作系统间处理摄像头权限的麻烦
• 为了处理手部动作而额外启动服务器
• 延迟让“实时”体验变得不可能

仅浏览器解决方案

如果手部追踪只需在浏览器标签页中工作会怎样？

// Detect pinch gesture
const distance = Math.sqrt(
  Math.pow(thumbTip.x - indexTip.x, 2) +
  Math.pow(thumbTip.y - indexTip.y, 2)
);
const angle = Math.min(distance * 500, 90);

这段真实代码将捏合手势映射到动画控制。MediaPipe 负责检测，Three.js 渲染视觉效果。

• 浏览器加载 MediaPipe – 无需安装，只需 CDN 引入
• 摄像头提供关键点 – 实时追踪 21 个手部点
• JavaScript 映射手势 – 将手指位置转化为动作
• Three.js 渲染输出 – 以 60 fps 流畅的 3D 可视化

整个流水线在客户端运行。你的摄像头画面永远不会离开你的设备。

浏览器 SDK（零安装）

1. 访问 Playground → 选择一个特效 → 授权摄像头 → 完成

云 API

curl -X POST https://visionpipe3d.quochuy.dev/api/detect \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -F "image=@hand.jpg"

新账户可获得 100 次免费 API 调用额度——无需信用卡。

浏览器 SDK 与云 API 对比

定价

• 1 次额度 = 1 次 API 调用
• 额度永不过期。
• Playground 永久免费。

入门指南

浏览器 SDK

1. 打开 Playground 链接。
2. 授权摄像头访问。
3. 选择特效并开始检测。

零摩擦——无需 Python、无需安装、也不需要“在我的机器上可以运行”。

云 API

# 从控制台获取你的 API 密钥
curl -X POST https://visionpipe3d.quochuy.dev/api/detect \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -F "image=@sample.jpg"

100 次免费额度足以构建概念验证。

资源

• GitHub:
• Website:
• Documentation:

行动号召

你已经构建或想要构建哪些基于手势的界面？我对大家在典型的“空中吉他”演示之外探索的使用场景非常好奇。