Proof of Concepts ‐ Video‐Generierung & Speicherung der Bilder - cosimazink/praxisprojekt-2025 GitHub Wiki

Die aufgenommenen Selfies sollen vor der dauerhaften Speicherung komprimiert und skaliert werden, um Speicherplatz zu sparen und die spätere Verarbeitung zu beschleunigen. Ziel ist es, eine Komponente zu integrieren, die clientseitig Bilder automatisch reduziert, ohne dabei merklich an Qualität zu verlieren. Die Komponente wird in den Selfie-Aufnahmeprozess eingebunden und speichert die optimierten Bilder lokal und optional serverseitig mit Zeitstempel und Nutzer-ID.

• Bilder werden um mindestens 50 % reduziert
• Qualität bleibt visuell akzeptabel (SSIM > 0.95)
• Speicherung erfolgt lokal und mit korrektem Pfadnamen

• Komprimierung scheitert oder führt zu defekten Dateien
• Datei bleibt zu groß (>2 MB)
• Reihenfolge oder Zuordnung geht verloren

• Nur temporäre Speicherung im localStorage
• Bildgrößenbeschränkung
• Manuelles Reduzieren mit canvas.toBlob()

• HTML5 zur Reduktion und Konvertierung
• canvas.toDataURL() / canvas.toBlob() mit Quality-Parameter
• Speicherung in IndexedDB oder localStorage
• Backend-Speicherung in SQLite mit Bildpfad

Faktor	Annahme
Bildformat	PNG
Auflösung	640 × 480 px (nach Skalierung)
Komprimierung	verlustfreie PNG-Kompression
Bildgröße nach Kompression	ca. 150–300 KB pro Bild
Selfies pro Nutzer/Tag	1
Nutzeranzahl	z. B. 100
Zeitraum	1 Jahr (365 Tage)

Beim Speichern der Selfies wird jedes Bild vor dem Upload auf eine Auflösung von 640 × 480 Pixeln skaliert und als PNG mit verlustfreier Kompression gespeichert. Daraus ergibt sich ein durchschnittlicher Speicherbedarf von etwa 150–300 KB pro Bild. Bei einem Bild pro Tag und Nutzer entsteht bei 100 Nutzern ein jährlicher Speicherbedarf von rund 8,2 GB.

Aus einer chronologischen Serie von Bildern soll ein Video erzeugt werden, das den Verlauf der Selfies visuell darstellt. Nutzer können konfigurieren, wie lange jedes Bild angezeigt wird und welche Auflösung das Video haben soll (und ob Übergänge oder eine Hintergrundmusik enthalten sein sollen). Die Umsetzung erfolgt serverseitig über Node.js mit FFmpeg. Ziel ist ein vollautomatischer Prozess, der auch bei großer Bildanzahl (z. B. 30–60 Bilder) stabil läuft.

• Video wird erfolgreich aus allen übergebenen Bildern erstellt
• Konfigurationen (z. B. Bilddauer, Videoauflösung) werden berücksichtigt
• Das Ergebnis ist ein browserkompatibles MP4
• Video kann unter 30 MB bleiben (für 30 Bilder)

• Video wird nicht erstellt
• Falsche Reihenfolge oder fehlende Bilder
• Konfiguration wird nicht übernommen oder ignoriert
• Video zu groß (>50 MB) oder nicht kompatibel mit gängigen Playern

• Fixe Standardparameter
• Clientseitiger Hinweis auf zu große Bilder
• Teilung des Videos in mehrere Abschnitte

• Node.js + fluent-ffmpeg zur Videogenerierung
• Bildordner-Struktur mit Zeitstempeln für Reihenfolge
• Konfigurierbares JSON-Interface zur Parameterübergabe
• Export als MP4 (H.264), optional mit Vorschau-Link