📹 Mobile CCTV — Turn Your Phone Into a Surveillance Camera

Mobile CCTV turns any smartphone into a fully functional surveillance camera. Record high-quality video with audio, browse saved recordings, play them back with a built-in video player, and download clips for offline use. Everything runs entirely in the browser using IndexedDB for storage — no server, no uploads, no cloud dependency.

---

📑 Table of Contents

• Features
• Screenshots
• Live Demo
• Technologies
• Project Structure
• How It Works
• Installation
• Future Improvements
• Contributing
• License
• Author

---

✨ Features

✅ Full Camera Access — Front and rear camera support with live preview feed

✅ High-Quality Video Recording — Record video with audio at up to 1080p resolution

✅ Recording Timer — On-screen timer displays elapsed recording duration in real time

✅ Camera Switching — Toggle between front and rear cameras while recording

✅ Built-In Video Player — Play saved recordings directly in the app with play/pause, seek, and speed controls

✅ Playback Speed Control — Watch recordings at 0.5x, 1x, 1.5x, or 2x speed

✅ Download Recordings — Save any recorded clip to your device as a .webm file

✅ Local Storage via IndexedDB — All recordings stored locally in the browser database, no server uploads

✅ Storage Management — View total, used, and free storage with a visual usage bar

✅ Auto-Delete Old Recordings — Automatically removes oldest clips when storage limit is reached

✅ Configurable Settings — Adjust video quality, max recording time, storage limit, and auto-delete behavior

✅ Screen Wake Lock — Prevents the screen from sleeping during active recording

✅ Recording Time Limit — Automatically stops recording after the configured max duration

✅ Responsive Bottom Sheets — Clean sliding panels for recordings list, system info, and settings

✅ Toast Notifications — Non-intrusive feedback for all actions

✅ Dark Professional UI — Gradient accents on a deep navy background with glassmorphism effects

✅ Fully Client-Side — No backend, no cloud, all data stays on your device

✅ Single HTML File — Zero dependencies, just open and use

---

🚀 Live Demo

https://dhruvpandit46.github.io/CCTV/

---

⚙ Technologies Used

• HTML5 — Semantic structure with media capture APIs
• CSS3 — Custom properties, gradients, glassmorphism, animations, responsive design
• JavaScript (Vanilla ES6) — Complete application logic with class-based architecture
• MediaDevices API — Camera and microphone access (getUserMedia)
• MediaRecorder API — Video recording with configurable quality
• IndexedDB — Persistent local storage for video blobs
• Wake Lock API — Prevent screen sleep during recording
• WebM Video Format — Efficient video encoding with VP8/VP9 codecs

---

📂 Project Structure

CCTV/
│
├── index.html
├── images/
└── README.md

---

⚡ How It Works

Starting the Camera

1. Open the app and tap Start Camera or tap the camera preview area
2. Grant camera and microphone permissions when prompted
3. The live camera feed appears with a timestamp overlay
4. The status dot turns green indicating the camera is active

Recording Video

1. With the camera active, tap the green Record button
2. A recording timer appears showing elapsed time
3. The status dot turns red and pulses to indicate active recording
4. Tap the red Stop button to end recording
5. The recording is automatically saved to IndexedDB

Switching Cameras

1. Tap the camera switch button (🔄) in the bottom-right corner
2. The feed toggles between front and rear cameras
3. Camera switching works even during active recording

Managing Recordings

1. Tap the folder icon (📁) to open the recordings list
2. Each recording shows the date, time, duration, and file size
3. Play — Opens the built-in video player
4. Save — Downloads the recording as a .webm file
5. Delete — Removes the recording after confirmation

Playing Recordings

1. Tap Play on any recording in the list
2. The video player opens with:
   • Play/Pause with large central button
   • Rewind/Forward 5 seconds
   • Adjustable playback speed (0.5x, 1x, 1.5x, 2x)
   • Clickable progress bar for seeking
   • Current time and total duration display

Storage Management

1. Tap the info icon (📊) to view system info
2. See total storage, used storage, free storage, and recording quality
3. A visual storage bar shows usage percentage
4. When auto-delete is enabled, oldest recordings are removed when the limit is reached

Settings

1. Tap the gear icon (⚙️) to open settings
2. Configure:
   • Video Quality — 480p, 720p, or 1080p
   • Max Recording Time — 1 to 24 hours
   • Storage Limit — 1 to 100 GB
   • Auto-Delete — Enable or disable automatic cleanup
3. Tap Save Settings to apply

---

📦 Installation

Clone the repository

git clone https://github.com/dhruvpandit46/CCTV.git

Go inside the project

cd CCTV

Run

Simply open index.html in your browser. The app works best on mobile devices with a camera, but will also run on desktop with a webcam.

No installation. No build step. No server required. No dependencies.

---

🎯 Future Improvements

• Motion detection with alert notifications
• Night vision mode toggle
• Timelapse recording mode
• Background recording (PWA service worker)
• Cloud backup integration (optional)
• Password-protected recordings
• Multi-camera grid view
• Scheduled recording times
• Live streaming to another device
• Audio-only recording mode
• Recording categories and tags
• Export as MP4

---

🤝 Contributing

Contributions are welcome.

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push your branch
5. Open a Pull Request

---

📜 License

Licensed under the MIT License.

MIT © 2026 Dhruv Pandit.

See the LICENSE file for full license details.

---

👨‍💻 Author

Dhruv Pandit

GitHub — https://github.com/dhruvpandit46

LinkedIn — https://linkedin.com/in/dhruv-pandit-755786326

Instagram — https://instagram.com/dhruv_pandit2007

---

⭐ Support

If you found Mobile CCTV useful, please consider giving it a star on GitHub.

It helps others discover the project and supports future development.