Skip to content

Latest commit

 

History

History
104 lines (68 loc) · 3.3 KB

README.md

File metadata and controls

104 lines (68 loc) · 3.3 KB

🎥 AI Object Detection Recorder

AI Object Detection Recorder is a web application that uses TensorFlow's COCO-SSD model to detect objects in real-time through your webcam feed. The application allows you to take snapshots, record videos manually, and enable automatic recording when any object is detected.

🚀 Features

  • 🌗 Dark Mode/System Theme Toggle: Switch between dark mode and system theme.
  • ↔️ Horizontal Flip: Adjust the horizontal orientation of the webcam feed.
  • 📸 Take Pictures: Capture snapshots from the video feed at any moment.
  • 📽️ Manual Video Recording: Manually record video clips as needed.
  • 🚫 Auto Record: Enable or disable automatic video recording when an object is detected.
  • 🔊 Volume Control: Adjust the volume level of the notification sounds.
  • 🎨 Camera Feed Highlighting: Highlights detected persons in red and other objects in green.

🛠️ Getting Started

Follow these instructions to set up and run the project locally.

Prerequisites

  • Node.js (version 18 or higher)
  • npm (version 9 or higher)

Installation

  1. Clone the repository:

    git clone https://github.com/yourusername/ai-object-detection-recorder.git
cd ai-object-detection-recorder

  2. Install dependencies:

    npm install

  3. Run the development server:

    npm run dev

  4. Open your browser: Navigate to http://localhost:3000 to see the application in action.

📂 Project Structure

  • components/: Contains UI components such as buttons, toggles, and sliders.
  • utils/: Utility functions for sound, drawing, and other operations.
  • pages/: The main page of the application.
  • public/: Static assets like images.
  • styles/: CSS styles for the application.

🎨 UI Components

  • ModeToggle: Toggle between dark mode and system theme.
  • Button: Customizable buttons for various actions.
  • Popover: Popover components for volume control.
  • Slider: Volume control slider.

🔧 Utility Functions

  • beep(): Function to play notification sounds.
  • drawOnCanvas(): Function to draw detected objects on the canvas.
  • resizeCanvas(): Adjusts the canvas size based on the webcam feed.
  • base64toBlob(): Converts a base64 image to a Blob for downloading.

🧠 Model Integration

This application uses the COCO-SSD model from TensorFlow for real-time object detection.

📸 Taking Snapshots

To take a snapshot, click the camera icon. The snapshot will be downloaded as a PNG file.

📽️ Manual Recording

To start/stop manual recording, click the video icon. The recording will be saved as a WebM file.

🚫 Auto Record

Toggle the auto-record button to enable or disable automatic recording. When enabled, the application will start recording automatically when any object is detected.

🔄 Horizontal Flip

Click the flip icon to toggle the horizontal orientation of the webcam feed.

🔊 Volume Control

Click the volume icon to adjust the notification sound volume using the slider.

🙌 Acknowledgments

  • TensorFlow.js
  • COCO-SSD Model
  • React
  • Next.js

Enjoy using the AI Object Detection Recorder! 🎉

If you encounter any issues or have suggestions for improvements, feel free to open an issue or submit a pull request. Happy coding! 😊