abouchedidxcode/open-source-hands

选用指南

AI 根据 README 整理 · 2026/11/4 04:42:09

使用方式

可通过命令行使用npm安装和运行，或复制kit文件夹到现有项目中使用。

查看 README 依据

Point it here. The repo is written to be read by agents. [AGENTS.md](AGENTS.md) is the entry point. For example: > Make me a browser game where I conduct an orchestra with my hands. Use > https://github.com/abouchedidxcode/open-source-hands: start from templates/game and follow AGENTS.md and > docs/MAKING-A-GAME.md. Claude Code users can also install the skill in [`skills/hand-gestures`](skills/hand-gestures/SKILL.md). ## Make a game ```bash npx degit abouchedidxcode/open-source-hands/templates/game my-game cd my-game npm install npm run dev # the camera needs https or localhost

The kit is about 1,600 lines of dependency-free TypeScript in `src/kit`. Copy that folder into your project, the way shadcn/ui components are copied: ```bash npx degit abouchedidxcode/open-source-hands/src/kit src/hand-gesture-kit npm install @mediapipe/tasks-vision@1.1.0 mkdir -p public/models public/wasm curl -L -o public/models/hand_landmarker.task \ https://storage.googleapis.com/mediapipe-models/hand_landmarker/hand_landmarker/float16/1/hand_landmarker.task cp node_modules/@mediapipe/tasks-vision/wasm/* public/wasm/ ``` ```ts

部署要求

需要浏览器支持摄像头，且需在localhost或https环境下运行。

查看 README 依据

Point it here. The repo is written to be read by agents. [AGENTS.md](AGENTS.md) is the entry point. For example: > Make me a browser game where I conduct an orchestra with my hands. Use > https://github.com/abouchedidxcode/open-source-hands: start from templates/game and follow AGENTS.md and > docs/MAKING-A-GAME.md. Claude Code users can also install the skill in [`skills/hand-gestures`](skills/hand-gestures/SKILL.md). ## Make a game ```bash npx degit abouchedidxcode/open-source-hands/templates/game my-game cd my-game npm install npm run dev # the camera needs https or localhost

已知限制

实验性手势默认关闭，需通过配置启用。

查看 README 依据

Experimental (off with `config: { pose: { experimental: false } }`): 🤚 `back`, 🔪 `chop`, 🫸 `two`, 🖖 `spock`. Poses are data, and motions are small functions, so you can add your own with `engine.registerPose()` and `engine.registerMotion()`. ## How it works ``` webcam ─▶ MediaPipe Hand Landmarker ─▶ 21 points per hand ─▶ One Euro smoothing ─▶ features: finger curl from joint angles, pinch gaps, palm facing, roll, size ─▶ poses: every pose scored each frame, debounced with enter/exit thresholds ─▶ motions: detectors over the last 1.6 s of each hand's movement