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
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. Upload an image, use the webcam, or try a sample guide, then inspect landmarks, handedness, connections, bounds, and measurements.

What MediaPipe detects

MediaPipe returns 21 normalized landmarks for each hand, world landmarks for 3D reasoning, and a left or right handedness score.

  • Landmark 0 is the wrist.
  • Landmarks 4, 8, 12, 16, and 20 are fingertips.

Common use cases

  • Gesture controls
  • Pinch and drawing
  • Hand pose analysis
  • Accessibility tools
  • AR overlays

Code examples

import mediapipe as mp

BaseOptions = mp.tasks.BaseOptions
HandLandmarker = mp.tasks.vision.HandLandmarker
HandLandmarkerOptions = mp.tasks.vision.HandLandmarkerOptions
VisionRunningMode = mp.tasks.vision.RunningMode

options = HandLandmarkerOptions(
    base_options=BaseOptions(model_asset_path="hand_landmarker.task"),
    running_mode=VisionRunningMode.IMAGE,
    num_hands=2,
    min_hand_detection_confidence=0.5,
)

with HandLandmarker.create_from_options(options) as landmarker:
    image = mp.Image.create_from_file("hand.jpg")
    result = landmarker.detect(image)
    print(result.hand_landmarks)

How the model works

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

Controls and output

Max hands limits returned hands, confidence filters weak detections, and overlay switches choose what is drawn.

Coordinates are normalized to image size. The z value is relative depth, while measurements are derived from the returned landmarks.