gitmedia/b2in
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
b2in/public/_cabinet/_docs/VIDEO_OPTIMIZATION_README.md

9.5 KiB
Raw Blame History

Cabinet Digital Signage - Video-Optimierung & Robustness

🔧 Problem

Nach einer gewissen Laufzeit wurden die Videos nicht mehr angezeigt (schwarzer Bildschirm), obwohl der Footer weiterhin funktionierte. Dies deutet auf Memory-Leaks oder einen fehlerhaften Video-Loop hin.

✅ Implementierte Lösungen

1. Robuster Video-Cleanup (Memory-Management)

Was wurde gemacht:

  • Explizites Video-Cleanup vor jedem neuen Video: 
    videoElement.pause();
videoElement.removeAttribute('src');
videoElement.load(); // Triggert Garbage Collection
  • 100ms Delay nach Cleanup, bevor neues Video geladen wird
  • Preload auf 'metadata' gesetzt (statt 'auto') → weniger Memory-Verbrauch

Warum das hilft:

  • Browser gibt Speicher des alten Videos frei
  • Verhindert Memory-Leaks bei langen Laufzeiten
  • Reduziert gleichzeitig geladene Video-Daten

2. Video Watchdog (Überwachung)

Was wurde gemacht:

  • Watchdog läuft alle 5 Sekunden
  • Prüft ob Video noch läuft (vergleicht currentTime)
  • Erkennt wenn Video "stecken bleibt"
  • Automatischer Skip zum nächsten Video nach 2x "stuck"

Was wird überwacht:

- currentTime (bewegt sich das Video?)
- isPaused (ist Video pausiert?)
- hasEnded (ist Video zu Ende?)
- isStuck (currentTime ändert sich nicht)

Warum das hilft:

  • Erkennt frozen Videos automatisch
  • Verhindert dass Display hängen bleibt
  • Selbstheilende Funktion ohne manuellen Eingriff

3. Start-Timeout (10 Sekunden)

Was wurde gemacht:

  • Timeout von 10 Sekunden für Video-Start
  • Falls Video nicht innerhalb von 10s startet → Skip zum nächsten
  • Timeout wird geclearet wenn Video erfolgreich startet

Warum das hilft:

  • Verhindert endloses Warten bei defekten Videos
  • Display bleibt nicht schwarz wenn Video nicht lädt
  • Automatische Recovery

4. Error Recovery (Fehlerbehandlung)

Was wurde gemacht:

  • Automatischer Skip bei Video-Fehlern
  • Consecutive Error Tracking (zählt aufeinanderfolgende Fehler)
  • Max 3 aufeinanderfolgende Fehler → dann Page-Reload nach 30s
  • Error-Logging mit detaillierten Media Error Codes

Error Codes:

  • MEDIA_ERR_ABORTED (1) - Video-Laden abgebrochen
  • MEDIA_ERR_NETWORK (2) - Netzwerkfehler
  • MEDIA_ERR_DECODE (3) - Dekodierungsfehler
  • MEDIA_ERR_SRC_NOT_SUPPORTED (4) - Format nicht unterstützt

Warum das hilft:

  • Display recovered automatisch von Fehlern
  • Verhindert dass ein defektes Video alles blockiert
  • Bei wiederholten Problemen: Komplett-Neustart

5. Memory-Monitoring (Performance-Überwachung)

Was wurde gemacht:

  • Memory-Check alle 10 Minuten
  • Loggt Speicherverbrauch in MB und Prozent
  • Warnung bei >80% Speicherauslastung
  • Loggt Video-Buffer-Status

Beispiel-Log:

{
  "message": "Memory Status",
  "context": {
    "usedMB": 245,
    "limitMB": 512,
    "percentUsed": 48
  }
}

Warum das hilft:

  • Frühzeitiges Erkennen von Memory-Problemen
  • Daten für Troubleshooting und Optimierung
  • Proaktives Monitoring statt reaktives Debugging

6. Präventive Maßnahmen

