Direkt zum Hauptinhalt

Browser Source Grundlagen

Ein Chatlix-Overlay wird in OBS (oder Streamlabs, vMix, XSplit) als Browser-Quelle eingebunden. Die Quelle lädt eine URL, die das Overlay im Browser-Kontext rendert. Alles Visuelle - Alerts, Chat-Box, Counter, Cam-Frames - läuft in dieser einen Browser-Source. Für die grundsätzlichen OBS-Schritte (Quelle anlegen, Szene wählen) siehe auch Overlay in OBS einfügen im Book "OBS Integration". Diese Seite hier ist der Deep-Dive: URL-Format, Token-Mechanik, Sonderfälle.

Die URL

Jedes Overlay hat eine Render-URL nach diesem Muster:

https://chatlix.app/overlay/view.php?id=<overlay-id>&token=<overlay-token>

Wichtig, weil das oft übersehen wird: die URL braucht beide Parameter, id und token. Fehlt einer der beiden, bleibt die Browser-Source leer/schwarz - es gibt keinen Fallback auf "irgendein Overlay des Accounts". Der Token selbst ist ein 64-stelliger Hex-String (nur 0-9a-f). Wenn deine URL kürzer ist oder Sonderzeichen enthält, ist beim Kopieren etwas abgeschnitten worden - kopier sie neu aus dem Editor statt von Hand zu tippen.

Den kompletten Link findest du im Pro Editor über den Toolbar-Button 🔗 OBS-URL (öffnet ein Modal mit der fertigen URL zum Kopieren). Er ist overlay-spezifisch: Wer die URL kennt, kann das Overlay rendern - also nicht im Stream einblenden, nicht in Discord posten, nicht in den Quelltext schauen lassen. Chatlix setzt beim Ausliefern der Overlay-Seite bewusst Cache-Control: no-store und Referrer-Policy: no-referrer, damit die URL nicht versehentlich über einen HTTP-Referrer an Drittseiten durchsickert - das ersetzt aber keine eigene Vorsicht beim Teilen von Screenshots.

Ein einzelnes Widget als eigene Browser-Source

Meistens packst du alle Widgets in ein Overlay und damit in eine Browser-Source (siehe Abschnitt weiter unten, warum das Performance-technisch besser ist). Es gibt aber einen Sonderfall: Chatlix kann auch ein einzelnes Element aus einem Overlay als eigenständige URL ausliefern, z. B. wenn du einen Timer oder ein Leaderboard in einer anderen Szene brauchst als den Rest:

https://chatlix.app/overlay/element?id=<overlay-id>&el=<element-id>&token=<overlay-token>

Für diese Single-Element-URL gibt es aktuell kein Kontextmenü oder sonstigen UI-Weg im Pro Editor - du musst sie manuell bauen: nimm die normale Overlay-URL und ergänze &el=<element-id> (Element-ID z. B. aus dem Properties-Panel/Debug-Log ablesen). Das Element wird dabei serverseitig auf seine eigenen Bounds zugeschnitten (Canvas = Element-Größe, Position 0/0) - du musst also nicht händisch croppen. Nutze das gezielt, nicht als Standard-Workflow: jede zusätzliche Single-Element-Quelle ist wieder ein eigener Chromium-Prozess, siehe Performance-Tipps.

Quelle in OBS hinzufügen

  1. In der Quellen-Liste + klicken, Browser wählen.
  2. Name vergeben (z. B. Chatlix Main Overlay).
  3. URL aus dem Dashboard kopieren und einfügen - komplett, inklusive id= und token=.
  4. Breite: 1920, Höhe: 1080 (Details und Warum siehe Empfohlene Settings).
  5. FPS: 60 (oder so hoch wie dein Stream läuft).
  6. Haken bei Local file muss aus sein.
  7. Custom CSS leer lassen (das macht das Overlay selbst).

Nach OK siehst du das Overlay im Vorschau-Fenster. Falls schwarz oder leer, in dieser Reihenfolge prüfen:

  1. URL vollständig? Beide Parameter id und token müssen in der Adresszeile stehen. Ein häufiger Fehler: nur der Token wurde kopiert, das id= fehlt komplett - dann bleibt die Quelle leer, ohne sichtbare Fehlermeldung im OBS-Vorschaufenster.
  2. Token noch gültig? Wurde er rotiert (siehe unten) oder ist er abgelaufen (Overlays können ein Ablaufdatum haben), liefert der Server intern 403/401 und die Seite bleibt leer.
  3. Local file Haken wirklich aus? Mit dem Haken interpretiert OBS die URL als Pfad auf der Festplatte.
  4. Refresh cache of current page über das Quellen-Kontextmenü - harter Reload, sicher und meistens der schnellste Fix.

