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.
- Features
- Screenshots
- Technologies
- Project Structure
- How It Works
- Installation
- Future Improvements
- Contributing
- License
- Author
- ✅ Full Camera Access — Front and rear camera support with live preview feed
- ✅ High-Quality 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
- ✅ Screen Wake Lock — Prevents the screen from sleeping during active recording
- ✅ Recording Time Limit — Automatically stops recording after the configured max duration
- ✅ 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
- ✅ 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
# Clone the repository
git clone https://github.com/dhruvpandit46/CCTV.git
# Navigate to the project
cd CCTV
# Open in your browser
open index.htmlThat's it! No installation, no build step, no server required. Works best on mobile devices with a camera.
| Technology | Purpose |
|---|---|
| HTML5 | Semantic structure with media capture APIs |
| CSS3 | Custom properties, gradients, glassmorphism, animations, responsive design |
| JavaScript (ES6) | Complete application logic with class-based architecture |
| API | Purpose |
|---|---|
| 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 Format | Efficient video encoding with VP8/VP9 codecs |
CCTV/
│
├── index.html # Complete Mobile CCTV application
├── images/ # App icons and assets (optional)
└── README.md # Project documentation
Open App → Tap "Start Camera" → Grant Permissions → Live Feed Appears
- Open the app and tap Start Camera or tap the camera preview area
- Grant camera and microphone permissions when prompted
- The live camera feed appears with a timestamp overlay
- The status dot turns green indicating the camera is active
Tap Record → Timer Starts → Recording in Progress → Tap Stop → Auto-Saved
- With the camera active, tap the green Record button
- A recording timer appears showing elapsed time
- The status dot turns red and pulses to indicate active recording
- Tap the red Stop button to end recording
- The recording is automatically saved to IndexedDB
Tap 🔄 Button → Camera Toggles → Continue Recording
- Tap the camera switch button (🔄) in the bottom-right corner
- The feed toggles between front and rear cameras
- Camera switching works even during active recording
Tap 📁 → View List → Play/Download/Delete
- Tap the folder icon (📁) to open the recordings list
- Each recording shows the date, time, duration, and file size
- Play — Opens the built-in video player
- Save — Downloads the recording as a .webm file
- Delete — Removes the recording after confirmation
Tap Play → Video Player Opens → Control Playback
- Tap Play on any recording in the list
- 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
Tap 📊 → View Usage → Auto-Delete (if enabled)
- Tap the info icon (📊) to view system info
- See total storage, used storage, free storage, and recording quality
- A visual storage bar shows usage percentage
- When auto-delete is enabled, oldest recordings are removed when the limit is reached
Tap ⚙️ → Configure → Save
- Tap the gear icon (⚙️) to open settings
- 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
- Tap Save Settings to apply
┌─────────────────────────────────────────────────────────────┐
│ Mobile CCTV App │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────┐ ┌──────────────────┐ │
│ │ Start Camera │───▶│ Live Preview │ │
│ └─────────────┘ └──────────────────┘ │
│ │ │ │
│ ▼ ▼ │
│ ┌─────────────┐ ┌──────────────────┐ │
│ │ Record │───▶│ Recording Timer │ │
│ └─────────────┘ └──────────────────┘ │
│ │ │ │
│ ▼ ▼ │
│ ┌─────────────┐ ┌──────────────────┐ │
│ │ Stop │───▶│Save to IndexedDB│ │
│ └─────────────┘ └──────────────────┘ │
│ │ │
│ ▼ │
│ ┌──────────────────┐ │
│ │ Recordings List │ │
│ └──────────────────┘ │
│ │ │
│ ┌───────────────┼───────────────┐ │
│ ▼ ▼ ▼ │
│ ┌───────────┐ ┌───────────┐ ┌───────────┐ │
│ │ Play │ │ Download │ │ Delete │ │
│ └───────────┘ └───────────┘ └───────────┘ │
│ │ │
│ ▼ │
│ ┌──────────────────┐ │
│ │ Video Player │ │
│ │ - Play/Pause │ │
│ │ - Speed Control │ │
│ │ - Seek Bar │ │
│ └──────────────────┘ │
└─────────────────────────────────────────────────────────────┘
| Component | Description |
|---|---|
| Header | App title with live status indicator |
| Video Preview | Full-screen camera feed with overlay |
| Info Overlay | Live timestamp display |
| Recording Timer | Elapsed time during recording |
| Main Controls | Start Camera, Record, Stop buttons |
| Secondary Controls | Recordings, Info, Settings buttons |
| Bottom Sheets | Sliding panels for lists and settings |
| Video Player | Full-screen playback with controls |
| Toast Notifications | Non-intrusive feedback messages |
- 🌑 Deep Navy Background — Gradient from #0f0f23 to #1a1a2e
- 💙 Cyan Accents — #00d4ff for primary actions
- 💚 Green Accents — #00ff88 for success states
- ❤️ Red Accents — #ff0080 for recording/danger
- ✨ Glassmorphism — Frosted glass effects on headers and sheets
- 📱 Mobile-First — Optimized for touch interaction
- 🔄 Smooth transitions for bottom sheets
- 💫 Pulse animation for status indicators
- ✨ Fade effects for toast notifications
- 🎯 Scale feedback on button taps
| Feature | Status |
|---|---|
| Camera Access | ✅ Complete |
| Video Recording | ✅ Complete |
| Audio Recording | ✅ Complete |
| Camera Switching | ✅ Complete |
| Recording Timer | ✅ Complete |
| Screen Wake Lock | ✅ Complete |
| Video Playback | ✅ Complete |
| Playback Speed Control | ✅ Complete |
| Download Recordings | ✅ Complete |
| IndexedDB Storage | ✅ Complete |
| Storage Management | ✅ Complete |
| Auto-Delete | ✅ Complete |
| Settings Panel | ✅ Complete |
| Toast Notifications | ✅ Complete |
| Mobile Responsive | ✅ Complete |
| Dark Theme | ✅ Complete |
| Touch Controls | ✅ Complete |
- 🎯 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 format
- 📱 Picture-in-picture mode
- 🔊 Audio level indicator
- 🔐 100% Local — All recordings stay on your device
- 🚫 No Uploads — No data sent to any server
- 📡 No Tracking — No analytics or tracking scripts
- 🗑️ User-Controlled — Delete recordings anytime
- 🔒 Secure Context — Requires HTTPS for camera access
- 👁️ Private — No third-party access to your recordings
- ✅ Google Chrome (Desktop & Mobile)
- ✅ Microsoft Edge
- ✅ Mozilla Firefox
- ✅ Safari (14+)
- ✅ Opera
- ✅ Brave
- ✅ Samsung Internet
- 📹 Camera hardware (front or rear)
- 🎙️ Microphone for audio recording
- 🔒 HTTPS connection (or localhost)
- 💾 100MB+ free storage
Contributions, issues, and feature requests are welcome!
- Fork the repository
git fork https://github.com/dhruvpandit46/CCTV.git- Create a feature branch
git checkout -b feature/your-feature-
Make your changes and test thoroughly
-
Commit your changes
git commit -m "Add your feature"- Push to your branch
git push origin feature/your-feature- Open a Pull Request
This project is licensed under the MIT License.
MIT © 2026 Dhruv Pandit
See the LICENSE file for full license details.
Dhruv Pandit
- GitHub: @dhruvpandit46
- LinkedIn: Dhruv Pandit
- Instagram: @dhruv_pandit2007
If you found Mobile CCTV useful, please consider giving it a ⭐ on GitHub!
It helps others discover the project and supports future development.