Overlay in OBS einfuegen

Dieses Kapitel fuehrt dich durch das saubere Einbinden eines Chatlix-Overlays als Browser-Source in OBS. Dieser Weg braucht keine Chatlix Connect und kein OBS-WebSocket — Steuerung von Szenen/Quellen aus Chatlix heraus ist ein separates Thema, siehe OBS mit Chatlix verbinden.

Schritt 1: Overlay im Dashboard vorbereiten

1. Dashboard, Overlays (Uebersicht/Bibliothek, Seiten bzw. ).
2. Overlay auswaehlen oder ueber den Overlay-Builder neu anlegen.
3. Pruefen, dass das Overlay aktiv/veroeffentlicht ist.
4. Render-URL kopieren, Format: https://chatlix.app/overlay/view.php?token=....

Der Token in der URL identifiziert das Overlay eindeutig. Er gehoert nicht in oeffentliche Kanaele — jeder mit dem Link sieht dein Overlay live inklusive aller kommenden Alerts.

Schritt 2: Browser-Source in OBS anlegen

1. In OBS die Zielszene oeffnen.
2. Plus unter Quellen, „Browser" auswaehlen (aeltere OBS-Versionen: „Browser-Quelle").
3. Namen vergeben, z. B. „Chatlix Overlay – Main".
4. URL aus dem Dashboard einsetzen.
5. Breite und Hoehe auf Canvas-Aufloesung setzen (1920x1080 fuer 1080p).
6. Haken bei „Quelle beim Anzeigen aktualisieren" je nach Praeferenz setzen.
7. OK.

Die Quelle erscheint und sollte direkt das Overlay rendern. Chatlix' OBS-Doctor (Dashboard, Route /obs-doctor) erkennt eine vorhandene Browser-Source automatisch am Quelltyp browser_source im OBS-Snapshot und prueft zusaetzlich, ob die eingetragene URL zu deinem Chatlix-Overlay passt und ob die Quelle in der aktuellen Szene sichtbar ist — nutze den Doctor, wenn du unsicher bist, ob alles richtig verdrahtet ist. Dafuer muss allerdings Chatlix Connect installiert und online sein; ohne Connect kann der Doctor die Browser-Source in OBS nicht sehen und viele Checks bleiben auf „unknown".

Schritt 3: Positionieren

Die Browser-Source ist erstmal so gross wie deine Canvas. Bei vollflaechigen Overlays passt das. Falls dein Overlay nur einen Teil belegt:

• In OBS die Quelle markieren, mit gedrueckter Alt-Taste die Kanten croppen.
• Oder die Render-Aufloesung im Overlay-Editor reduzieren und entsprechend ausrichten.
• Wenn Chatlix Connect aktiv ist, kannst du Position und Skalierung einzelner OBS-Quellen (nicht des Overlay-Inhalts selbst) auch aus Chatlix heraus setzen — Aktion obs_set_scene_item_transform, aktuell nur Position X/Y und Skalierung, kein Crop/Rotation/Filter. Das ist aktuell nur ueber das Producer-Pult verfuegbar (kein eigener Automation-Aktionstyp dafuer), nicht fuer die Feineinstellung beim Ersteinrichten.

Schritt 4: Aktualisieren

Wenn du im Dashboard etwas am Overlay aenderst, greift das in der Regel sofort, weil das Overlay per WebSocket live nachlaedt. Falls nicht:

1. Browser-Source markieren.
2. Rechtsklick, « Eigenschaften ».
3. « Cache aktualisieren ».
4. OK.

Alternativ Rechtsklick, dann « Browser-Quelle aktualisieren » — das laedt die Seite komplett neu, ohne den Eigenschaften-Dialog zu oeffnen.

Haeufigster Grund fuer „Overlay zeigt nichts an": Der Overlay-WebSocket hat keine Verbindung. Im OBS-Doctor gibt es dafuer einen eigenen Check „Overlay-WS verbunden" — steht der auf Fehler, hilft ein Cache-Refresh der Browser-Source oft schon.

Mehrere Overlays in einer Szene

Du kannst mehrere Browser-Sources mit verschiedenen Tokens in derselben Szene fuehren, etwa eines fuer Alerts und eines fuer ein Mini-Display. Achte auf die Z-Reihenfolge in OBS, das oberste deckt darunterliegende ab.

Eine Browser-Source pro Szene oder geteilt?

Beide Wege gehen.

Variante	Vorteil	Nachteil
Eine pro Szene	Speicher pro Szene sauber, kein Cross-Reset	Mehr Render-Last bei vielen Szenen
Geteilt (Quelle in mehreren Szenen)	Weniger Last, ein Reload reicht	Aenderungen in Eigenschaften betreffen alle Szenen

Fuer kleine Setups ist „eine pro Szene" einfacher.

Performance

• Hardware-Beschleunigung der Browser-Source aktiv lassen.
• Wenn ein Rechner schwach ist: Overlay-Animationen reduzieren oder Render-Aufloesung im Overlay-Editor senken.
• Nicht aktiv genutzte Browser-Sources in inaktiven Szenen kosten Ressourcen, wenn „Quelle nicht herunterfahren, wenn nicht sichtbar" aktiv ist.

Sicherheit

Den Token im URL nicht ueber Discord, Tweets oder Stream-Capture teilen. Wenn du befuerchtest, der Token sei oeffentlich geworden: im Dashboard das Overlay neu generieren, die alte URL wird ungueltig und muss in OBS neu eingetragen werden.

Troubleshooting

Symptom	Ursache	Loesung
Browser-Source bleibt weiss/leer	URL falsch/abgelaufen, oder Overlay-Token neu generiert	URL im Dashboard neu kopieren und in OBS eintragen
Overlay zeigt Alerts nicht live	Overlay-WebSocket getrennt	Browser-Source-Cache aktualisieren; im OBS-Doctor „Overlay-WS verbunden" pruefen
OBS-Doctor zeigt „Browser-Source nicht gefunden"	Connect nicht online oder Quelle in falscher Szene	Connect-Status pruefen, Quelle in die aktuell aktive Szene legen
Overlay ruckelt/laggt	Zu viele Animationen, schwache Hardware	Hardware-Beschleunigung an, Animationen im Overlay-Editor reduzieren

Test

1. Im Dashboard « Test-Alert » ausloesen.
2. In OBS pruefen, ob der Alert sichtbar wird.
3. Falls nicht: Browser-Source-Cache aktualisieren und nochmal, danach im OBS-Doctor nachsehen.

Klappt der Test, ist die Browser-Source-Einbindung sauber. Fuer Audio aus dem Overlay geht es weiter mit Audio-Quellen.