Hand Gesture Recognition
Real-time AI hand tracking and gesture recognition using your webcam — 12+ gestures, 21 landmarks, up to 2 hands.
Loading MediaPipe Hands AI model...
Loaded once, then cached by your browser.
How to use
- 1
Click Start camera and allow webcam access when prompted.
- 2
Hold your hand clearly in front of the camera with good lighting.
- 3
Try any of the 12 supported gestures — the highlighted card shows what's detected in real time.
Hand Gesture Recognition — Real-Time AI Detection, 12 Gestures
Detect hand gestures in real time using AI and your webcam. Recognizes 12 gestures including thumbs up, peace, fist, rock on, call me and more. Powered by MediaPipe Hands. Free, no signup, runs in your browser.
Skycally's Hand Gesture Recognition tool uses Google's MediaPipe Hands model — a state-of-the-art ML pipeline that detects and tracks 21 hand landmarks in real time directly in your browser. The model runs at up to 30 frames per second on modern devices, tracking the precise 3D position of each finger joint and knuckle with sub-centimeter accuracy. No video is ever uploaded — all processing happens locally using WebGL acceleration.
The tool recognizes 12 distinct hand gestures: Open Hand, Fist, Thumbs Up, Thumbs Down, Pointing, Peace/Victory, Rock On, Call Me, OK, Three fingers, Four fingers, and Pinky. Each detected gesture is highlighted in the reference grid below the camera feed, with a confidence score showing how certain the model is. The gesture history panel tracks the last 8 unique gestures in sequence.
Up to 2 hands can be tracked simultaneously, each shown with a different color skeleton overlay. The 21 landmark points and hand connections are drawn in real time over the camera feed. A mirror mode lets you see your hand as you would in a mirror (which feels more natural for most users), while normal mode shows the unflipped camera view. The Screenshot button captures the current canvas with all overlays for sharing or documentation.
Hand gesture recognition technology has applications across many fields: sign language recognition and accessibility tools, contactless user interfaces for kiosks and medical environments, gaming controls and AR/VR interaction, fitness and physical therapy tracking, and creative tools like gesture-controlled music or art. This tool provides a real-time demonstration of what the underlying technology can do.
Frequently Asked Questions
What gestures can be recognized?
12 gestures: Open Hand (✋), Fist (✊), Thumbs Up (👍), Thumbs Down (👎), Pointing (☝️), Peace (✌️), Rock On (🤘), Call Me (🤙), OK (👌), Three (3️⃣), Four (4️⃣), and Pinky (🌸). The detected gesture is highlighted in the reference grid in real time.
How many hands can be tracked at once?
Up to 2 hands simultaneously. Each hand is shown with a different color skeleton (purple for the first, green for the second). Gesture detection is applied to the primary (first detected) hand.
What does the confidence score mean?
The confidence score (shown as a percentage) indicates how certain the gesture classifier is about the detected gesture. A score above 90% means the gesture is clearly detected. Lower scores may indicate ambiguous hand positions, poor lighting, or partial hand visibility.
Why is gesture detection sometimes inaccurate?
Accuracy depends on: (1) lighting — bright, even light works best, avoid backlighting; (2) background contrast — a plain background behind your hand improves detection; (3) distance — keep your hand 30–70 cm from the camera; (4) angle — face your palm toward the camera for best results.
What is the mirror mode?
Mirror mode flips the camera feed horizontally, so your hand appears as it would in a mirror. Most people find this more intuitive since it matches natural expectations. Disable it if you need accurate left/right orientation (for example, when showing text on a piece of paper).
Is my camera footage sent to any server?
No. MediaPipe Hands runs entirely in your browser using WebAssembly and WebGL. Your camera feed is processed locally and never transmitted to any server. The tool works offline after the initial model download.
What does FPS mean and why does it matter?
FPS (frames per second) is how many times per second the AI model analyzes a new camera frame. Higher FPS = smoother, more responsive gesture detection. 20+ FPS is ideal. If FPS is low, try closing other browser tabs, reducing the camera resolution, or using a device with a faster GPU.
What is MediaPipe Hands?
MediaPipe Hands is an open-source hand tracking solution developed by Google. It uses a two-stage ML pipeline: a palm detector that locates hands in the frame, followed by a hand landmark model that tracks 21 keypoints per hand in 3D. It is the same technology used in Google Meet's background effects and various AR applications.
You might also like
Other tools you might find useful.