A) Präventiver Page-Reload (alle 6 Stunden)

setTimeout(() => {
    location.reload();
}, 6 * 60 * 60 * 1000);
  • Verhindert Memory-Leaks über sehr lange Laufzeit
  • Fresh Start alle 6 Stunden
  • Erfolgt automatisch im Hintergrund

B) Critical Error Check (alle 30 Sekunden)

  • Überwacht kritische Zustände
  • Bei 3 kritischen Fehlern → Reload nach 5s
  • Selbstheilende Funktion

C) CSS Performance-Optimierungen

#video-player {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}
  • Aktiviert Hardware-Beschleunigung
  • Reduziert Rendering-Last
  • Optimiert für Video-Playback

7. Erweiterte Video-Events

Neue Events die geloggt werden:

  • ended - Video zu Ende
  • error - Video-Fehler (mit Error Code)
  • stalled - Buffering (Video hängt)
  • waiting - Waiting for data
  • playing - Video spielt ab
  • canplay - Video kann abgespielt werden

Warum das hilft:

  • Vollständige Transparenz über Video-Status
  • Erkennen von Buffering-Problemen
  • Debuggen von Playback-Issues

📊 Monitoring & Debugging

Was wird jetzt geloggt:

Erfolgreiche Events:

✅ Video cleanup durchgeführt
✅ Video started: video1.mp4
✅ Video läuft wieder normal
✅ Playlist-Loop abgeschlossen, starte von vorne

Warnungen:

⚠️ Video scheint stecken geblieben zu sein
⚠️ Hohe Speicherauslastung (85%)
⚠️ Video stalled (buffering)
⚠️ Überspringe zum nächsten Video

Fehler:

❌ Video start timeout (10s überschritten)
❌ Video definitiv stuck - starte nächstes
❌ Video Error: MEDIA_ERR_NETWORK
❌ Kritischer Zustand erkannt

Log-Analyse:

Beispiel 1: Memory-Problem

[INFO] Memory Status: 420MB / 512MB (82%)
[WARNING] Hohe Speicherauslastung
→ Action: Beobachten, evtl. Videos optimieren

Beispiel 2: Stuck Video

[WARNING] Video scheint stecken geblieben (2x)
[ERROR] Video definitiv stuck - starte nächstes
[WARNING] Überspringe zum nächsten Video: watchdog_stuck
→ Action: Watchdog hat Recovery durchgeführt ✓

Beispiel 3: Netzwerkprobleme

[ERROR] Video Error: MEDIA_ERR_NETWORK
[WARNING] Überspringe zum nächsten Video: error_MEDIA_ERR_NETWORK
[INFO] Video started: video2.mp4
→ Action: Netzwerk kurz unterbrochen, automatisch recovered ✓

🎯 Best Practices für Videos

1. Video-Format

  • Container: MP4 (H.264 + AAC)
  • Codec: H.264 (High Profile, Level 4.0)
  • Audio: AAC, 128-256 kbps
  • Auflösung: Max 1920x1080 (Full HD)
  • Framerate: 25 oder 30 fps
  • Bitrate: 5-10 Mbps (nicht höher!)

2. Video-Länge

  • Optimal: 15-60 Sekunden
  • Maximum: 2-3 Minuten
  • Warum: Kürzere Videos = weniger Memory-Verbrauch

3. Dateigrößen

  • Optimal: 10-50 MB pro Video
  • Maximum: 200 MB pro Video
  • Warum: Schnelleres Laden, weniger Buffering

4. Playlist-Größe

  • Optimal: 5-10 Videos
  • Maximum: 20 Videos
  • Warum: Übersichtlich, nicht zu viel Content im Loop

5. Video-Optimierung

Nutze Tools wie:

  • FFmpeg für Re-Encoding
  • HandBrake für Kompression
  • Adobe Media Encoder für Profis

FFmpeg Beispiel:

