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:
  ```javascript
  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:
```javascript
- 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:
```json
{
  "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)
```javascript
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
```css
#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:
```bash
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