Mehrere Kanäle und getrennte Overlays

Chat in 4 Schritten nach Plattform aufteilen

Beispiel: Ein Overlay zeigt nur Twitch-Chat, ein anderes nur YouTube-Chat. Du liest weiterhin alles in einem Dock.

Füge alle deine Chats zu Social Stream Ninja hinzu. Prüfe, ob aus jedem eine neue Nachricht erscheint in deinem Streaming-Chat-Dock. Lass dieses Dock ungefiltert. Es ist deine eigene Ansicht.
Kopiere deinen erzeugten dock.html -Link zweimal. Durch das Kopieren bleiben Sitzung, Passwort, Version und Servereinstellungen erhalten.
Füge am Ende jeder Kopie einen Filter hinzu, zum Beispiel &onlyfrom=twitch&hidemenu (siehe Tabelle unten).
Füge jeden Link in OBS als eigene Quelle hinzu: Browserquelle. Benenne sie eindeutig, zum Beispiel Twitch-Chat und YouTube-Chat.

Behalten Sie jedes Overlay in seiner eigenen OBS-Browserquelle. — Jedes Overlay erhält eine eigene Browserquelle.

Erfassen Twitch + YouTube
Eine SSN-Sitzung Dein Dock sieht beide
OBS-Ansichten Nur Twitch und nur YouTube

Ein Feed kann mehrere gefilterte Ansichten versorgen.

Filteroptionen für Chat-Overlays

Ich möchte zeigen…	Zum Dock-Link hinzufügen
Nur Twitch	`&onlyfrom=twitch&hidemenu`
Nur YouTube	`&onlyfrom=youtube&hidemenu`
Twitch und YouTube zusammen	`&onlyfrom=twitch,youtube&hidemenu`
Alles außer Discord	`&hidefrom=discord&hidemenu`

Ein vollständiges Beispiel:

https://socialstream.ninja/dock.html?session=YOUR_SESSION_ID&onlyfrom=twitch&hidemenu

Verwende onlyfrom und hidefrom hier. Optionen anderer Overlays, zum Beispiel onlytype, funktionieren auf dieser Seite möglicherweise nicht. YouTube Shorts ist ein eigener Typ: Füge hinzu youtubeshorts wenn deine Erfassung dies meldet. Siehe Quelltypen.

Featured Chat aufteilen (ausgewählte Nachrichten)

Kopiere deinen erzeugten featured.html -Link zweimal.
Hinzufügen &onlyfrom=twitch zum einen und &onlyfrom=youtube zum anderen hinzu.
Lass dein Dock geöffnet, um Nachrichten auszuwählen.

Featured Chat akzeptiert eine Plattform pro Link. Die durch Kommas getrennte Liste (twitch,youtube) funktioniert nur im Dock.

Der Filter entscheidet nur, welche ausgewählten Nachrichten eine Seite annimmt. Er erstellt keine getrennten Warteschlangen. Eine abgelehnte Auswahl löscht den Bildschirm ebenfalls nicht. Lösche beim Segmentwechsel die hervorgehobene Nachricht selbst, damit keine alte Nachricht stehen bleibt.

Zwei Kanäle auf derselben Plattform

onlyfrom=twitch bedeutet ganz Twitch, nicht einen einzelnen Twitch-Kanal. Kanalnamen und Streamtitel sind keine gültigen Filternamen.

Ich möchte …	So geht's
Zeigen, aus welchem Kanal jede Nachricht stammt	Hinzufügen `&showchannelname` (funktioniert, wenn die Quelle einen Kanalnamen sendet).
Zwei vollständig getrennte Sendungen betreiben	Nutze getrennte Erfassungsinstanzen oder Profile mit jeweils eigener Sitzung, die jeweils nur ihre eigenen Quellen öffnen.
Dock nach Browsertab filtern	`&filtertid=123` (fortgeschritten, siehe unten).

Ein Overlay mit anderer Sitzung ohne passende Erfassung bleibt leer. Die Option label benennt die Seite für die Weiterleitung; es ist kein Kanalfilter.

So geht's filtertid funktioniert

Es verwendet die numerische ID des Browsertabs, aus dem die Nachricht stammt. Mehrere IDs durch Kommas trennen.
Suche tid in echten erfassten Daten. Siehe Ereignisreferenz und Befehle und API.
Das ist keine Plattform-Kanal-ID.
Tab-IDs können sich beim erneuten Öffnen einer Quelle ändern. Quellen ohne passende Tab-ID können ausgeblendet werden.
Es funktioniert nur im Dock, nicht als Kanalfilter für Featured Chat.

Jede Ansicht testen

