// Overlays
Kostenlos downloaden
Anleitung

Twitch Chat in OBS anzeigen

Drei Wege, drei verschiedene Probleme. Der schnellste ist selten der richtige.

Die meisten Anleitungen zeigen genau einen Weg und sagen nicht, was er kostet. Es sind aber drei, und sie lösen unterschiedliche Probleme: Chat nur für dich im OBS-Fenster, Chat für die Zuschauer im Bild, oder ein eigenes Overlay, das sich deinem Design anpasst. Hier steht, welcher zu dir passt.

10 Minuten Einsteiger OBS Browser Source

Schritt für Schritt

// So gehts

  1. 01

    Zuerst klären: wer soll den Chat sehen?

    Willst du beim Spielen nur selbst mitlesen, brauchst du kein Overlay, sondern ein Dock. Ein Dock ist ein andockbares Fenster innerhalb von OBS, das in keiner Aufnahme auftaucht. Geh auf Ansicht, Docks, Benutzerdefinierte Browser-Docks, vergib einen Namen und trag https://www.twitch.tv/popout/DEINKANAL/chat ein. Für viele ist das schon die ganze Lösung.

  2. 02

    Der schnelle Weg: Popout-Chat als Browser-Quelle

    Sollen deine Zuschauer den Chat sehen, kommt dieselbe Adresse in eine Browser-Quelle, also die Quelle in OBS, die eine Webseite anzeigt und auf Englisch Browser Source heißt. Quelle hinzufügen, Browser, dann https://www.twitch.tv/popout/DEINKANAL/chat, Breite 400, Höhe 800. Das läuft sofort. Du holst dir damit allerdings die komplette Twitch-Oberfläche samt dunklem Hintergrund ins Bild.

  3. 03

    Warum der Popout-Weg oft nicht reicht

    Transparent wird diese Seite nur, wenn du im Feld Benutzerdefiniertes CSS der Browser-Quelle eigene Gestaltungsregeln hinterlegst. Die brechen, sobald Twitch sein Layout ändert. Dazu fehlen alle Emotes von 7TV, BTTV und FFZ, weil die aus Browser-Erweiterungen kommen, die es in OBS nicht gibt. Wenn dich eins von beidem stört, nimm den dritten Weg.

  4. 04

    Der saubere Weg: ein echtes Chat-Overlay

    Ein Chat-Overlay zeichnet die Nachrichten selbst, statt eine fremde Webseite abzufilmen. Der Hintergrund ist damit von Haus aus transparent, Schrift und Farben bestimmst du, und die Emote-Dienste werden direkt abgefragt. Fertige Widgets gibt es bei StreamElements und own3d, beide gehostet und mit Konto. Meine Chat-Box ist eine einzelne HTML-Datei ohne Konto, mit sechs Themes und Emotes von 7TV, BTTV und FFZ.

  5. 05

    In OBS einbinden

    Browser-Quelle anlegen, bei einer heruntergeladenen Datei den Haken bei Lokale Datei setzen und die widget.html wählen. Breite 400 und Höhe 900 sind ein guter Start. Setz außerdem den Haken bei Quelle beenden, wenn nicht sichtbar, sonst hält die Quelle ihre Verbindung zum Chat auch dann offen, wenn du längst in einer anderen Szene bist. Die vollständige Einrichtung steht in der Anleitung für Browser-Quellen.

  6. 06

    Bots und Befehle rausfiltern

    Sobald ein Loyalty-Bot mitschreibt, besteht dein Chat im Bild zur Hälfte aus Punktezählerei. In der config.js der Chat-Box blendet hideCommands alle Nachrichten aus, die mit einem Ausrufezeichen beginnen, hideBots deckt Nightbot, StreamElements, Streamlabs, Moobot, Sound Alerts, Fossabot und Wizebot ab, und bei ignoreUsers trägst du weitere Namen nach.

  7. 07

    Lesbar machen

    Der häufigste Fehler ist zu kleine Schrift. Ein großer Teil deiner Zuschauer sitzt am Handy, und was dort unter etwa 20 Pixeln liegt, liest niemand mehr. Gib dem Text einen Umriss oder einen Schatten, damit er auch über hellen Spielszenen lesbar bleibt, und halte rund 40 Pixel Abstand zum Bildrand.

Häufige Fragen

// Kurz erklärt

Warum hat mein Chat einen schwarzen Kasten hinter sich?

Weil die Popout-Seite von Twitch ihren eigenen Hintergrund mitbringt. Eine Browser-Quelle macht eine Webseite nicht transparent, sie zeigt sie nur an. Entweder überschreibst du den Hintergrund mit eigenem CSS, oder du nimmst ein Overlay, das von sich aus transparent zeichnet.

Warum fehlen meine 7TV- oder BTTV-Emotes?

Der Popout-Chat kennt nur die Emotes von Twitch selbst. 7TV, BTTV und FFZ sind Browser-Erweiterungen, und die gibt es in OBS nicht. Ein Overlay, das diese Dienste selbst abfragt, zeigt die Emotes auch im Stream. Meine Chat-Box lädt alle drei.

Geht das auch mit Kick?

Über eine Browser-Quelle ja, dann mit der Kick-Chat-Adresse statt der von Twitch. Die Chat-Box kann Kick über Streamer.bot mitlesen, das habe ich allerdings noch nicht gegen ein echtes Kick-Setup geprüft.

Brauche ich dafür einen Bot?

Nein. Ein Chat-Overlay liest nur mit und antwortet nie. Ein Bot wird erst nötig, wenn im Chat auch etwas passieren soll, etwa bei den Spiel-Overlays mit Punkte-Einsatz. Die Punkte kommen dabei aus deinem Chatbot und nicht aus den Twitch-Kanalpunkten.

Frisst eine zweite Browser-Quelle Leistung?

Eine Chat-Quelle kostet spürbar weniger als eine Spielszene, aber sie läuft eben mit. Wenn du mehrere Overlays gleichzeitig nutzt, setz überall den Haken bei Quelle beenden, wenn nicht sichtbar. Dann laufen nur noch die Quellen der Szene, die gerade zu sehen ist.

Overlay

Chat-Box

Dieses Overlay ansehen und herunterladen.

Zum Overlay