ffmpeg -i input.mp4 \
  -c:v libx264 -preset slow -crf 23 \
  -c:a aac -b:a 128k \
  -vf scale=1920:1080 \
  -movflags +faststart \
  output.mp4

🔍 Troubleshooting

Problem: Videos werden nach einiger Zeit schwarz

Mögliche Ursachen:

  1. Memory-Leak → Check Memory-Logs
  2. Video zu groß → Komprimieren
  3. Netzwerkprobleme → Check Network-Logs
  4. Browser-Cache voll → Wird jetzt automatisch gecleart

Lösung:

  • ✅ Implementiert: Automatischer Cleanup
  • ✅ Implementiert: Watchdog erkennt Problem
  • ✅ Implementiert: Automatischer Skip/Recovery
  • ✅ Implementiert: Präventiver Reload nach 6h

Problem: Video startet nicht

Check in Logs:

[ERROR] Video start timeout
[ERROR] Video play failed: MEDIA_ERR_SRC_NOT_SUPPORTED

Lösung:

  1. Video-Format prüfen (MP4 H.264?)
  2. Video-Pfad prüfen (erreichbar?)
  3. Video neu encodieren
  4. Watchdog springt automatisch zum nächsten

Problem: Video buffert ständig

Check in Logs:

[WARNING] Video stalled (buffering)
[WARNING] Video waiting (buffering)

Lösung:

  1. Netzwerkverbindung prüfen
  2. Video-Bitrate reduzieren
  3. Preload auf 'metadata' (bereits implementiert)
  4. Video komprimieren

Problem: Hohe Speicherauslastung

Check in Logs:

[WARNING] Hohe Speicherauslastung (85%)

Lösung:

  1. Videos komprimieren
  2. Playlist verkleinern
  3. Präventiver Reload (bereits aktiv nach 6h)
  4. Browser-Cache leeren (manuell)

📈 Performance-Metriken

Empfohlene Werte:

  • Memory Usage: < 70% des Heap-Limits
  • Video Start Time: < 2 Sekunden
  • Buffering Events: < 1 pro Stunde
  • Consecutive Errors: 0
  • Watchdog Interventions: < 1 pro Tag

Critical Werte (Action required):

  • Memory Usage: > 85%
  • Video Start Time: > 10 Sekunden (Timeout!)
  • Buffering Events: > 5 pro Stunde
  • Consecutive Errors: ≥ 3
  • Watchdog Interventions: > 10 pro Tag

🚀 Testing

1. Test im Browser

1. Öffne https://cabinet.b2in.eu
2. Öffne Developer Tools (F12)
3. Console Tab öffnen
4. Logs beobachten:
   - "Video cleanup durchgeführt"
   - "Video started: ..."
   - Memory-Status nach 30s

2. Stress-Test

1. Lass Display 24h laufen
2. Check Logs auf Probleme
3. Memory-Status nach 24h prüfen
4. Watchdog-Interventionen zählen

3. Network-Test

1. Simuliere schlechte Verbindung (DevTools → Network → Throttling)
2. Beobachte Error-Recovery
3. Check ob automatischer Skip funktioniert

4. Memory-Test

1. Lass Display 6h laufen
2. Check Memory-Logs alle 10 Min
3. Sollte < 70% bleiben
4. Nach 6h: automatischer Reload

📋 Changelog

Version 1.3 (2026-01-19)

  • ✅ Video-Cleanup vor jedem neuen Video
  • ✅ Video Watchdog (5s Interval)
  • ✅ Start-Timeout (10s)
  • ✅ Error Recovery mit Consecutive Error Tracking
  • ✅ Memory-Monitoring (alle 10 Min)
  • ✅ Präventiver Reload (alle 6h)
  • ✅ Critical Error Check (alle 30s)
  • ✅ CSS Performance-Optimierungen
  • ✅ Erweiterte Video-Events (playing, canplay, waiting)
  • ✅ Detaillierte Error-Codes mit Logging

Status: ✅ Ready for Production
Tested on: Chrome 120+ / Android 11+
Last Update: 2026-01-19