Detect & Track is a production-grade multi-object tracking platform. Connect a camera feed or stream raw video, run real-time inference (YOLOv8 + SORT / Deep SORT), and watch live tracking telemetry on a glassmorphic dashboard. Adjust parameters like confidence thresholds, class filters, and tracker engines in real-time.
- Overview
- Application Preview
- Features
- Architecture
- Tech Stack
- Project Structure
- Installation
- Usage
- API Reference
- Configuration
- Testing & Run Verification
- License
This project decouples deep-learning computer vision from client rendering by building a high-performance, asynchronous FastAPI backend and a responsive React client web console.
The backend runs camera processing on a background thread, updates trackers, counts line-crossings via 2D vector mathematics, and streams annotated frame buffers via Motion JPEG (MJPEG) alongside live WebSocket telemetry. The React client displays this video feed in a sci-fi viewport HUD and provides instant control sliders and class-filtering tags.
| Feature | Description |
|---|---|
| 🔍 Advanced Detection | Identifies and filters targets using YOLOv8 models (yolov8n.pt up to yolov8x.pt) |
| 🔄 Dual Tracking Engines | Choose SORT (motion-based state estimation) or Deep SORT (appearance-based embeddings) |
| 🚷 Virtual Line Crossing | Tracks and counts objects crossing entry/exit boundaries in real-time |
| 🧪 Responsive WebSocket Telemetry | Broadcasts current FPS, active track count, and crossed metrics at 10Hz |
| 🎛️ Live Parameter Tuning | Adjust confidence thresholds, class tags, and tracker engines on-the-fly without resets |
| 📽️ MJPEG Stream Viewport | Zero-overhead processed camera frame streams rendered directly in browser image viewport |
| 🎨 Premium Neon Dashboard | Glassmorphic cards, scifi HUD crosshairs, glowing speed dials, and responsive layouts |
┌─────────────────────────────────────────────────────────────┐
│ React Web Console │
│ │
│ Viewport Stream (<img>) ◄─── GET /api/video_feed │
│ Telemetry Analytics ◄─── WS /ws (10Hz push) │
│ Parameter Tuning Controls ───► WS /ws (config JSON update)│
└──────────────────────────────┬──────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ FastAPI Server │
│ │
│ /api/video_feed ──► Serves MJPEG frame buffers │
│ /ws ──► Pushes telemetry / receives configs │
└──────────────────────────────┬──────────────────────────────┘
│ Thread Decoupled Frame
▼
┌─────────────────────────────────────────────────────────────┐
│ Background Processing Thread │
│ │
│ OpenCV Capture ──► YOLOv8 ──► SORT/DeepSORT ──► Counter │
└─────────────────────────────────────────────────────────────┘
| Layer | Technology |
|---|---|
| Backend API | FastAPI, Uvicorn, Websockets, Python 3.10+ |
| Object Detection | Ultralytics YOLOv8 PyTorch SDK |
| State Tracking | Kalman Filters (filterpy), Deep SORT (deep-sort-realtime) |
| Data Math | NumPy, SciPy |
| Frontend UI | React 18, Vite, Lucide Icons, Custom CSS |
| Communication | REST (MJPEG) + WebSockets |
Code_Alpha_Object_Detection_-_Tracking/
│
├── backend/ # FastAPI Web Server Code
│ ├── main.py # API routes, WebSockets, background threads
│ ├── config.py # Central tracking configuration settings
│ ├── requirements.txt # Python server requirements
│ ├── videos/ # Sample videos (downloads automatically)
│ └── src/
│ ├── detector.py # YOLOv8 detector class
│ ├── tracker.py # SORT & Deep SORT tracker engines
│ └── utils.py # LineCounter, FPSCalculator, Downloader
│
└── frontend/ # React Web Client Code
├── src/
│ ├── App.jsx # Dashboard layout, WebSocket sync
│ ├── App.css # Premium neon styling overlays & grid
│ ├── index.css # Reset styles & global fonts
│ └── main.jsx # React entry point
├── index.html # HTML layout template with Outfit fonts
├── vite.config.js # Dev proxy definitions for /api and /ws
└── package.json # Node package manager configurations
git clone https://github.com/crastatelvin/Code_Alpha_Object_Detection_-_Tracking.git
cd Code_Alpha_Object_Detection_-_Trackingcd backend
python -m venv .venv
# Activate environment (Windows)
.venv\Scripts\activate
# Activate environment (Linux/macOS)
source .venv/bin/activate
pip install -r requirements.txtOpen a new terminal window:
cd frontend
npm installFrom the backend/ directory (with virtual environment active):
python -m uvicorn main:app --host 127.0.0.1 --port 8000The server will cache/download YOLOv8 weights and the sample video file automatically on startup.
From the frontend/ directory:
npm run devOpen your browser and navigate to http://localhost:3000 to view the live dashboard!
| Endpoint | Method | Protocol | Description |
|---|---|---|---|
/api/status |
GET |
HTTP | Returns API server status and running configurations |
/api/config |
POST |
HTTP | Dynamic parameter overrides via standard request payloads |
/api/video_feed |
GET |
HTTP | Streams the processed bounding-box overlay feed using MJPEG |
/ws |
GET |
WebSocket | Pushes live metrics (FPS, counters, tracks) & listens to parameter updates |
Tweak default settings directly in backend/config.py:
# Central settings
MODEL_PATH = "yolov8n.pt" # YOLOv8 weight scale
CONF_THRESHOLD = 0.35 # Default score threshold
TRACKER_TYPE = "sort" # Default tracker ('sort'/'deepsort')
FILTER_CLASSES = ["person", "car"] # Target classes
# Line-Crossing coordinates segment [(x1, y1), (x2, y2)]
COUNTING_LINE = [(100, 300), (540, 300)]Before starting the web services, you can verify video frame decoding, YOLO inferences, and tracker modules:
python backend/src/capture_test.py --source 0 --headlesspython backend/src/detect_test.pyThis project is licensed under the MIT License. See LICENSE for details.
⭐ If this tracker helped you build MOT pipelines faster, star the repo.