b2in/public/_cabinet/VIDEO_OPTIMIZATION_README.md

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: 100 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