Twitch Umfragen - Browser Source Tuning
Auf einfachste Art Umfragen / Polls im Stream anzeigen?
Aber ohne Buttons!
Ganz einfach und ohne weitere Tools nötig. Lediglich das ein- und ausblenden - dafür brauchen wir ein Streamdeck oder - wer es richtig automatisieren will - Streamer.Bot.
Vorher:
Nachher:
First of all brauchen wir von Twitch die URL der Umfragen-Seite. Die sieht immer gleich aus und muss daher nur einmal eingebunden werden.
https://www.twitch.tv/popout/<username>/poll wo <username> natürlich Dein Username ist.
Nimm diese URL und erstelle eine neue Browser-Source. Ich empfehle immer eine neue Scene zu erstellen, so kann man es später einfacher mehrfach nutzen. Aber das musst du nicht machen, wenn du bspw. eh eine Scene für Alerts und andere Overlays dieser Art hast.
Einstellungen
Beispiel:
URL: https://www.twitch.tv/popout/shuffgy/poll
Breite: 1000
Höhe: 800
Und jetzt kommt der wichtige Part, wir müssen ausblenden was wir nicht brauchen. Das schaffen wir über "Benutzerdefiniertes CSS".
Füge dort folgendes ein, mit Kommentaren zur Erlärung:
1body {
2 background-color: transparent !important;
3 padding-bottom: 5px !important;
4
5 /* Globalen Text ausblenden, um unerwünschte Labels zu verstecken */
6 * {
7 color: transparent !important;
8 }
9
10 /* Flexbox: Umfrage an den unteren Rand des OBS-Fensters drücken */
11 #root > div:first-child {
12 justify-content: end;
13 }
14
15 /* Header und die dazugehörige Umfrage-Frage ausblenden */
16 [data-test-selector="header"] {
17 display: none !important;
18
19 & + strong {
20 display: none !important;
21 }
22 }
23
24 /* Abstimmungs-Balken */
25 [role="progressbar"] {
26
27 /* Standard: Schrift während der Umfrage und bei Verlierern ist weiß */
28 & * {
29 color: white !important;
30 }
31
32 /* Gewinner-Balken: Schrift wird wie im Original schwarz */
33 &.container--winner * {
34 color: #000 !important;
35 }
36
37 &.tw-progress-bar {
38 /* Alles unterhalb des Ablaufbalkens ausblenden (Übersicht-Button etc.) */
39 & ~ * {
40 display: none !important;
41 }
42 }
43 }
44
45 /* Überflüssige UI-Elemente wie andere Buttons und das URL-Feld verstecken */
46 button:not([role="progressbar"]),
47 [data-a-target="tw-input"] {
48 display: none !important;
49 }
50}Erkenntnisse fürs weitere rumbasteln:
Twitch baut für seine eigenen Entwickler oft Test-Attribute ein (wie data-test-selector="header"), die sich quasi nie ändern. Auch HTML-Attribute wie role="progressbar" sind sehr stabil.
Falls du also auch die Progressbar raushaben möchtest, wäre hier ein weiterer Selektor nötig.
Das Snippet ließe sich auch noch weiter ausbauen um die Farben anzupassen, Schatten oder abgerundete Ecken zu bearbeiten.
Aber hiermit wollte ich erstmal nur zeigen, was möglich ist.
Wie regel ich das (automatische) ein- und ausblenden?
Also das einfachste wäre natürlich mit einem Streamdeck/Deckboard-Knopf die Quelle selbst ein- und auszublenden. Oft lässt man die Umfrage ja während einer Pause oder einer anderen Aktivität laufen und würde dann das Ergebnis verpassen wenn man wiederkommt.
Ansonsten wäre es einfach möglich über Streamer.Bot 2 Aktionen zu erstellen.
Aktion 1
Name: Umfrage einblenden
Trigger: Twitch Poll Started
Sub-Action: OBS Studio -> Source Visibility -> Quelle finden und auf "Visible" toggeln.
Aktion 2 dann entsprechend das Gegenteil, Trigger wäre dann bspw. Twitch Poll Ended/Archived oder Terminated - je nach dem wann man will, dass es ausgeblendet wird.
Vielleicht hilft das ja jemandem, wenn es Fragen dazu gibt, kommt gerne im Stream vorbei oder lasst es mich per Mail wissen!