Object Detection Web App

A real-time object detection web application built with React, TypeScript, and TensorFlow.js. The app uses your webcam to detect people and phones in real-time, with live analytics and historical data tracking.

Features

• Live Video Streaming: Real-time webcam feed with object detection
• Object Detection: Detects people and phones using COCO-SSD model
• Smart Bounding Boxes:
  • Green boxes for people
  • Red boxes for phones
  • Red boxes for people holding phones
• Live Counters: Real-time tracking of detected objects
• Analytics Dashboard: Historical data with charts and tables
• Responsive Design: Mobile-friendly interface
• Data Persistence: Saves detection history to localStorage

Tech Stack

• Frontend: React 18 + TypeScript
• Styling: Tailwind CSS
• Object Detection: TensorFlow.js + COCO-SSD model
• Charts: Recharts
• Build Tool: Vite
• Date Handling: date-fns

Prerequisites

• Node.js 16+
• Modern web browser with webcam support
• HTTPS connection (required for webcam access in most browsers)

Installation

1. Clone the repository:

git clone <repository-url>
cd object-detection-app

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser and navigate to http://localhost:3000

Usage

Stream Tab

1. Click "Start Stream" to begin webcam access
2. Allow camera permissions when prompted
3. The app will automatically detect people and phones in real-time
4. View live counters and detection details below the video

Analytics Tab

1. Switch to the Analytics tab to view historical data
2. Use time range selectors (1h, 6h, 24h) to filter data
3. View charts showing detection trends over time
4. Browse detailed detection records in the table
5. Use "Generate Sample Data" to see example charts
6. Use "Clear Data" to reset all historical data

Performance Notes

• Object detection runs at 10 FPS to maintain smooth performance
• Video stream runs at 30 FPS for smooth display
• Detection results are cached and shared between components
• Canvas overlay provides efficient bounding box rendering

Browser Compatibility

• Chrome 80+
• Firefox 75+
• Safari 13+
• Edge 80+

Troubleshooting

Webcam Access Issues

• Ensure you're using HTTPS (required for getUserMedia API)
• Check browser permissions for camera access
• Try refreshing the page and granting permissions again

Model Loading Issues

• Check your internet connection (model is downloaded on first use)
• Clear browser cache and try again
• Ensure TensorFlow.js is properly loaded

Performance Issues

• Close other browser tabs to free up memory
• Reduce video resolution if needed
• Check browser console for error messages

Development

Project Structure

src/
├── components/
│   ├── Header.tsx          # Navigation component
│   ├── Stream.tsx          # Video streaming and detection
│   └── Analytics.tsx       # Charts and historical data
├── context/
│   └── DetectionContext.tsx # Shared state management
├── App.tsx                 # Main app component
├── main.tsx               # Entry point
└── index.css              # Global styles

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

Adding New Object Classes

To detect additional objects beyond people and phones:

1. Update the runDetection function in Stream.tsx
2. Add new detection logic and bounding box colors
3. Update the analytics components to track new classes
4. Modify the context interface if needed

License

This project is licensed under the MIT License.

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

Acknowledgments

• TensorFlow.js team for the object detection models
• COCO dataset contributors
• React and TypeScript communities