Compare commits
1 Commits
feat/html-
...
feat/camer
| Author | SHA1 | Date | |
|---|---|---|---|
|
2e3097ca40 |
45
.env.test
Normal file
45
.env.test
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
# ── Domain ────────────────────────────────────────────────────────────────────
|
||||||
|
# Public domain Caddy will serve and obtain a TLS certificate for.
|
||||||
|
DOMAIN=my-event.example.com
|
||||||
|
|
||||||
|
# ── App server ────────────────────────────────────────────────────────────────
|
||||||
|
APP_PORT=3000
|
||||||
|
|
||||||
|
# ── Database ──────────────────────────────────────────────────────────────────
|
||||||
|
DATABASE_URL=postgres://eventsnap:secret@db:5432/eventsnap
|
||||||
|
POSTGRES_USER=eventsnap
|
||||||
|
POSTGRES_PASSWORD=secret
|
||||||
|
POSTGRES_DB=eventsnap
|
||||||
|
|
||||||
|
# ── Authentication ────────────────────────────────────────────────────────────
|
||||||
|
# Generate with: openssl rand -hex 64
|
||||||
|
JWT_SECRET=change_me_to_a_random_64_byte_hex_string
|
||||||
|
SESSION_EXPIRY_DAYS=30
|
||||||
|
|
||||||
|
# Admin dashboard password (bcrypt hash).
|
||||||
|
# Generate with: htpasswd -bnBC 12 "" yourpassword | tr -d ':\n'
|
||||||
|
ADMIN_PASSWORD_HASH=$2y$12$placeholder_replace_me
|
||||||
|
|
||||||
|
# ── Event ─────────────────────────────────────────────────────────────────────
|
||||||
|
EVENT_NAME=Max & Maria's Wedding
|
||||||
|
EVENT_SLUG=max-maria-2026
|
||||||
|
|
||||||
|
# ── Storage ───────────────────────────────────────────────────────────────────
|
||||||
|
MEDIA_PATH=/media
|
||||||
|
|
||||||
|
# ── Upload limits ─────────────────────────────────────────────────────────────
|
||||||
|
DEFAULT_MAX_IMAGE_SIZE_MB=20
|
||||||
|
DEFAULT_MAX_VIDEO_SIZE_MB=500
|
||||||
|
|
||||||
|
# ── Rate limiting ─────────────────────────────────────────────────────────────
|
||||||
|
DEFAULT_UPLOAD_RATE_PER_HOUR=10
|
||||||
|
DEFAULT_FEED_RATE_PER_MIN=60
|
||||||
|
DEFAULT_EXPORT_RATE_PER_DAY=3
|
||||||
|
|
||||||
|
# ── Capacity ──────────────────────────────────────────────────────────────────
|
||||||
|
DEFAULT_ESTIMATED_GUEST_COUNT=100
|
||||||
|
# Fraction of total storage that triggers the "low storage" warning (0.0–1.0)
|
||||||
|
DEFAULT_QUOTA_TOLERANCE=0.75
|
||||||
|
|
||||||
|
# ── Workers ───────────────────────────────────────────────────────────────────
|
||||||
|
COMPRESSION_WORKER_CONCURRENCY=2
|
||||||
238
frontend/src/lib/components/CameraCapture.svelte
Normal file
238
frontend/src/lib/components/CameraCapture.svelte
Normal file
@@ -0,0 +1,238 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { onMount, onDestroy } from 'svelte';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
oncapture: (blob: Blob, type: 'photo' | 'video') => void;
|
||||||
|
onclose: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
let { oncapture, onclose }: Props = $props();
|
||||||
|
|
||||||
|
let videoEl: HTMLVideoElement;
|
||||||
|
let canvasEl: HTMLCanvasElement;
|
||||||
|
let stream: MediaStream | null = $state(null);
|
||||||
|
let facingMode = $state<'environment' | 'user'>('environment');
|
||||||
|
let recording = $state(false);
|
||||||
|
let recordingTime = $state(0);
|
||||||
|
let error = $state<string | null>(null);
|
||||||
|
let mediaRecorder: MediaRecorder | null = null;
|
||||||
|
let recordedChunks: Blob[] = [];
|
||||||
|
let recordingInterval: ReturnType<typeof setInterval> | null = null;
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
startCamera();
|
||||||
|
});
|
||||||
|
|
||||||
|
onDestroy(() => {
|
||||||
|
stopCamera();
|
||||||
|
if (recordingInterval) clearInterval(recordingInterval);
|
||||||
|
});
|
||||||
|
|
||||||
|
async function startCamera() {
|
||||||
|
error = null;
|
||||||
|
stopCamera();
|
||||||
|
|
||||||
|
try {
|
||||||
|
stream = await navigator.mediaDevices.getUserMedia({
|
||||||
|
video: { facingMode, width: { ideal: 1920 }, height: { ideal: 1080 } },
|
||||||
|
audio: true
|
||||||
|
});
|
||||||
|
if (videoEl) {
|
||||||
|
videoEl.srcObject = stream;
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
if (err instanceof DOMException && err.name === 'NotAllowedError') {
|
||||||
|
error = 'Kamerazugriff wurde verweigert. Bitte erlaube den Zugriff in den Browsereinstellungen.';
|
||||||
|
} else if (err instanceof DOMException && err.name === 'NotFoundError') {
|
||||||
|
error = 'Keine Kamera gefunden.';
|
||||||
|
} else {
|
||||||
|
error = 'Kamera konnte nicht gestartet werden.';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function stopCamera() {
|
||||||
|
if (stream) {
|
||||||
|
for (const track of stream.getTracks()) {
|
||||||
|
track.stop();
|
||||||
|
}
|
||||||
|
stream = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function toggleCamera() {
|
||||||
|
facingMode = facingMode === 'environment' ? 'user' : 'environment';
|
||||||
|
await startCamera();
|
||||||
|
}
|
||||||
|
|
||||||
|
function capturePhoto() {
|
||||||
|
if (!videoEl || !canvasEl) return;
|
||||||
|
const ctx = canvasEl.getContext('2d');
|
||||||
|
if (!ctx) return;
|
||||||
|
|
||||||
|
canvasEl.width = videoEl.videoWidth;
|
||||||
|
canvasEl.height = videoEl.videoHeight;
|
||||||
|
ctx.drawImage(videoEl, 0, 0);
|
||||||
|
|
||||||
|
canvasEl.toBlob(
|
||||||
|
(blob) => {
|
||||||
|
if (blob) oncapture(blob, 'photo');
|
||||||
|
},
|
||||||
|
'image/jpeg',
|
||||||
|
0.92
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function startRecording() {
|
||||||
|
if (!stream) return;
|
||||||
|
|
||||||
|
recordedChunks = [];
|
||||||
|
recordingTime = 0;
|
||||||
|
|
||||||
|
const mimeType = MediaRecorder.isTypeSupported('video/webm;codecs=vp9')
|
||||||
|
? 'video/webm;codecs=vp9'
|
||||||
|
: MediaRecorder.isTypeSupported('video/webm')
|
||||||
|
? 'video/webm'
|
||||||
|
: 'video/mp4';
|
||||||
|
|
||||||
|
mediaRecorder = new MediaRecorder(stream, { mimeType });
|
||||||
|
|
||||||
|
mediaRecorder.ondataavailable = (e) => {
|
||||||
|
if (e.data.size > 0) recordedChunks.push(e.data);
|
||||||
|
};
|
||||||
|
|
||||||
|
mediaRecorder.onstop = () => {
|
||||||
|
const blob = new Blob(recordedChunks, { type: mediaRecorder?.mimeType ?? mimeType });
|
||||||
|
oncapture(blob, 'video');
|
||||||
|
recordedChunks = [];
|
||||||
|
};
|
||||||
|
|
||||||
|
mediaRecorder.start(1000);
|
||||||
|
recording = true;
|
||||||
|
|
||||||
|
recordingInterval = setInterval(() => {
|
||||||
|
recordingTime += 1;
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
|
||||||
|
function stopRecording() {
|
||||||
|
if (mediaRecorder && mediaRecorder.state !== 'inactive') {
|
||||||
|
mediaRecorder.stop();
|
||||||
|
}
|
||||||
|
recording = false;
|
||||||
|
if (recordingInterval) {
|
||||||
|
clearInterval(recordingInterval);
|
||||||
|
recordingInterval = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatRecordingTime(seconds: number): string {
|
||||||
|
const m = Math.floor(seconds / 60);
|
||||||
|
const s = seconds % 60;
|
||||||
|
return `${m}:${String(s).padStart(2, '0')}`;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="fixed inset-0 z-50 flex flex-col bg-black">
|
||||||
|
<!-- Camera preview -->
|
||||||
|
<div class="relative flex-1 overflow-hidden">
|
||||||
|
{#if error}
|
||||||
|
<div class="flex h-full items-center justify-center p-8">
|
||||||
|
<div class="rounded-lg bg-gray-900 p-6 text-center">
|
||||||
|
<svg class="mx-auto mb-3 h-12 w-12 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 10l-4 4m0-4l4 4m6-4a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||||
|
</svg>
|
||||||
|
<p class="text-sm text-white">{error}</p>
|
||||||
|
<button
|
||||||
|
onclick={onclose}
|
||||||
|
class="mt-4 rounded-lg bg-white/20 px-4 py-2 text-sm text-white"
|
||||||
|
>
|
||||||
|
Schliessen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<!-- svelte-ignore a11y_media_has_caption -->
|
||||||
|
<video
|
||||||
|
bind:this={videoEl}
|
||||||
|
autoplay
|
||||||
|
playsinline
|
||||||
|
muted
|
||||||
|
class="h-full w-full object-cover {facingMode === 'user' ? 'scale-x-[-1]' : ''}"
|
||||||
|
></video>
|
||||||
|
|
||||||
|
{#if recording}
|
||||||
|
<div class="absolute left-4 top-4 flex items-center gap-2 rounded-full bg-red-600 px-3 py-1">
|
||||||
|
<div class="h-2 w-2 animate-pulse rounded-full bg-white"></div>
|
||||||
|
<span class="text-sm font-medium text-white">{formatRecordingTime(recordingTime)}</span>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Controls -->
|
||||||
|
{#if !error}
|
||||||
|
<div class="flex items-center justify-center gap-8 bg-black/80 px-4 py-6">
|
||||||
|
<!-- Close -->
|
||||||
|
<button
|
||||||
|
onclick={onclose}
|
||||||
|
class="flex h-12 w-12 items-center justify-center rounded-full bg-white/20 text-white"
|
||||||
|
aria-label="Schliessen"
|
||||||
|
>
|
||||||
|
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Capture photo / record video -->
|
||||||
|
{#if recording}
|
||||||
|
<button
|
||||||
|
onclick={stopRecording}
|
||||||
|
class="flex h-16 w-16 items-center justify-center rounded-full border-4 border-white bg-red-600"
|
||||||
|
aria-label="Aufnahme stoppen"
|
||||||
|
>
|
||||||
|
<div class="h-6 w-6 rounded-sm bg-white"></div>
|
||||||
|
</button>
|
||||||
|
{:else}
|
||||||
|
<button
|
||||||
|
onclick={capturePhoto}
|
||||||
|
class="flex h-16 w-16 items-center justify-center rounded-full border-4 border-white bg-white/20 transition active:bg-white/40"
|
||||||
|
aria-label="Foto aufnehmen"
|
||||||
|
>
|
||||||
|
<div class="h-12 w-12 rounded-full bg-white"></div>
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<!-- Toggle camera / start recording -->
|
||||||
|
{#if recording}
|
||||||
|
<div class="h-12 w-12"></div>
|
||||||
|
{:else}
|
||||||
|
<button
|
||||||
|
onclick={toggleCamera}
|
||||||
|
class="flex h-12 w-12 items-center justify-center rounded-full bg-white/20 text-white"
|
||||||
|
aria-label="Kamera wechseln"
|
||||||
|
>
|
||||||
|
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<!-- Video record button -->
|
||||||
|
{#if !recording}
|
||||||
|
<div class="flex justify-center bg-black/80 pb-4">
|
||||||
|
<button
|
||||||
|
onclick={startRecording}
|
||||||
|
class="flex items-center gap-2 rounded-full bg-red-600/80 px-4 py-2 text-sm text-white transition hover:bg-red-600"
|
||||||
|
>
|
||||||
|
<div class="h-2.5 w-2.5 rounded-full bg-white"></div>
|
||||||
|
Video aufnehmen
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Hidden canvas for photo capture -->
|
||||||
|
<canvas bind:this={canvasEl} class="hidden"></canvas>
|
||||||
Reference in New Issue
Block a user