Technische Dokumentation

Diese Dokumentation beschreibt die technische Architektur, Installation und Konfiguration der 24h-Multiviewer-Anwendung.

Die Anwendung dient der flexiblen und dynamischen Anzeige von mehreren Video-Streams und -Quellen gleichzeitig. Sie besteht aus drei Hauptkomponenten:

  • Admin-Konsole: Eine passwortgeschützte Weboberfläche zur Steuerung aller Inhalte und Layouts in Echtzeit.
  • Vorschau-Ansicht (Preview): Zeigt die aktuell in der Admin-Konsole gewählte, aber noch nicht live geschaltete Konfiguration.
  • Programm-Ansicht (Program): Die öffentliche Ansicht, die dem Publikum gezeigt wird.

1. Installation & Voraussetzungen

Voraussetzungen

  • Ein PHP-fähiger Webserver (PHP 7.4+ empfohlen).
  • Schreibrechte für den Webserver-Prozess auf die Konfigurationsdateien (config.json, program.json) und das /playlists-Verzeichnis.

Manuelle Installationsschritte

  1. Entpacken Sie das Anwendungs-Paket.
  2. Laden Sie den gesamten Inhalt in das gewünschte Verzeichnis auf Ihrem Webserver hoch.
  3. Wichtig: Öffnen Sie die Datei admin.php in einem Texteditor.
  4. Suchen Sie die Zeile define('ADMIN_PASSWORD', 'IhrAdminPasswortHier'); am Anfang der Datei und ersetzen Sie 'IhrAdminPasswortHier' durch Ihr eigenes, sicheres Passwort.
  5. Stellen Sie sicher, dass der Server die benötigten Schreibrechte hat (siehe oben).
  6. Rufen Sie die admin.php in Ihrem Browser auf und loggen Sie sich mit Ihrem eben festgelegten Passwort ein.

2. Dateistruktur der Anwendung

Eine Standard-Installation der Anwendung hat die folgende Struktur:

/
├── admin.php                // Passwortgeschützte Steuerkonsole
├── admin_script.js          // JavaScript für die Admin-Konsole
├── ...                      // Weitere CSS-, JS- und PHP-Dateien
├── config.json              // "Vorschau"-Konfiguration
├── program.json             // "Live"-Konfiguration
├── preview.php              // Vorschau-Ansicht
├── program.php              // Programm-Ansicht
└── playlists/               // Verzeichnis für JSON-Playlists

3. Konfiguration via config.json

Die gesamte Steuerung der Vorschau-Ansicht erfolgt über die Datei config.json, die durch die Admin-Konsole modifiziert wird. Die Struktur ist in der Datei selbst dokumentiert.

4. Integration in OBS Studio

Die Ausgabe des Multiviewers (die Programm-Ansicht) kann als "Browser"-Quelle direkt in Broadcasting-Software wie OBS Studio eingebunden werden. Dies ermöglicht es Ihnen, das dynamische Layout als Teil Ihres Live-Streams zu verwenden.

Anleitung zum Einbinden

  1. Öffnen Sie OBS Studio und wählen Sie die Szene aus, zu der Sie den Multiviewer hinzufügen möchten.
  2. Klicken Sie im "Quellen"-Dock auf das +-Symbol.
  3. Wählen Sie "Browser" aus der Liste aus.
  4. Geben Sie der Quelle einen Namen (z.B. "Multiviewer Programm") und klicken Sie auf "OK".
  5. Es öffnet sich das Eigenschaften-Fenster. Geben Sie hier die folgenden Daten ein:
    • URL: Die vollständige, öffentliche URL zu Ihrer Programm-Datei.
      • Bei einer Standard-Installation: http://ihre-domain.de/pfad/program.php
      • Bei einer via Manager erstellten "SaaS"-Instanz: http://ihre-domain.de/instanz-name/program_zufallsname.php
    • Breite: Die Auflösung Ihres Streams, z.B. 1920.
    • Höhe: Die Auflösung Ihres Streams, z.B. 1080.
  6. Klicken Sie auf "OK", um die Quelle hinzuzufügen. Sie sollte nun in Ihrer Szene erscheinen.

Wichtiger Hinweis für YouTube-Quellen

OBS-Browser-Quellen haben oft Schwierigkeiten mit der automatischen Anmeldung bei Google/YouTube. Um sicherzustellen, dass YouTube-Quellen im Multiviewer korrekt angezeigt werden, ist ein einmaliger Workaround nötig:

  1. Fügen Sie die Browser-Quelle wie oben beschrieben hinzu, aber geben Sie als URL zunächst https://www.youtube.com ein.
  2. Klicken Sie mit der rechten Maustaste auf die neu erstellte Quelle in OBS und wählen Sie "Interagieren".
  3. Es öffnet sich ein neues Fenster, in dem Sie die YouTube-Seite sehen. Melden Sie sich hier mit einem beliebigen Google/YouTube-Account an und akzeptieren Sie alle Cookie-Banner. Schließen Sie das Interaktionsfenster.
  4. Öffnen Sie nun erneut die Eigenschaften der Browser-Quelle und ersetzen Sie die YouTube-URL durch die eigentliche URL Ihrer program.php.

Durch diesen Vorgang wird ein gültiges Login-Cookie im OBS-Browser gespeichert, sodass Ihre YouTube-Quellen im Multiviewer ohne Probleme geladen werden können.

5. API-Endpunkte

Die Kommunikation zwischen Frontend und Backend erfolgt über spezialisierte PHP-Skripte im /api/-Verzeichnis. Eine detaillierte Auflistung finden Sie in der admin.php und den zugehörigen JavaScript-Dateien.

6. Frontend-Logik

Die Viewer-Seiten (preview_viewer.js, program_viewer.js) nutzen einen Polling-Mechanismus, um Konfigurationsänderungen in Echtzeit und ohne Neuladen der Seite darzustellen.

7. Fehlerbehebung

Error 500 nach Änderungen an PHP-Dateien

Ein 500-Fehler deutet meist auf einen fatalen PHP-Syntaxfehler hin. Überprüfen Sie die zuletzt geänderte Datei. Ein häufiger Grund ist die Verwendung von PHP-Funktionen, die auf Ihrem Server nicht verfügbar sind (z.B. wegen einer zu alten PHP-Version).

Änderungen werden nicht live angezeigt

Haben Sie den "ON AIR"-Button in der Admin-Konsole gedrückt? Leeren Sie bei Anzeigeproblemen auch den Browser-Cache.