# Browser Source Grundlagen

# 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.

## Die URL

Jedes Overlay hat eine Render-URL nach diesem Muster:

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

Den Token findest du im Overlay-Editor unter `« Browser-Source-URL »`. Er ist **overlay-spezifisch**: Wer den Token kennt, kann das Overlay rendern - also nicht im Stream einblenden, nicht in Discord posten, nicht in den Quelltext schauen lassen.

## 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.
4. Breite: **1920**, Höhe: **1080**.
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: Token prüfen, dann `Refresh cache of current page` über das Quellen-Kontextmenü.

## 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 Overlays parallel brauchst (z. B. Cam-Frame oben + Alerts unten), bau das als **eine** Overlay-Szene im Pro Editor, nicht als zwei Browser-Quellen. Mehrere Quellen = mehrere Browser-Prozesse = mehr CPU.

## Aktualisieren ohne Stream-Reload

Wenn du im Editor etwas änderst, sieht die Browser-Quelle die Änderung in den meisten Fällen automatisch (WebSocket-Push). Falls nicht: Rechtsklick auf die Quelle in OBS → `Refresh cache of current page`. Das ist ein harter Reload und sicher.

## Token rotieren

Im Editor unter `« Sicherheit »` → `« Token erneuern »`. Achtung: Die alte URL wird sofort mit HTTP 401 abgelehnt. 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.

## 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.