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
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:
32
frontend/src/shared/CLAUDE.md
Normal file
32
frontend/src/shared/CLAUDE.md
Normal 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}
|
||||
/>
|
||||
```
|
||||
Reference in New Issue
Block a user