abdulive/apps/overlay-web

@abdulive/overlay-web

Die Browser-Sources für OBS. Fünf Seiten, alle mit durchsichtigem Hintergrund, alle an demselben Ereignisstrom.

Kein Build, kein Framework, keine Abhängigkeit: OBS lädt die Dateien direkt, und jede Zwischenstufe wäre ein Ding, das mitten im Stream kaputtgehen kann. Gemeinsam sind nur theme.css (Farben, Schrift, Kontur) und client.js (Verbindung, Escaping, Emotes).

Die Seiten

Adresse	Größe	Was sie zeigt
/alerts	1920×1080	Abos, Raids, Bits, Erstchatter. Eine nach der anderen, nie übereinander.
/chat	460×900	Chatnachrichten mit Emotes, Abzeichen, Farben.
/status	1920×160	Titel, Kategorie, Zuschauer, Laufzeit.
/effects	1920×1080	Emote-Regen bei Chat-Spitzen, Konfetti bei Abos und Raids.
/starting	1920×1080	Pausenbild als eigene Szene. Deckend, nicht durchsichtig.

Die fertigen Adressen mit Schlüssel stehen auf der Übersichtsseite (/).

In OBS

Je Seite eine Browser-Source anlegen, Adresse eintragen, Breite und Höhe setzen. Zwei Häkchen sind wichtig:

• "Quelle beim Unsichtbarwerden deaktivieren" aus. Sonst verpasst das Overlay alles, was passiert, während eine andere Szene im Bild ist, und baut sich bei jedem Szenenwechsel neu auf.
• "Browser beim Szenenwechsel aktualisieren" aus. Eine laufende Einblendung würde sonst mitten im Wechsel abgeschnitten.

Einstellungen über die Adresse

Es gibt keine Konfigurationsdatei. Was einstellbar ist, hängt hinten an der URL - so lässt es sich in OBS ändern, ohne den Dienst anzufassen.

Seite	Parameter	Vorgabe
alle	probe=1	dunkler Hintergrund zum Ansehen im Browser
/alerts	sekunden	7 - wie lange eine Einblendung steht
/alerts	erstchatter=0	Erstchatter nicht einblenden
/chat	max	14 - so viele Zeilen gleichzeitig
/chat	sekunden	120 - danach verblasst eine Zeile (0 = nie)
/chat	befehle=1	auch !-Befehle zeigen
/status	kanal	abdulive_
/effects	max	260 - Obergrenze für Teilchen
/starting	text, unter	"Gleich geht es los", leer

Zum Ausprobieren

Auf der Übersichtsseite (/) steht unter Ausprobieren für jede Einblendung, jede Chat-Variante und jeden Effekt ein Knopf. Er löst ein erfundenes Ereignis aus, das nur an die Browser-Sources geht - nichts davon landet in der Datenbank, auf Discord oder bei Twitch.

Am besten die zu prüfende Seite über „ansehen" in einem zweiten Fenster offen haben. Dabei hilft ?probe=1: das legt einen dunklen Grund unter die sonst durchsichtige Seite.

Zwei Dinge sind gesperrt, solange ein Stream läuft: „Stream läuft" und die Vorführung. Beide setzen einen Zustand, der in der Statusleiste stehen bliebe, bis die nächste Twitch-Abfrage ihn geraderückt. „Stand zurücksetzen" ist absichtlich nie gesperrt - das ist der Weg aus einem erfundenen Zustand wieder heraus.

Dieselben Ereignisse im Dauerbetrieb, auch ohne laufenden Dienst:

abdulive overlay --demo

Erfundener Chat, alle neun Sekunden eine Einblendung, ab und zu eine Chat-Spitze. Ohne das ließe sich eine Raid-Einblendung nur prüfen, indem man auf einen echten Raid wartet.

Was fehlt

• Follows. Kommen nicht über IRC, dafür braucht es EventSub. Bis dahin bleibt das Overlay bei Follows stumm; Abos, Raids und Bits kommen an.
• BTTV- und 7TV-Emotes. Die hängen an einer zweiten API. Twitchs eigene Emotes werden angezeigt.
• Töne. Es liegen keine Audiodateien im Repo, und ein Overlay, das ungefragt Krach macht, ist schlimmer als eines, das still ist.

Vorlesen (/tts)

Eigene Browser-Source, 600×200, mit Ton. In OBS darf „Audio über OBS steuern" nicht ausgeschaltet sein, sonst hört der Stream nichts.

Gesprochen wird im Hub mit Piper, nicht im Browser. Die eingebaute Sprachausgabe von OBS' Browser-Quelle sah keine deutsche Stimme und las amerikanisch; welche Stimmen es gibt, hängt am Rechner, der streamt. Piper läuft lokal im LXC, kostet nichts, und kein Zuschauertext verlässt das Haus. Die Seite holt sich die fertige WAV unter /tts/audio/<id> und spielt sie über ein <audio> ab, das sicher über OBS' Tonspur läuft.

Kann der Hub nicht sprechen, springt speechSynthesis ein, aber nur mit einer deutschen Stimme. Gibt es keine, wird die Nachricht nur angezeigt, mit rotem Hinweis.

Stimme und Sprecher: rewards.tts.stimme und rewards.tts.sprecher in der Konfiguration, eingerichtet mit scripts/install-piper.sh.

Einstellungen: ?laut=1 (0 bis 1). Besser im OBS-Mixer regeln. ?sprache=de-DE und ?tempo=1 gelten nur für den Notnagel im Browser.

Mit freigabe: true wird nur vorgelesen, was auf der Übersichtsseite freigegeben wurde. Nach einem Neuverbinden wird nichts nachgeholt — eine Nachricht von vor zehn Minuten vorzulesen ist schlimmer, als sie zu verpassen.