Hand Tracker is a web application that uses MediaPipe's Hand Tracking solution to detect and recognize hand gestures in real-time through your device's camera. The application provides visual feedback, finger counting, and gesture recognition with a clean, responsive interface.
- Real-time hand tracking with landmark visualization
- Finger counting (0-5 fingers per hand)
- Gesture recognition (OK sign, rock on, fist, open hand, thumbs up/down, etc.)
- Multiple camera support with device selection
- Detailed hand data display (landmark coordinates, confidence scores)
- Visual finger representation
- Responsive design that works on desktop and mobile devices
The application uses:
- MediaPipe Hands for hand landmark detection
- Custom algorithms for finger counting and gesture recognition
- WebRTC for camera access
- Canvas API for real-time drawing of hand landmarks
To run locally:
-
Clone the repository:
git clone https://github.com/ThatSINEWAVE/hand-tracker.git
-
Open
index.htmlin your browser (no server required as it uses CDN resources)
- Click "Start Tracking" to begin
- Allow camera access when prompted
- Show your hand to the camera
- View real-time tracking, finger count, and gesture recognition
- Click "Stop Tracking" when finished
hand-tracker/
├── index.html # Main HTML file
├── script.js # Main JavaScript logic
├── style.css # Styling
└── site-data/ # Static assets
├── favicon.ico
├── apple-touch-icon.png
└── ...
- MediaPipe Hands
- Font Awesome for icons
- Modern browser with WebRTC support
The application works best on Chrome, Firefox, Edge, and other modern browsers that support:
- WebRTC
- ES6 JavaScript
- CSS Flexbox/Grid
Contributions are welcome! If you want to contribute, feel free to fork the repository, make your changes, and submit a pull request.
This project is licensed under the GPL-3.0 License - see the LICENSE file for details.
