TypeScript · React · MediaPipe · Computer Vision
Hand Tracking
Browser hand tracking with MediaPipe: 21 landmarks per hand, two hands at once, nothing leaves the client.
Overview
This is a small, focused MVP: get real hand tracking running in a browser tab with no server in the loop. MediaPipe Hands v0.10.3 does the detection, React 18 and TypeScript on Vite handle everything around it.
It tracks the full 21-point landmark set per hand — wrist, then four joints for each finger from CMC through to the tip — and identifies handedness, so left and right get drawn in different colours with the key landmarks numbered over the live video. Two hands can be tracked simultaneously.
The pipeline runs at 30 fps with WebGL acceleration and falls back to lower resolution rather than dropping frames when the device cannot keep up. Landmarks come out as normalised x, y, z plus a visibility score, and the whole stream can be exported as JSON with the measured frame rate attached, which is what makes it useful as a front end for something else rather than just a demo.
The only network call is the initial 16MB model download. After that the video never leaves the machine.