Computer vision visualizer

Hand Landmarks Visualizer

Detect 21 hand landmarks, handedness, finger joints, and browser-side measurements with MediaPipe.

Controls

Detection settings

Overlay

Measurements

Preview

Load a hand image or start your webcam to run detection.FPS -- ms
Selected hand landmark input
Detected hand skeletonWristLandmarkFingertip

Landmark Coordinates

IDNamexyzvisibility
0Wrist------1
4Thumb Tip------1
8Index Tip------1
12Middle Tip------1
16Ring Tip------1
20Pinky Tip------1

What you can inspect

HandednessDetect left or right hand with confidence.2D + 3D pointsInspect normalized x, y, z coordinates.Finger anglesMeasure joint angles from landmark triples.GesturesBuild pinch, open-palm, and finger states.
Pinch Detection Demo

Pinch distance is the Euclidean distance between Thumb Tip (4) and Index Tip (8). Small values can trigger a click, grab, zoom, or drawing interaction.

Pinch: --
1Choose your input2Run hand landmark detection3Inspect landmarks and measurements4Copy code or export results

What this visualizer does

This page runs MediaPipe HandLandmarker directly in the browser. You can upload an image, use the webcam, or try a sample guide, then inspect hand landmarks, handedness, connections, bounding boxes, and gesture-style measurements.

What MediaPipe detects

MediaPipe returns 21 normalized landmarks for each hand, world landmarks for 3D reasoning, and a left/right handedness score. The wrist is landmark 0; fingertips are 4, 8, 12, 16, and 20.

How the model works

The hand pipeline first localizes a palm or hand region, then a landmark model estimates key finger joints inside that crop. Video mode reuses tracking across frames so webcam inference stays responsive.

Controls explanation

Max hands limits how many hands are returned. Confidence filters weak detections. Overlay switches control what is drawn on the canvas, and measurement switches control which derived values are shown.

Output explanation

Coordinates are normalized to image size: x and y are in the range 0 to 1, while z is relative depth where smaller values are closer to the camera. Measurements are derived from those landmarks and are meant for interaction logic.

Common use cases

  • Gesture control for browser apps and demos.
  • Pinch, grab, and drawing interactions.
  • Hand pose analysis for education or accessibility tools.
  • AR overlays that follow fingers or palms.

Code examples

  1. import { FilesetResolver, HandLandmarker } from '@mediapipe/tasks-vision';
  3. const vision = await FilesetResolver.forVisionTasks('/wasm');
  4. const detector = await HandLandmarker.createFromOptions(vision, {
  5. baseOptions: { modelAssetPath: '/hand_landmarker.task' },
  6. runningMode: 'IMAGE',
  7. numHands: 2,
  8. minHandDetectionConfidence: 0.5,
  9. });
  11. const result = detector.detect(imageElement);
  12. console.log(result.landmarks, result.handedness);

FAQ

Why are no hands detected in a sample?

The built-in samples are lightweight guide images. For model accuracy, upload a real photo or use webcam input with the full hand visible.

Does this upload images to a server?

No. Detection runs client-side in your browser with MediaPipe Tasks and WebAssembly.

Related tutorials