Real-time Body Tracking

Category Web Feature
Landmarks 33 Points
Framework Vanilla JS
Status Delivered

Detect body movement in real-time from browser camera footage, automating motion analysis and rep counting. Built with Vanilla JS and hosted on GitHub Pages. Extended to security camera applications.

Project Overview

33
Body Landmarks
468
Face Mesh Points
21×2
Hand Tracking Points
4
Tracking Modes

The Brief

Build a browser-based body tracking system that can detect human pose in real-time and automate motion analysis tasks like counting exercise reps. The solution needed to work without any framework dependencies.

Tech Stack

Lightweight implementation with no framework dependencies for maximum portability.

JavaScript MediaPipe Tasks Vision HTML/CSS GitHub Pages

Challenges & Solutions

Accurate Rep Counting

Detecting exercise repetitions accurately without false triggers from minor movements or position adjustments.

Solution: Developed knee angle calculation algorithm with hysteresis design to prevent false detection. The system tracks angle thresholds with deadband to ensure clean rep counting.

Lightweight Design

Creating a portable solution that could be easily deployed anywhere without complex build processes.

Solution: Built entirely in Vanilla JS with no framework dependencies, enabling simple GitHub Pages hosting and easy integration into any project.

Results & Impact

Successfully delivered and extended to security camera applications.

33 Points

Full body landmark detection

Delivered

Client project completed

Extended

Security camera application

No Framework

Vanilla JS implementation

Key Features Delivered

Ready to build something similar?

Let's discuss your project and create something amazing together.

Start Your Project