Camera setup

Hand Tracking Camera Setup: Lighting, Framing, and Fixes

Set up a webcam for browser hand tracking—lighting, background, distance, and permissions—then fix common problems like a black preview, jumpy recognition, and lag.

Published · Updated · 10 min read

A centered wireframe hand sits inside a balanced halo of camera-like light.
Illustration: even light and clear framing make hand tracking easier to read.

Put light in front of you, not behind you

The easiest improvement is to face a window or lamp so the front of your hand is evenly lit. A bright window behind you makes your hand dark relative to the background and can hide finger separation. You do not need studio lighting; consistency is more useful than brightness.

Avoid rapidly changing light sources such as a television behind the camera. Stable light gives the tracker a more consistent view from one gesture to the next.

Frame the full hand

Keep your palm facing the lens and leave space around the fingertips. If a fingertip is cropped, finger count becomes less dependable. Sitting roughly an arm’s length from the webcam is a useful starting point: close enough for detail, far enough that the whole hand stays in frame.

Place the camera at approximately chest or face height when possible. A severe upward or downward angle can make the palm and fingers overlap visually.

Simplify the background and remove conflicts

A plain background reduces visual distraction. You do not need a blank wall, but avoid holding your hand against a moving screen, another person, or a similarly colored patterned object when troubleshooting.

Close video-call apps and other tabs that may own the camera. Browsers generally cannot share a webcam cleanly between multiple active applications.

Confirm the browser permission

When the browser asks for permission, choose Allow for the intended camera. If you clicked Block earlier, use the lock icon beside the address bar to update site settings, then reload the page. The browser is the authority for camera permission; the web page cannot bypass that choice.

Gesture Synth requests video for hand tracking and does not request microphone audio. You can revoke the camera permission in browser settings whenever you want.

Read the full camera permission walkthrough →

When tracking fails, check permission and camera owner first

A black preview or missing camera commonly means the browser does not have permission or another app has claimed the webcam. Check the lock icon near the URL, set Camera to Allow for the site, and reload. Quit video-call software, system camera apps, and other browser tabs using the same device.

Do not repeatedly refresh before checking permission: if the setting remains blocked, each reload produces the same result. Fix the stored decision once, then reload a single time.

Separate recognition problems from camera problems

If you can see a camera preview but gestures are not recognized, the device is working and the next focus is visual clarity. Face a light source, use a simpler background, show your palm to the camera, and keep fingers spread. Hold each position briefly so the tracking result can settle.

If the preview itself is black or unavailable, test the camera in a trusted local app or another browser tab after closing conflicting apps. That tells you whether the issue is site permission, browser configuration, or the camera device.

Reduce lag before changing gestures

Hand tracking runs in real time, so a device under heavy load may react late or jump between states. Close resource-heavy tabs, unplug unnecessary capture devices, and avoid a background video call. A current Chrome, Edge, or Safari build generally gives the most reliable browser media support.

Make only one environmental change at a time. For example, fix lighting first, then change camera distance. That makes it easier to learn which change actually helped.

Keep making music with the keyboard fallback

Keyboard mode is a practical fallback, not a failure state. It lets you confirm the music engine and practice chord timing while you decide whether to adjust camera permissions or try another device.

Once audio works in keyboard mode, return to hand mode with a simple one-finger gesture before trying faster chord changes.

Play in keyboard mode →Learn the keyboard method →

Questions about this guide

What webcam resolution do I need?+

A current built-in laptop or phone camera is usually sufficient when lighting and framing are good.

Why does my hand disappear near the edge?+

The tracker needs visible landmarks. Move your hand toward the center and leave room around fingers and wrist.

Why is tracking laggy?+

Lag can come from CPU load, other camera apps, low light, or a busy browser or device. Close competing apps and improve lighting first.

Does clearing browser data fix hand tracking?+

It may reset a stored permission choice, but checking the site camera setting and competing apps is usually a more direct first step.

Sources & further reading

These references support the browser and audio concepts in this guide. Product-specific guidance describes Gesture Synth as it is presented on this site.

Try Gesture Synth yourself

The guides describe the current browser experience. Try keyboard mode first, or read Camera Help before enabling hand tracking.