23-01-2026
This commit is contained in:
parent
07959c0ba2
commit
854ce02bf6
166 changed files with 32909 additions and 1262 deletions
368
public/_cabinet/VIDEO_OPTIMIZATION_README.md
Normal file
368
public/_cabinet/VIDEO_OPTIMIZATION_README.md
Normal file
|
|
@ -0,0 +1,368 @@
|
|||
# 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
|
||||
Loading…
Add table
Add a link
Reference in a new issue