项目介绍

open-source-hands 把几款浏览器手势游戏背后的技术整理成可复用的套件。它建立在 Google 的 MediaPipe Hand Landmarker 之上：该模型从摄像头画面里找出每只手的 21 个关键点，套件再把这些点转换成稳定的游戏输入，包括 20 种保持姿态、16 种单手动作、5 种双手手势，以及捏合力度、掌心位置、速度等连续值。引擎内置 One Euro 平滑和迟滞，避免手势反复抖动。

仓库不只提供输入层：还有一个完整的 three.js 起始游戏、一份基于制作 17 款手势游戏的经验手册，以及给编码 Agent 阅读的入口文档。在线可直接体验演示、Gesture Lab 和一个小示例游戏；视频处理留在设备本地。

快速使用

从一个新游戏开始，可以复制模板：

npx degit abouchedidxcode/open-source-hands/templates/game my-game
cd my-game
npm install
npm run dev        # 摄像头需要 https 或 localhost

之后阅读起始游戏说明和游戏制作手册。如果要在已有项目里加入套件，需要把 src/kit 复制为 hand-gesture-kit 目录，安装 @mediapipe/tasks-vision@1.1.0，并把 hand_landmarker.task 模型和 Wasm 文件放到 public/ 下。浏览器要求用户先点击一次才能启动摄像头，示例中把 hands.startCamera() 放在点击处理函数里。

要运行套件、演示和 Lab，依次执行 npm install、npm run dev、npm test；README 还写明了用合成手在无头浏览器中跑端到端测试，以及用 .y4m 视频片段驱动真实 MediaPipe 的方法。

使用约束

摄像头页面必须通过 HTTPS 或 localhost 访问，浏览器会先请求授权。套件以源码形式复制使用，而不是发布成 npm 包，所以接入已有项目需要手动安装 MediaPipe 依赖并复制模型和 Wasm 目录。默认使用前置摄像头、1280×720 分辨率，检测在 GPU 上执行并自动回退到 CPU。手势阈值可以在 Gesture Lab 中实时查看和调整，再导出 JSON 传给 createHands({ config })。back、chop、two、spock 等实验性姿态默认关闭。

项目采用 MIT 许可证；手部追踪使用 Google 的 MediaPipe（Apache-2.0），public/models 下的模型文件说明为 Google 官方未修改的发布版本。

HotRepo 点评

该项目在 2026-11-04 进入 TypeScript 新项目榜，记录的一小时窗口内新增 3 颗 Star，总数达到 108，Fork 为 17；没有 GitHub 全部语言日榜名次记录。更值得关注的是可复用手势引擎、无需联网的起始模板和用于调参的 Gesture Lab 三者组合，开发者拿到后可以直接运行和修改，而不只是看一段演示视频。