Sende eine künstliche Twitch- und eine künstliche YouTube-Nachricht in eine Testsitzung. Nutze Testnachrichten erstellen.
Prüfe, ob beide im Dock erscheinen und jedes Chat-Overlay nur seine eigene Plattform zeigt.
Hebe jede Nachricht hervor und lösche sie dann. Prüfe nach dem Plattformwechsel jede Seite für hervorgehobene Nachrichten.
Wiederhole den Test mit einer echten Nachricht aus jeder Quelle. Testnachrichten haben keine echten Tab-IDs.

Problem	Versuche Folgendes
Eine Ansicht ist leer	Entferne den Filter kurz. Wenn der Chat zurückkehrt, prüfe den genauen Quelltyp oder die Tab-ID.
Auch ohne Filter leer	Siehe Fehlerbehebung für Sitzung und Routing.
OBS-Quelle umbenannt, aber nichts geändert	Umbenennen ändert den gespeicherten Link nicht. Bearbeite die URL selbst.

Chat und Benachrichtigungen in einem Browsertab

Overlays kombinieren legt deine Overlay-Links in einem Tab oder einer OBS-Browserquelle übereinander. Praktisch, um während eines IRL-Streams den Chat auf dem Handy zu lesen.

Füge deinen Streaming-Chat-Dock -Link in die unterste Ebene ein.
Füge deinen Multi-Stream-Benachrichtigungsbox -Link in die oberste Ebene ein. Behalte vollständige Links mit Sitzung, Passwort und Verbindungsoptionen.
Lass Transparenter SSN-Hintergrund aktiviert ist.
Aktiviere Berührungen und Scrollen auf dieser Ebene erlauben für Chat. Deaktiviere es für Benachrichtigungen, damit sie den Chat nicht blockieren.
Drücken Sie Vorschau, dann QR-Code anzeigen und scanne ihn mit deinem Handy. Oder drücke Kombinierten Link kopieren zum Einfügen in eine Browserquelle.

Die kombinierte Ansicht hat keine Einrichtungselemente. Sie zeigt nur deine Overlays.

Ebenenoptionen

Ich möchte …	So geht's
Weitere Overlays hinzufügen	Bis zu acht Links.
Ebene nach vorne oder hinten verschieben	Nutze die Pfeiltasten.
Größe oder Position einer Ebene ändern	Öffnen Größe und Position. Lege Breite, Höhe, linken und oberen Abstand in Pixeln fest (`450`) oder Prozent (`100%`).
Eine Ebene wieder bildschirmfüllend machen	Auf Vollbild zurücksetzen. Leere Breite und Höhe füllen den Browser; leere Werte für links und oben beginnen in der linken oberen Ecke.
Linke Chatspalte erstellen (1920×1080)	Chat-Ebene: Breite `450`, Höhe `1080`, links `0`, oben `0`. Andere Ebenen bleiben bildschirmfüllend.
Kombinierten Link später bearbeiten	Nutze den bearbeitbaren Link oder füge hinzu `?edit=1` vor dem `#`.
Neu anfangen	Gespeicherte Einrichtung löschen.

Pixelgrößen bleiben bei einer Änderung der Browsergröße fest. Prozentwerte passen sich an. Jedes Overlay behält seine eigenen Inhalte und Einstellungen.

Speichern, Handys und Datenschutz

Links und Ebenenoptionen werden automatisch in diesem Browser gespeichert, auch unfertige. Privates Surfen speichert sie möglicherweise nicht.
Der kombinierte Link und der QR-Code enthalten das gesamte Layout. Richte es am Desktop ein, scanne es einmal und speichere es als Lesezeichen auf deinem Handy. Beim Öffnen wird die Einrichtung auch im Handy-Browser gespeichert.
Änderungen am Desktop aktualisieren keinen älteren Link. Kopiere oder scanne nach dem Bearbeiten den neuen Link. Über die Sitzungs-ID wird nichts synchronisiert.
Halte kombinierte Links und QR-Codes ebenso geheim wie deine Overlay-Links.
Die SSN-Erfassung muss weiterhin laufen, und das Handy muss dieselben Server wie die ursprünglichen Links erreichen. localhost oder 127.0.0.1 bedeutet das Handy selbst.
Sehr lange Links passen möglicherweise nicht in einen QR-Code. Du kannst den Link weiterhin kopieren.

OBS-Anleitung: linke Chatspalte mit bildschirmfüllenden Effekten

Kein CSS nötig. Jede Ebene hat ihren eigenen Bereich. Stelle die OBS-Browserquelle ein auf 1920×1080. Füge Ebenen von unten nach oben hinzu und gib unter jeder Ebene nur Zahlen ein (ohne Kommas oder „px“): Größe und Position.

