ZeasyAlexandClaude Opus 5.5
63ea40d5a8
In OBS' Browser-Quelle kam `speechSynthesis` amerikanisch heraus: der eingebaute Browser sah keine deutsche Stimme, und die Seite nahm die erste beliebige. Welche Stimmen es gibt, haengt am Rechner, der streamt. Jetzt spricht der Hub mit Piper (lokal im LXC, 200 Zeichen in 0,7 s). Die WAV liegt kurz im Speicher, `/tts` holt sie unter /tts/audio/<id> mit dem Overlay-Schluessel und spielt sie ueber <audio> ab - das laeuft sicher ueber OBS' Tonspur. Der Browser springt nur noch mit einer deutschen Stimme ein, sonst wird nur angezeigt. Stimme und Sprecher stehen in rewards.tts. Dazu: - `abdulive rewards:anlegen`: Belohnung ueber die API anlegen. Nur die App, die sie angelegt hat, darf Einloesungen abschliessen oder erstatten. - Einloesungen werden nach der Aktion als FULFILLED markiert, statt in Twitchs Warteschlange liegen zu bleiben. - Wortfilter normalisiert vorher: Leetspeak, Punkte dazwischen, gezogene Buchstaben, Akzente. Kurze Eintraege nur am Wortanfang. - Der Testknopf "Vorlesen" geht durch Piper und prueft so die echte Stimme. - scripts/install-piper.sh richtet Piper und Stimme im LXC ein. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
112 lines
4.8 KiB
Markdown
112 lines
4.8 KiB
Markdown
# @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`](public/theme.css) (Farben, Schrift, Kontur)
|
||
und [`client.js`](public/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.
|