feat(03-03): CameraCapture modal with getUserMedia
- Full-screen camera modal with live preview via getUserMedia - Photo capture using canvas.toBlob (JPEG at 0.9 quality) - Preview captured photo with retake/confirm flow - Camera stream properly stopped on close and after capture - Switch camera button for front/back camera toggle - Upload integration via ?/uploadImage form action Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Thomas Richter
313
src/lib/components/CameraCapture.svelte
Normal file
313
src/lib/components/CameraCapture.svelte
Normal file
@@ -0,0 +1,313 @@
|
||||
<script lang="ts">
|
||||
import { invalidateAll } from '$app/navigation';
|
||||
|
||||
interface Props {
|
||||
entryId: string;
|
||||
onClose: () => void;
|
||||
onCapture?: (imageId: string) => void;
|
||||
}
|
||||
|
||||
let { entryId, onClose, onCapture }: Props = $props();
|
||||
|
||||
// Stream and capture state
|
||||
let stream: MediaStream | null = $state(null);
|
||||
let capturedBlob: Blob | null = $state(null);
|
||||
let capturedPreviewUrl: string | null = $state(null);
|
||||
let error: string | null = $state(null);
|
||||
let isUploading = $state(false);
|
||||
let facingMode: 'environment' | 'user' = $state('environment');
|
||||
|
||||
// Element refs
|
||||
let videoElement: HTMLVideoElement;
|
||||
let canvasElement: HTMLCanvasElement;
|
||||
|
||||
// Feature detection
|
||||
const hasCameraSupport =
|
||||
typeof navigator !== 'undefined' && !!navigator.mediaDevices?.getUserMedia;
|
||||
|
||||
const isSecureContext = typeof window !== 'undefined' && window.isSecureContext;
|
||||
|
||||
async function startCamera() {
|
||||
// Check browser support
|
||||
if (!hasCameraSupport) {
|
||||
error = 'Camera not supported in this browser. Use the file upload option instead.';
|
||||
return;
|
||||
}
|
||||
|
||||
// Check secure context (HTTPS required except localhost)
|
||||
if (!isSecureContext) {
|
||||
error = 'Camera requires HTTPS connection.';
|
||||
return;
|
||||
}
|
||||
|
||||
// Stop existing stream if any
|
||||
if (stream) {
|
||||
stream.getTracks().forEach((track) => track.stop());
|
||||
stream = null;
|
||||
}
|
||||
|
||||
error = null;
|
||||
|
||||
// Set up timeout for camera start
|
||||
const timeoutId = setTimeout(() => {
|
||||
if (!stream) {
|
||||
error = 'Camera took too long to start. Please try again.';
|
||||
}
|
||||
}, 10000);
|
||||
|
||||
try {
|
||||
stream = await navigator.mediaDevices.getUserMedia({
|
||||
video: {
|
||||
facingMode,
|
||||
width: { ideal: 1920 },
|
||||
height: { ideal: 1080 }
|
||||
},
|
||||
audio: false
|
||||
});
|
||||
|
||||
clearTimeout(timeoutId);
|
||||
|
||||
if (videoElement) {
|
||||
videoElement.srcObject = stream;
|
||||
await videoElement.play();
|
||||
}
|
||||
} catch (err) {
|
||||
clearTimeout(timeoutId);
|
||||
|
||||
if (err instanceof DOMException) {
|
||||
if (err.name === 'NotAllowedError') {
|
||||
error = 'Camera access denied. Check browser settings to allow camera.';
|
||||
} else if (err.name === 'NotFoundError') {
|
||||
error = 'No camera found on this device. Use file upload instead.';
|
||||
} else {
|
||||
error = 'Could not access camera: ' + err.message;
|
||||
}
|
||||
} else {
|
||||
error = 'Could not access camera.';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function stopCamera() {
|
||||
if (stream) {
|
||||
stream.getTracks().forEach((track) => track.stop());
|
||||
stream = null;
|
||||
}
|
||||
if (videoElement) {
|
||||
videoElement.srcObject = null;
|
||||
}
|
||||
}
|
||||
|
||||
async function capturePhoto() {
|
||||
if (!videoElement || !canvasElement) return;
|
||||
|
||||
const ctx = canvasElement.getContext('2d');
|
||||
if (!ctx) return;
|
||||
|
||||
// Set canvas dimensions to match video
|
||||
canvasElement.width = videoElement.videoWidth;
|
||||
canvasElement.height = videoElement.videoHeight;
|
||||
|
||||
// Draw current video frame to canvas
|
||||
ctx.drawImage(videoElement, 0, 0);
|
||||
|
||||
// Convert canvas to blob
|
||||
return new Promise<void>((resolve) => {
|
||||
canvasElement.toBlob(
|
||||
(blob) => {
|
||||
if (blob) {
|
||||
capturedBlob = blob;
|
||||
capturedPreviewUrl = URL.createObjectURL(blob);
|
||||
// Stop camera to save battery while reviewing
|
||||
stopCamera();
|
||||
}
|
||||
resolve();
|
||||
},
|
||||
'image/jpeg',
|
||||
0.9
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
async function retake() {
|
||||
// Revoke preview URL to free memory
|
||||
if (capturedPreviewUrl) {
|
||||
URL.revokeObjectURL(capturedPreviewUrl);
|
||||
}
|
||||
capturedBlob = null;
|
||||
capturedPreviewUrl = null;
|
||||
|
||||
// Restart camera
|
||||
await startCamera();
|
||||
}
|
||||
|
||||
async function confirmAndUpload() {
|
||||
if (!capturedBlob) return;
|
||||
|
||||
isUploading = true;
|
||||
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append('image', capturedBlob, 'camera-capture.jpg');
|
||||
formData.append('entryId', entryId);
|
||||
|
||||
const response = await fetch('?/uploadImage', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.type === 'success' && result.data?.imageId) {
|
||||
onCapture?.(result.data.imageId);
|
||||
await invalidateAll();
|
||||
handleClose();
|
||||
} else {
|
||||
error = result.data?.error || 'Failed to upload photo.';
|
||||
isUploading = false;
|
||||
}
|
||||
} catch {
|
||||
error = 'Failed to upload photo. Please try again.';
|
||||
isUploading = false;
|
||||
}
|
||||
}
|
||||
|
||||
function switchCamera() {
|
||||
facingMode = facingMode === 'environment' ? 'user' : 'environment';
|
||||
startCamera();
|
||||
}
|
||||
|
||||
function handleClose() {
|
||||
stopCamera();
|
||||
|
||||
// Revoke any preview URL
|
||||
if (capturedPreviewUrl) {
|
||||
URL.revokeObjectURL(capturedPreviewUrl);
|
||||
capturedPreviewUrl = null;
|
||||
}
|
||||
|
||||
capturedBlob = null;
|
||||
onClose();
|
||||
}
|
||||
|
||||
// Start camera on mount
|
||||
$effect(() => {
|
||||
startCamera();
|
||||
|
||||
// Cleanup on unmount
|
||||
return () => {
|
||||
stopCamera();
|
||||
if (capturedPreviewUrl) {
|
||||
URL.revokeObjectURL(capturedPreviewUrl);
|
||||
}
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="fixed inset-0 z-50 bg-black flex flex-col">
|
||||
<!-- Header with close and switch camera buttons -->
|
||||
<div class="flex justify-between items-center p-4">
|
||||
<button
|
||||
type="button"
|
||||
onclick={handleClose}
|
||||
class="w-10 h-10 rounded-full bg-black/50 text-white flex items-center justify-center"
|
||||
aria-label="Close camera"
|
||||
>
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{#if !error && !capturedPreviewUrl}
|
||||
<button
|
||||
type="button"
|
||||
onclick={switchCamera}
|
||||
class="w-10 h-10 rounded-full bg-black/50 text-white flex items-center justify-center"
|
||||
aria-label="Switch camera"
|
||||
>
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Main content area -->
|
||||
<div class="flex-1 flex items-center justify-center overflow-hidden">
|
||||
{#if error}
|
||||
<div class="text-center p-6">
|
||||
<p class="text-white text-lg mb-4">{error}</p>
|
||||
<button
|
||||
type="button"
|
||||
onclick={handleClose}
|
||||
class="px-6 py-3 bg-white text-black rounded-lg font-medium"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
{:else if capturedPreviewUrl}
|
||||
<!-- Preview captured photo -->
|
||||
<img
|
||||
src={capturedPreviewUrl}
|
||||
alt="Captured photo preview"
|
||||
class="max-h-full max-w-full object-contain"
|
||||
/>
|
||||
{:else}
|
||||
<!-- Live camera view -->
|
||||
<!-- svelte-ignore a11y_media_has_caption -->
|
||||
<video
|
||||
bind:this={videoElement}
|
||||
autoplay
|
||||
playsinline
|
||||
muted
|
||||
class="max-h-full max-w-full object-contain"
|
||||
></video>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Hidden canvas for capture -->
|
||||
<canvas bind:this={canvasElement} class="hidden"></canvas>
|
||||
|
||||
<!-- Action buttons -->
|
||||
<div class="p-4 pb-8 flex justify-center gap-4">
|
||||
{#if capturedPreviewUrl}
|
||||
<!-- Retake / Confirm buttons -->
|
||||
<button
|
||||
type="button"
|
||||
onclick={retake}
|
||||
disabled={isUploading}
|
||||
class="px-6 py-3 bg-white/20 text-white rounded-lg font-medium disabled:opacity-50"
|
||||
>
|
||||
Retake
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onclick={confirmAndUpload}
|
||||
disabled={isUploading}
|
||||
class="px-6 py-3 bg-white text-black rounded-lg font-medium disabled:opacity-50"
|
||||
>
|
||||
{isUploading ? 'Uploading...' : 'Use Photo'}
|
||||
</button>
|
||||
{:else if !error}
|
||||
<!-- Capture button - large circle -->
|
||||
<button
|
||||
type="button"
|
||||
onclick={capturePhoto}
|
||||
class="w-16 h-16 rounded-full bg-white border-4 border-white/50 flex items-center justify-center active:scale-95 transition-transform"
|
||||
aria-label="Capture photo"
|
||||
>
|
||||
<span class="w-12 h-12 rounded-full bg-white"></span>
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user