Ebene	Breite	Höhe	Links	Oben
1. Livechat / Dock	450	1000	0	80
2. Hype-Zähler	450	80	0	0
3. Emoji-/Emote-Wand	1920	1080	0	0
4. Hervorgehobener Chat	1470	1080	450	0
5. NinjaBacker (optional)	1920	1080	0	0

Die oberen 80 Pixel sind für Hype, darunter liegt die Chatspalte. Soll der Chat hinter Hype die volle Höhe nutzen? Setze die Höhe von Live Chat auf 1080 und oben auf 0. Andere Szenengrößen benötigen andere Werte.

Füge deine vollständigen Overlay-Links ein. Kopiere sie aus deinen bestehenden Browserquellen, damit Sitzung, Passwort, Stile und Verbindungseinstellungen erhalten bleiben. Lass Transparenter SSN-Hintergrund aktiviert. OBS-Zuschnitte, Transformationen, Filter und eigenes CSS sind nicht im Link enthalten und werden nicht übernommen.
Hype in der Spalte zentrieren. Auf dem hype.html -Link verwende &align=center. Ersetze vorhandene align=left oder align=right, und entferne alignright. Für eine kompakte Darstellung versuche &combineall&hidetitle&style=compact&scale=0.75 (vorhandene Werte ersetzen). Mache die Hype-Ebene höher, wenn dein Stil mehr Platz braucht.
Featured Chat neben der Chatspalte halten. Setze Links = 450 und Breite = 1470 zusammen (450 + 1470 = 1920). Eine 1920 Pixel breite Ebene nach rechts zu verschieben würde ihren Rand abschneiden. Füge hinzu &center auf featured.html um kurze Nachrichten in diesem Bereich zu zentrieren. Zum Zentrieren in der gesamten Szene nutze links 0, Breite 1920 und &center.
NinjaBacker zuletzt hinzufügen (optional). Füge seinen Zuschauer-Overlay-Link als oberste Ebene ein, mit aktivierter Einblendung von rechts. Der Combiner legt Bereich und Reihenfolge fest; NinjaBacker bestimmt seine eigene Animation. Der Hintergrund muss transparent sein und die Website das Einbetten erlauben. Diese Ebene war nicht Teil des getesteten Beispiels.
Vorschau mit 1920×1080. Sende eine Chatnachricht mit Emojis, hebe eine Nachricht im Dock hervor und aktiviere Hype-Daten in SSN. Normaler Chat wählt nicht von selbst eine hervorgehobene Nachricht aus.
Kopiere den neuen kombinierten Link in OBS. Stelle diese Browserquelle auf Breite 1920, Höhe 1080. Die Vorschaugröße legt das nicht fest. Passe sie ohne Zuschneiden in die Szene ein. Kopiere den Link nach jeder Layoutänderung erneut; der alte Link behält das alte Layout.

Getestete kombinierte Ausgabe: Hype zentriert über einer schmalen linken Chatspalte, Emojis über die ganze Szene und eine hervorgehobene Nachricht unten rechts neben dem Chat. — Echter Chromium-Test mit vier SSN-Overlays und einem Testfeed. Das Bild ist transparent; der dunkle Hintergrund wurde hier zur besseren Lesbarkeit hinzugefügt. Für volle Größe anklicken. Schriften und Farben stammen aus deinen eigenen Overlay-Einstellungen.

Leistung: Eine Browserquelle führt weiterhin jedes enthaltene Overlay aus. Weniger OBS-Quellen garantieren keine geringere CPU- oder Speichernutzung. Schließe die Browservorschau anschließend und vergleiche OBS bei deaktivierten alten Quellen. Die Leistung auf M1-Macs und dein eigener NinjaBacker-Link sind ungetestet. Du kannst Live Chat getrennt lassen und nur den Rest kombinieren.

Wenn eine Ebene leer ist oder Chat verdeckt

Problem	Versuche Folgendes
Eine Ebene ist leer	Öffne zuerst den Originallink separat. Benachrichtigungen bleiben leer, bis ein Ereignis eintrifft. Das Kombinieren erfasst keine neuen Inhalte.
Eine Ebene hat einen deckenden Hintergrund	Automatische Transparenz funktioniert für `dock.html`, `featured.html`, `multi-alerts.html`, und `minecraft.html`. Andere Seiten benötigen ihre eigene Transparenzeinstellung. Manche externen Seiten blockieren das Einbetten.
Chat lässt sich nicht antippen oder scrollen	Auch eine transparente Ebene kann Berührungen blockieren. Deaktiviere Tippen und Scrollen zulassen auf Ebenen über dem Chat, die das nicht brauchen.
Kein Ton auf dem Handy	Handys benötigen eventuell eine Berührung, bevor sie Ton abspielen. Erlaube Berührungen für diese Ebene und tippe darauf. Teste es auf dem echten Handy, bevor du dich darauf verlässt.