Stack

• TF.js core + WebGL backend for GPU acceleration; MediaPipe Hands runtime via the hand‑pose‑detection wrapper (CDN‑hosted assets).

Pipeline

• Start: Requests user media (front camera), plays the stream in a mirrored
• Detector: MediaPipe Hands (lite model, up to two hands) returns 21 landmarks per hand; the app draws lines for finger and palm connections.
• Loop: requestAnimationFrame drives inference and overlay drawing; a running flag controls lifecycle and resource cleanup.

Details

• Mirroring: Since the video is flipped via CSS, drawing is also mirrored to match the user’s perspective.
• HUD: Start/Stop buttons, live indicator, and a simple FPS counter.

Notes

• On first use, the browser will ask for camera permission. Good lighting improves detection quality.