feat: add camera capture component (refs #66)
All checks were successful
Deploy to Staging / Build Images (pull_request) Successful in 3m14s
Deploy to Staging / Deploy to Staging (pull_request) Successful in 33s
Deploy to Staging / Verify Staging (pull_request) Successful in 2m19s
Deploy to Staging / Notify Staging Ready (pull_request) Successful in 8s
Deploy to Staging / Notify Staging Failure (pull_request) Has been skipped

Implements a reusable React camera capture component with:
- getUserMedia API for camera access on mobile and desktop
- Translucent aspect-ratio guidance overlays (VIN ~6:1, receipt ~2:3)
- Post-capture crop tool with draggable handles
- File input fallback for desktop and unsupported browsers
- Support for HEIC, JPEG, PNG (sent as-is to server)
- Full mobile responsiveness (320px - 1920px)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Eric Gullickson
2026-02-01 15:05:18 -06:00
parent 42e0fc1fce
commit 7c8b6fda2a
11 changed files with 2439 additions and 0 deletions

View File

@@ -0,0 +1,32 @@
# frontend/src/shared/
Shared components that are reusable across multiple features.
## Subdirectories
| Directory | What | When to read |
| --------- | ---- | ------------ |
| `components/CameraCapture/` | Camera capture with crop tool | Building OCR features, image upload |
## Components
### CameraCapture
Full-featured camera capture component with:
- `getUserMedia` API for camera access
- Translucent guidance overlays (VIN, receipt, document)
- Post-capture crop tool
- File input fallback for desktop/unsupported browsers
- HEIC, JPEG, PNG support
Usage:
```tsx
import { CameraCapture } from '@/shared/components/CameraCapture';
<CameraCapture
onCapture={(file, croppedFile) => handleCapture(file, croppedFile)}
onCancel={() => setShowCamera(false)}
guidanceType="vin"
allowCrop={true}
/>
```