What this is
Hayati's Motion Tracker uses your webcam to find your head, eyes, and hands, and traces them with colored lines. You can then draw in the air with your fingers, place shapes, move and erase your drawings, try face effects, and save a picture or a short video.
Quick start
- Press Start camera and allow the camera when your browser asks.
- Stand so your head and hands are in view. You will see the outlines.
- Pick Free draw, Shapes, Move, or Eraser at the bottom.
- Pinch your thumb and index finger together to use the tool.
- Use the buttons on the right for the mirror, outlines, face effects, picture, and video. You can also point a hand at a button and pinch to press it.
Tracking works best with good light, and with your hands not overlapping.
Gestures
- Pinch with one hand (Free draw): draw a line. Open your fingers to stop.
- Pinch with both hands, then move them apart (Shapes): the chosen shape grows between your hands. Open your fingers to place it.
- Pinch a drawing (Move): drag it. Pinch with both hands and change the distance to make it larger or smaller.
- Pinch and sweep over a drawing (Eraser): erase it. The Eraser button and the Undo and Clear buttons also work.
- Point at a button and pinch: press it, without touching the screen. The Photo button counts down three seconds first when you press it this way.
- Eyes: the status box shows if your eyes are open or closed and roughly where you are looking.
How it works
Each camera frame is analyzed in your browser by MediaPipe, an open source library from Google (Apache License 2.0). It finds points on your face, eyes, and hands, and this page draws the outlines, effects, and drawings from those points.
The library, its models, and the code of this page are all inside this one file. Nothing is downloaded while you use it, and there are no external requests.
Privacy
- Camera images stay in memory in your browser. They are not sent anywhere, and they are not stored.
- A picture or a video is only made when you press Photo or Record. It is saved to your device, and nowhere else. Videos have no sound because the microphone is never used.
- To open faster next time, the page saves the tracking models (not your images) in your browser. You can clear them from the start screen.
- No tracking and no cookies. The Source Code button at the bottom shows all of the code.
