https://github.com/katahiromz/simple-camera
Android/PWA camera app
https://github.com/katahiromz/simple-camera
android audio camera camera-app camera-application japanese keyboard movie movie-web-app panning pinch-to-zoom pwa recorder recording take-photo web web-app web-application webview zoom
Last synced: 8 days ago
JSON representation
Android/PWA camera app
- Host: GitHub
- URL: https://github.com/katahiromz/simple-camera
- Owner: katahiromz
- Created: 2025-12-11T09:38:03.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2026-01-08T23:15:47.000Z (about 1 month ago)
- Last Synced: 2026-02-04T08:21:47.074Z (8 days ago)
- Topics: android, audio, camera, camera-app, camera-application, japanese, keyboard, movie, movie-web-app, panning, pinch-to-zoom, pwa, recorder, recording, take-photo, web, web-app, web-application, webview, zoom
- Language: TypeScript
- Homepage: https://katahiromz.github.io/camera/
- Size: 5.17 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
English | [Japanese](README_ja.md)
---
# Simple Camera (PWA & Android Hybrid)
A high-performance camera web application built with React 19 and Vite 7. In addition to functioning as a PWA, it features advanced integration as an Android native app.
![[Camera Icon]](public/pwa-192x192.png)
![[Screenshot]](img/screenshot.png)
## 🌟 Key Features
* **Advanced Camera Controls**: Photo capture, video recording (WebM), real-time zoom, and pan operations.
* **QR Code Analysis**: Fast scanning functionality using `zxing-wasm`.
* **Android Native Integration**:
* **Physical Button Support**: Use volume buttons as a shutter.
* **Inset Support**: Safe area design considering Android notches and system bars.
* **Vibration**: Haptic feedback during capture.
* **Internationalization (i18n)**: Supports Japanese and English with automatic switching based on OS settings.
* **Coordinate Transformation**: Accurate coordinate mapping between canvas drawings and video footage.
## 🛠 Tech Stack
### Frontend (Web)
* **Framework**: React 19 (TypeScript)
* **Build Tool**: Vite 7
* **PWA**: `vite-plugin-pwa` (Offline support via Service Worker)
* **Libraries**:
* `lucide-react` (Icons)
* `i18next` (Multilingual support)
* `zxing-wasm` (Code analysis)
* `@fix-webm-duration/fix` (Repair duration of recorded data)
### Backend (Android Native)
* **Language**: Kotlin 1.9
* **UI**: WebView (Secure local loading via WebViewAssetLoader)
## 🚀 Development and Build
### Web Setup
```bash
# Install dependencies
npm install
# Start development server
npm run dev
# Build (After building, files are automatically copied to the Android assets folder)
npm run build
```
### Android Setup
1. After running `npm run build`, confirm that files are generated in `app/src/main/assets/camera`.
2. Open the `android` folder in Android Studio.
3. Build and run.
## 📁 Project Structure (Main Parts)
```text
src/
├── components/ # UI Components (Webcam, Controls, Canvas)
├── libs/ # Utilities, Permission Mgmt, i18n, Device Mgmt
├── App.tsx # App entry point & message handling
android/
├── app/src/main/assets/ # Destination for Web build artifacts
└── app/src/main/java/... # Kotlin native implementation (WebViewClient, ChromeClient)
```
## 📝 License
* MIT License
## 👤 Developer
* **Hirofumi Katayama MZ** (katahiromz)
* [katayama.hirofumi.mz@gmail.com](mailto:katayama.hirofumi.mz@gmail.com)