Direkt zum Hauptinhalt

Empfohlene Settings

Die folgenden Einstellungen sind die, mit denen Chatlix getestet ist. Abweichungen funktionieren oft, sind aber häufige Fehlerquellen. Grundlagen zur URL selbst stehen in Browser Source Grundlagen, die OBS-Bedienschritte in OBS Integration → Overlay in OBS einfügen.

Auflösung und FPS

SettingWertWarum
Width1920Alle Overlays im Builder und Pro Editor werden mit 1920×1080 als Referenz-Canvas gebaut. Pixel-genaue Positionierung im Editor geht davon aus.
Height1080Wie oben.
FPS60Animationen (Alerts, Hype-Train, Konfetti) sind auf 60 fps animiert.
Custom CSSleerOverlay bringt eigene Styles mit.

Wenn du in 1440p oder 4K streamst: OBS skaliert die Browser-Quelle automatisch auf die Canvas-Auflösung deines Streams. Nicht Width/Height auf 2560×1440 oder 3840×2160 setzen - das lädt das Overlay in höherer Auflösung, ohne dass du etwas davon hast (Texte werden nicht schärfer, Layout bleibt gleich), kostet aber zusätzliche GPU/CPU-Last für nichts. Die einzige Ausnahme: dein Overlay-Layout selbst wurde im Editor auf eine andere Canvas-Größe gebaut (das siehst du oben links im Editor) - dann Width/Height an diese Größe anpassen, nicht an deine Stream-Auflösung.

OBS-Standardwert ist die Falle

Wenn du eine neue Browser-Quelle anlegst, setzt OBS standardmäßig 800×600 und 30 fps. Wer diesen Dialog schnell wegklickt, bekommt ein winziges, ruckeliges Overlay. Das ist mit Abstand die häufigste "mein Overlay sieht komisch aus"-Ursache, die im Support ankommt. Zum gezielten Prüfen: häng &debug=1 an die Browser-Source-URL. Es erscheint ein Banner mit canvas (Soll-Auflösung des Layouts), viewport (was OBS tatsächlich liefert) und scale. Steht dort z. B. canvas=1920x1080 viewport=800x600 scale=0.417, ist genau das der Bug - Width/Height in den Browser-Source-Eigenschaften korrigieren, Banner verschwindet nach 30 s von selbst wieder.

Wichtige Haken

OptionEmpfehlung
Local fileaus
Shutdown source when not visibleaus
Refresh browser when scene becomes activeoptional, siehe unten
Control audio via OBSan, falls du Alert-Sounds über OBS mischen willst

Shutdown source when not visible

Wenn das aktiv ist, killt OBS die Browser-Source beim Szenen-Wechsel und startet sie neu, wenn die Szene wieder aktiv wird. Das spart Ressourcen, hat aber zwei Nachteile:

  • Alerts, die während der Inaktivität reinkamen, sind verloren - Chatlix puffert Events nicht rückwirkend für eine Browser-Source, die gar nicht existierte.
  • Hype-Train, Goals, Counter starten von 0, bis die WebSocket-Verbindung wieder steht und den Zustand re-hydriert (üblicherweise 1-2 s, danach zieht der Server den aktuellen Stand aus dem Redis-Cache nach).

Für Streams mit häufigem Szenen-Wechsel: aus.

Refresh browser when scene becomes active

Nur sinnvoll, wenn du gezielt einen Reset pro Szene möchtest (z. B. eine "Starting Soon"-Szene mit einem Countdown, der jedes Mal neu beginnen soll). Im Normalbetrieb aus lassen.

Audio

Alert-Sounds spielt das Overlay selbst ab. Damit OBS sie über das Stream-Audio mischt:

  1. Control audio via OBS aktivieren.
  2. Im Audio-Mixer rechts erscheint die Browser-Source.
  3. Lautstärke auf -6 dB bis -3 dB ist ein guter Startpunkt.

Falls du Alerts nur lokal hören willst (z. B. weil dein Monitor lauter sein soll als der Stream): Control audio via OBS aus, das Overlay spielt über den System-Output.

Hardware-Beschleunigung

In OBS unter Datei → Einstellungen → Erweitert → Browser-Quelle Hardware-Beschleunigung. Standard: an. Wenn du Flackern siehst, siehe BrowserSource flackert.

Mehrere Monitore / Multi-PC-Setups

Wenn du ein Two-PC-Setup hast (Gaming-PC + Streaming-PC mit Capture-Card): die Browser-Source läuft auf dem Streaming-PC, denn dort läuft OBS. Der Gaming-PC weiß nichts vom Overlay. Praktisch: das Overlay ist von der Game-Performance entkoppelt. Wenn du das Overlay parallel auf dem Gaming-PC "sehen" willst (z. B. um Alerts visuell zu prüfen ohne aufs Streaming-Bild zu schauen), öffne die Browser-Source-URL einfach in einem Tab auf dem Gaming-PC - das ist nur ein zusätzlicher WebSocket-Client, kostet das Overlay-Backend nichts Nennenswertes.

Was nicht reinstellen

  • User-Agent: leer lassen. Chatlix prüft nicht den User-Agent.
  • Page permissions (Mikrofon, Kamera, Geolocation): aus. Das Overlay braucht nichts davon - Cam-Widgets laufen über eine serverseitig signierte LiveKit-Subscribe-URL, nicht über den Browser-Kamerazugriff.
  • CORS-Workarounds: nicht nötig. Die Overlay-Seite lädt ihre Daten serverseitig vor und liefert sie inline mit aus - es gibt keinen Cross-Origin-Request, den du erlauben müsstest. Wenn du irgendwo liest, man müsse CORS-Header oder einen Proxy einrichten, ist das für Chatlix-Overlays schlicht falsch.

Weiterführend