OBS-Browserquelle: Live-Effekte ohne Plugins

Eine Browserquelle ist ein OBS-Quellentyp, der eine Webseite direkt in deine Szene rendert. Sie ist die flexibelste Effektebene, die OBS zu bieten hat: Eine Seite kann hardwarebeschleunigtes WebGL mit 60 Bildern pro Sekunde zeichnen, echte Transparenz tragen, auf Audio reagieren — und sie braucht kein einziges OBS-Plugin. Von der Chatbox über Alerts bis zum animierten Overlay läuft alles auf Browserquellen.

So funktionieren Browserquellen

OBS bettet einen Chromium-Browser (CEF) ein und setzt alles, was die Seite rendert, in deine Szene. Du fügst eine Browserquelle über + → Browser hinzu und richtest sie entweder auf eine URL oder — mit gesetztem Haken bei Lokale Datei — auf eine HTML-Datei auf deiner Festplatte. Für Overlays sind lokale Dateien die bessere Wahl: Sie laden sofort, funktionieren offline und hängen von keinem fremden Server ab, der ausfallen könnte.

Zwei Einstellungen entscheiden über das Ergebnis:

• Breite und Höhe — setze sie auf deine Canvas-Grösse, üblicherweise 1920 × 1080, damit die Seite in genau der Auflösung rendert, in der du streamst.
• Lokale Datei — ankreuzen, sobald du eine Datei von der Festplatte lädst; die Dateiauswahl ersetzt dann das URL-Feld.

Warum Browserquellen besser sind als Videoschleifen

Eine Videoschleife ist eine feste Aufnahme. Sie zeigt einen sichtbaren Ansatz, wenn sie von vorn beginnt, wird beim Vergrössern unscharf und kann auf nichts reagieren, was in deinem Stream gerade passiert. Eine Browserquelle rechnet stattdessen live:

• Kein Schleifenansatz — die Bewegung wird Bild für Bild berechnet, nicht abgespielt.
• Scharf in jeder Auflösung — Vektor- und Shader-Grafik skaliert verlustfrei.
• Reaktionsfähig — eine Seite kann auf ein Audiogerät hören und sich zu deiner Stimme oder deiner Musik bewegen.
• Winzige Dateien — ein Overlay besteht aus ein paar Kilobyte Code statt aus Hunderten Megabyte Video.

Transparenz

Browserquellen beherrschen Alpha: Was die Seite transparent lässt, setzt OBS über dein Spielgeschehen. Dafür muss die Seite mitspielen und darf keinen eigenen Hintergrund zeichnen. Wer seine Seiten von Hand baut, hat dieses CSS-Detail selbst in der Verantwortung. Overlay-Dateien aus Reactor Studio bringen den transparenten Hintergrund von sich aus mit — auch die Ränder bleiben durchsichtig, wenn die Grösse der Quelle nicht zum Seitenverhältnis deiner Szene passt.

Eigene Effekte bauen — ohne Code zu schreiben

WebGL für ein Overlay von Hand zu schreiben, ist Spezialistenarbeit. Reactor Studio erzeugt es stattdessen: Du lädst dein Bildmaterial im Browser, markierst Zonen auf den Teilen, die reagieren sollen, beschreibst den gewünschten Effekt in normaler Sprache, und eine KI schreibt den GLSL-Shader dazu. Für das Ergebnis lassen sich anschliessend Regler erzeugen, mit denen du es im Betrieb justierst. Am Ende steht eine einzelne, in sich geschlossene HTML-Datei, eigens für OBS gebaut: keine sichtbaren Bedienelemente, transparenter Hintergrund, startet von selbst.

Ab da folgt der gewohnte Ablauf — Browserquelle hinzufügen, Lokale Datei ankreuzen, den Export auswählen, 1920 × 1080 einstellen. Die ausführliche Schritt-für-Schritt-Fassung samt Audioeingang und virtuellem Audiokabel findest du in OBS-Overlay, das auf Musik reagiert, den Weg speziell für den Spektrum-Visualizer in Audio-Visualizer in OBS einrichten.

Häufige Fragen

Meine Browserquelle zeigt nichts — was soll ich prüfen?

Die üblichen Ursachen: «Lokale Datei» ist nicht angekreuzt, obwohl du eine Datei von der Festplatte lädst; Breite und Höhe sind nicht ausdrücklich gesetzt (zum Beispiel 1920 × 1080); oder die Quelle liegt im Szenen-Stapel zu weit unten.

Wie bekomme ich einen transparenten Hintergrund?

Die Seite selbst darf keinen Hintergrund zeichnen — OBS setzt sie dann automatisch über deine Szene. Overlay-Dateien, die aus Reactor Studio exportiert werden, bringen den transparenten Hintergrund bereits mit.

Belasten Browserquellen die Streaming-Leistung?

Jede Browserquelle betreibt einen eingebetteten Browser, halte die Anzahl also im Rahmen. Auf der Grafikkarte gerenderte Inhalte wie WebGL-Shader belasten den Prozessor wenig; eine einzelne, in sich geschlossene Overlay-Datei ist sparsamer als mehrere schwere Quellen.

Kann eine Browserquelle auf mein Audio reagieren?

Ja — eine Seite kann ein Audio-Eingabegerät anfordern und ihre Darstellung davon steuern lassen. So funktionieren audioreaktive Overlays und Visualizer; Musik leitest du über ein virtuelles Audiokabel dorthin.