Zum gezielten Debuggen von Layout-Problemen (nicht nur "schwarz", sondern "sieht verzerrt/verschoben aus") gibt es einen eingebauten Diagnose-Modus: häng &debug=1 an die Browser-Source-URL an. Oben links erscheint ein Banner mit drei Werten - canvas (die Auflösung, für die das Overlay gebaut ist, meist 1920×1080), viewport (was OBS dem Browser tatsächlich an Pixeln gibt) und scale (das Verhältnis der beiden). Stimmen canvas und viewport nicht überein - typischerweise weil die Browser-Quelle noch auf dem OBS-Standard von 800×600 steht - siehst du das sofort als scale ≠ 1.000. Das Banner blendet sich nach 30 Sekunden von selbst aus, du musst es also nicht manuell entfernen. Wichtig: das ist kein FPS-Zähler, sondern reine Canvas/Viewport/Scale-Diagnose - für Performance-Fragen siehe Performance-Tipps.

Wie viele Browser-Quellen brauche ich?

In den meisten Fällen eine pro Szene reicht. Du kannst dasselbe Overlay in mehreren Szenen verwenden - jede Szene bekommt eine eigene Browser-Quelle, beide zeigen dieselbe URL. Wenn du mehrere Widgets parallel brauchst (z. B. Cam-Frame oben + Alerts unten), bau das als eine Overlay-Szene im Pro Editor oder Builder, nicht als zwei Browser-Quellen. Mehrere Quellen = mehrere Browser-Prozesse = mehr CPU. Die Ausnahme ist die Single-Element-URL von oben, wenn du bewusst ein Widget technisch getrennt haben willst. Mehr zum Unterschied zwischen den beiden Editoren: Overlay Pro Editor vs Builder in Book "Overlay Builder".

Aktualisieren ohne Stream-Reload

Wenn du im Editor etwas änderst, sieht die Browser-Quelle die Änderung in den meisten Fällen automatisch - das läuft über eine echte WebSocket-Verbindung (wss://ws.chatlix.app), kein Polling. Falls die Änderung nicht ankommt: Rechtsklick auf die Quelle in OBS → Refresh cache of current page. Das ist ein harter Reload und sicher. Typische Ursache für "kommt nicht automatisch an": die Netzwerkverbindung des Streaming-PCs hat den WebSocket kurz getrennt (z. B. VPN, Firewall-Reconnect) - ein manueller Refresh holt den aktuellen Stand garantiert.

Token rotieren

Im Pro Editor über den Toolbar-Button 🔗 OBS-URL - im selben Modal, das auch die URL zeigt, gibt es den Button ↻ Token rotieren (keine separate „Sicherheit"-Sektion). Achtung: Die alte URL wird sofort ungültig (Server antwortet mit 401/403). Du musst die neue URL nach jedem Rotate in OBS einfügen, sonst bleibt die Browser-Quelle leer.

Wann rotieren?

  • Token wurde im Stream eingeblendet (z. B. weil du den OBS-Eigenschaften-Dialog versehentlich offen hattest).
  • Token wurde in einem Discord-Screenshot, Reddit-Post oder Tweet sichtbar.
  • Co-Streamer / Editor ist nicht mehr im Team und hatte Zugriff.
  • Verdacht ohne konkreten Beweis: lieber einmal zu viel rotieren als einmal zu wenig.

Nach dem Rotate funktioniert die alte URL nie wieder - auch nicht über einen "Rollback". Das ist Absicht, die Rotation wird zusätzlich mit Zeitstempel geloggt.

Was wenn OBS abstürzt?

Falls OBS während dem Stream die Browser-Quelle verliert (typisch nach Crash + Auto-Recovery): einmal Refresh cache of current page reicht meistens. Wenn die Quelle dauerhaft leer bleibt: Quelle löschen und neu hinzufügen, das ist der saubere Reset. Danach unbedingt Breite/Höhe/FPS nochmal gegenprüfen (siehe Empfohlene Settings) - beim Neuanlegen greifen OBS-Defaults (800×600, 30 fps), nicht deine vorherige Konfiguration.

Weiterführend