OBS-Bauchbinden: eine Browser-Quelle, alle Grafiken
OBS Studio kann Live-HTML5-Grafik von Haus aus anzeigen — ohne Plug-in, ohne Capture-Karte, ohne zweite Maschine. Das ist die exakte Einrichtung für OBS-Bauchbinden, Score-Bugs und Ticker mit einer einzigen transparenten Browser-Quelle, samt der typischen Probleme und ihrer Lösung.
Warum Browser-Quelle statt Medienquelle
Eine Medienquelle spielt eine Datei. Eine Browser-Quelle führt eine lebende Webseite aus, mischt sie mit voller Alpha-Transparenz über deine Szene und aktualisiert sie in Echtzeit. Für Live-Grafik ist dieser Unterschied entscheidend: Die Seite kann ihren Inhalt ändern, während sie auf Sendung ist — Spielstand oder Name aktualisieren sich, ohne dass du OBS anfasst.
Außerdem trägt eine Quelle alle Grafiken. Insert, Score-Bug und Ticker sind Elemente derselben transparenten Seite; sie verrutschen nie gegeneinander, und du baust keinen Stapel aus zwölf Quellen.
Quelle hinzufügen — Schritt für Schritt
- LowerThird Software starten. Es liefert Bedienpult und Ausgabeseite von deiner eigenen Maschine.
- In OBS die Szene wählen, in der Kamera oder Spielaufnahme schon liegt. Unter Quellen auf + klicken und Browser wählen.
- Benenne sie Grafik und bestätige.
- Als URL
http://localhost:5275/outputeintragen. - Breite 1920, Höhe 1080 — passend zur Leinwand; die Quelle nicht in der Szene skalieren.
- Quelle abschalten, wenn nicht sichtbar deaktiviert lassen; Browser aktualisieren, wenn Szene aktiv wird nur setzen, wenn die Grafik bei jedem Szenenwechsel zurückgesetzt werden soll.
- Bestätigen und die Quelle in der Liste ganz nach oben ziehen, damit sie über der Kamera liegt.
Transparenz: nichts einzustellen
Viele suchen nach einer Transparenz-Einstellung. Es gibt keine, und es braucht auch keine — die OBS-Browser-Quelle respektiert den Alphakanal der Seite bereits. Malt die Seite keinen Hintergrund, mischt OBS nur die gezeichneten Pixel ein.
Siehst du ein schwarzes oder weißes Rechteck, malt die Seite einen Hintergrund, nicht OBS. Eigenes CSS im Quellendialog kann eine Fremdseite retten (body { background: transparent !important; }), aber eine für Sendung gebaute Seite sollte ohnehin transparent sein.
Größe, Skalierung und sicherer Bereich
Lege die Quelle immer in der Auflösung deiner Leinwand an — normalerweise 1920×1080 — und positioniere die Grafik innerhalb der Seite, statt die Quelle in OBS zu skalieren. Skalieren rechnet Text neu und macht jede Kante weich; das ist der häufigste Grund für unscharfe Titel im Stream.
Wenn du in 1280×720 sendest, lass die Quelle auf 1920×1080 und lass OBS am Ende die gesamte Leinwand einmal herunterrechnen. Eine saubere Skalierung ist besser als zwei.
Fünf Probleme und ihre Lösung
- Die Quelle bleibt leer. Die Anwendung läuft nicht, oder der Port ist ein anderer. Öffne die URL zuerst in einem normalen Browser — ist sie dort auch leer, liegt es nicht an OBS.
- Die Grafik aktualisiert sich nicht. Die Seite hängt im Cache oder die Socket-Verbindung ist abgerissen. Rechtsklick auf die Quelle → Interagieren oder Aktualisieren. Eine WebSocket-Seite sollte sich selbst wieder verbinden.
- Titel wirken weich. Die Quelle wird skaliert. Transformation zurücksetzen (Strg+R bei ausgewählter Quelle) und die Größe in den Eigenschaften setzen.
- Alles ruckelt. Hardwarebeschleunigung ist in OBS aus, oder eine Animation ist zu teuer. Nutze transform und opacity, die die GPU übernimmt, statt width, height oder Schatten.
- Das Overlay verschwindet beim Szenenwechsel. Quelle abschalten, wenn nicht sichtbar ist aktiv. Deaktiviere es oder füge dieselbe Quelle in jeder Szene als Referenz statt als Kopie ein.
Arbeiten, während du live bist
Halte das Pult auf einem zweiten Monitor oder auf einem Tablet auf dem Tisch — es ist eine Webseite, also kann jedes Gerät mit Browser im Netz sie fahren. Tippe den Namen des nächsten Gastes, während der aktuelle noch im Bild ist, und drücke TAKE, wenn die Einstellung wechselt.
Da die Befehle über WebSocket laufen, gibt es keine Abfrageverzögerung und kein Neuladen: Du klickst, und die Animation startet im selben Frame.
Bereit für den Test in deiner Szene? Hol dir einen Early-Access-Build, füge eine Browser-Quelle hinzu und bring in etwa fünf Minuten ein Namensinsert auf Sendung.
Early Access anfragen