A professional, real-time object detection web application powered by TensorFlow.js and the COCO-SSD model. This tool monitors your webcam feed and instantly triggers a visual warning when a mobile phone is detected in the frame.
- 🔍 Real-time Detection: High-speed object recognition using your browser's hardware acceleration.
- 🚨 Instant Alerts: Dynamic warning overlay that appears immediately when a phone enters the camera view.
- 🌊 Modern UI: Sleek, dark-themed interface built with the "Outfit" typography and glassmorphism elements.
- 📡 Motion Analysis: Integrated motion detection to ensure stable and responsive alerts.
- 🔒 Privacy Focused: All processing happens locally in your browser. No video data is ever sent to a server.
- Frontend: HTML5, Vanilla CSS3 (Custom Design System)
- AI Engine: TensorFlow.js
- Model: COCO-SSD
- Fonts: Google Fonts - Outfit
To run this project locally, follow these simple steps:
- A modern web browser (Chrome, Edge, or Firefox recommended).
- A working webcam.
- Node.js (optional, for running a local server).
-
Clone the repository:
git clone <repository-url> cd camera-phone-detector
-
Run with NPM:
npm start
This will start a local Python server on port 3000.
-
Alternative (Live Server): If you use VS Code, you can simply right-click
index.htmland select "Open with Live Server".
- Camera Access: Click the "Start Camera" button and grant the browser permission to access your webcam.
- Model Loading: Wait a few seconds for the COCO-SSD model (approx. 5-10MB) to load. The status badge will update when ready.
- Detection: Point your camera towards a mobile phone. The system will outline the device and display a "PHONE DETECTED!" warning.
index.html: Structure and SEO metadata.style.css: Custom CSS variables, animations, and responsive layout.script.js: Webcam handling, TensorFlow model initialization, and detection logic.
This project is licensed under the ISC License.
Built with ❤️ for Security and AI enthusiasts.