{"id":48578762,"url":"https://github.com/shakurt/alarm-cam","last_synced_at":"2026-04-08T16:05:18.270Z","repository":{"id":319075145,"uuid":"1076703688","full_name":"shakurt/alarm-cam","owner":"shakurt","description":"A lightweight browser-based motion detection system that uses your webcam to trigger an alarm on movement.","archived":false,"fork":false,"pushed_at":"2025-10-27T07:49:53.000Z","size":95,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-27T09:25:08.164Z","etag":null,"topics":["ai-project","alarm-system","canvas","computer-vision","educational","image-processing","javascript","motion-detection","pixel-analysis","real-time","university-project","web-audio-api","webcam"],"latest_commit_sha":null,"homepage":"https://shakurt.github.io/alarm-cam/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shakurt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-15T08:25:28.000Z","updated_at":"2025-10-27T07:47:56.000Z","dependencies_parsed_at":null,"dependency_job_id":"3b82786e-0260-4846-bfef-18b2cb5b5b0c","html_url":"https://github.com/shakurt/alarm-cam","commit_stats":null,"previous_names":["shakurt/alarm-cam"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/shakurt/alarm-cam","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shakurt%2Falarm-cam","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shakurt%2Falarm-cam/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shakurt%2Falarm-cam/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shakurt%2Falarm-cam/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shakurt","download_url":"https://codeload.github.com/shakurt/alarm-cam/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shakurt%2Falarm-cam/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31562734,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-08T14:31:17.711Z","status":"ssl_error","status_checked_at":"2026-04-08T14:31:17.202Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai-project","alarm-system","canvas","computer-vision","educational","image-processing","javascript","motion-detection","pixel-analysis","real-time","university-project","web-audio-api","webcam"],"created_at":"2026-04-08T16:05:18.198Z","updated_at":"2026-04-08T16:05:18.260Z","avatar_url":"https://github.com/shakurt.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Alarm Camera - Real-time Motion Detection System\n\nAn advanced browser-based motion detection application built with React, TypeScript, and sophisticated computer vision algorithms. Transform your device's camera into an intelligent security monitor with real-time processing and smart detection capabilities.\n\n## 🚀 Features\n\n### Core Motion Detection\n\n- **Real-time Processing**: Analyzes video frames at 10 FPS with minimal latency\n- **Advanced Background Modeling**: Uses exponential moving average to learn and adapt to environmental changes\n- **Adaptive Thresholding**: Dynamically adjusts sensitivity based on current conditions\n- **Multi-frame Confirmation**: Requires consecutive motion frames to reduce false positives\n- **Sudden Light Detection**: Specialized detection for rapid lighting changes\n- **Smart Pause System**: Prevents alert spam with configurable pause periods\n\n### Intelligent Features\n\n- **Bounding Box Detection**: Identifies and highlights exact motion areas\n- **Four-Image capture**: Before, after, background reference, and zoomed detection area\n- **Audio Alerts**: Customizable beep notifications using Web Audio API\n- **Background Reset**: Manual and automatic background recalibration\n- **Detection Statistics**: Detailed metrics including change ratios and brightness differences\n\n### Data Management\n\n- **Local Storage**: Uses IndexedDB for offline detection history\n- **Export Functionality**: Download detection data as JSON for analysis\n- **User Preferences**: Persistent login and notification settings\n- **Real-time Statistics**: Live display of processing parameters and detection counts\n\n### User Experience\n\n- **Responsive Design**: Works on desktop and mobile devices\n- **Toast Notifications**: Real-time status updates and countdown timers\n- **Processing Indicators**: Visual feedback for system status\n- **Clean Interface**: Modern UI with Tailwind CSS styling\n\n## 🛠️ Technical Stack\n\n- **Frontend**: React 19 + TypeScript\n- **Styling**: Tailwind CSS with custom theme\n- **Image Processing**: HTML5 Canvas API\n- **Camera Access**: WebRTC MediaDevices API\n- **Storage**: IndexedDB for client-side persistence\n- **Audio**: Web Audio API for alert sounds\n- **Build Tool**: Vite with hot module replacement\n- **Code Quality**: ESLint + Prettier with strict TypeScript\n\n## 📊 Processing Parameters\n\n| Parameter           | Value  | Description                                 |\n| ------------------- | ------ | ------------------------------------------- |\n| Frame Rate          | 10 FPS | Processing frequency for motion analysis    |\n| Background Alpha    | 0.02   | Learning rate for background adaptation     |\n| EMA Alpha           | 0.05   | Exponential moving average smoothing factor |\n| Sensitivity Factor  | 1.8    | Motion detection sensitivity multiplier     |\n| Confirmation Frames | 2      | Required consecutive motion frames          |\n| Pause Duration      | 3000ms | Post-detection pause to prevent spam        |\n\n## 🚀 Getting Started\n\n### Prerequisites\n\n- Node.js 18+ and npm/yarn\n- Modern web browser with camera access\n- HTTPS connection (required for camera access)\n\n### Installation\n\n```bash\n# Clone the repository\ngit clone https://github.com/shakurt/alarm-cam.git\ncd alarm-cam\n\n# Install dependencies\nnpm install\n\n# Start development server\nnpm run dev\n\n# Build for production\nnpm run build\n```\n\n### Development Scripts\n\n```bash\nnpm run dev          # Start development server with hot reload\nnpm run build        # Build for production\nnpm run preview      # Preview production build\nnpm run lint         # Run ESLint checks\nnpm run lint:fix     # Fix linting issues automatically\nnpm run format       # Format code with Prettier\nnpm run format:check # Check code formatting\n```\n\n## 🔧 Configuration\n\n### Environment Setup\n\nThe application runs entirely in the browser with no backend requirements. Key configurations:\n\n- **Camera Resolution**: Automatically adapts to device capabilities\n- **Processing Rate**: Configurable via `PROCESS_FPS` constant\n- **Detection Sensitivity**: Adjustable through various algorithm parameters\n- **Storage Limits**: Maximum 1000 detections in memory\n\n### Algorithm Tuning\n\nKey parameters can be adjusted in `src/components/camera/CameraView.tsx`:\n\n```typescript\nconst PROCESS_FPS = 10; // Processing frequency\nconst ALPHA_BG = 0.02; // Background learning rate\nconst EMA_ALPHA = 0.05; // Moving average smoothing\nconst SENSITIVITY_FACTOR = 1.8; // Detection sensitivity\nconst PAUSE_AFTER_DETECTION_MS = 3000; // Post-detection pause\nconst MOTION_CONFIRM_FRAMES = 2; // Confirmation requirement\n```\n\n## 🏗️ Architecture\n\n### Core Components\n\n- **CameraView**: Main detection engine with video processing\n- **DetectionList**: Display and management of detection history\n- **Camera**: Parent component coordinating detection flow\n- **Frame Utils**: Image processing and computer vision algorithms\n\n### Key Algorithms\n\n1. **Grayscale Conversion**: RGB to luminance using standard coefficients\n2. **Background Subtraction**: Pixel-wise difference with adaptive background\n3. **Binary Thresholding**: Adaptive threshold based on environmental analysis\n4. **Morphological Operations**: Noise reduction and region enhancement\n5. **Bounding Box Calculation**: Precise motion area identification\n\n### Data Flow\n\n```\nVideo Stream → Frame Capture → Grayscale → Background Subtraction →\nThresholding → Motion Analysis → Detection Decision → Alert \u0026 Storage\n```\n\n## 🎯 Use Cases\n\n- **Home Security**: Monitor entrances, rooms, or outdoor areas\n- **Office Surveillance**: Track after-hours activity or unauthorized access\n- **Pet Monitoring**: Keep track of pet behavior and activity\n- **Research**: Computer vision algorithm testing and development\n- **Education**: Demonstrate motion detection concepts and techniques\n\n## 🔒 Privacy \u0026 Security\n\n- **Local Processing**: All video analysis happens in your browser\n- **No Cloud Upload**: Video streams never leave your device\n- **Local Storage**: Detection data stored locally in IndexedDB\n- **User Control**: Complete control over when detection is active\n\n## 🤝 Contributing\n\nContributions are welcome! Please feel free to submit pull requests or open issues for bugs and feature requests.\n\n### Development Guidelines\n\n- Follow TypeScript strict mode requirements\n- Use ESLint and Prettier for code formatting\n- Write meaningful commit messages\n- Test thoroughly across different devices and browsers\n\n## 📄 License\n\nThis project is open source and available under the [MIT License](LICENSE).\n\n## 👨‍💻 Author\n\nDeveloped by **ThePrimeShak** - [GitHub Profile](https://github.com/shakurt)\n\n---\n\n_Transform your browser into a powerful motion detection system with Alarm Camera!_\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshakurt%2Falarm-cam","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshakurt%2Falarm-cam","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshakurt%2Falarm-cam/lists"}