CamViewer.ai is a web application built with Next.js, TypeScript, and Tailwind CSS that allows users to interact with their computer's camera and utilize AI to detect and identify elements on the screen. The application highlights detected persons in red and other objects (like chairs, dogs, etc.) in green using a canvas overlay.
- AI Detection: Utilizes models from TensorFlow to detect persons and other elements.
- Dynamic Styling: Styled using Shadecn for a modern and responsive design.
- Iconography: Icons provided by Radix Icons and Lucide Icons.
- Recording: Ability to record video and take screenshots.
- Auto-Record: Automatically starts recording when a person is detected.
You can use either yarn
or npm
to install and run the project.
- Clone the repository:
git clone https://github.com/malvarez88/camviewer-ai.git
- Navigate to the project directory:
cd camviewer-ai
- Install the dependencies:
yarn install
- Start the development server:
yarn dev
- Clone the repository:
git clone https://github.com/malvarez88/camviewer-ai.git
- Navigate to the project directory:
cd camviewer-ai
- Install the dependencies:
npm install
- Start the development server:
npm run dev
- Open your browser and navigate to
http://localhost:3000
. - Allow camera access when prompted.
- Use the interface to start detecting elements, recording videos, and taking screenshots.
- Enable auto-record to start recording automatically when a person is detected.
Contributions are welcome! Please follow these steps:
- Fork the repository.
- Create a new branch (
git checkout -b feature/your-feature
). - Commit your changes (
git commit -m 'Add some feature'
). - Push to the branch (
git push origin feature/your-feature
). - Open a pull request.
This project is licensed under the MIT License - see the LICENSE file for details.