Projekte - Twitch Voting Tool

Das Twitch Voting Tool ist ein interaktives Overlay für Twitch-Streams, das Zuschauern ermöglicht, in Echtzeit über Optionen abzustimmen. Entwickelt für Streamer, die ihr Publikum einbinden möchten, bietet das Tool ein benutzerfreundliches Interface mit dynamischen Ergebnisbalken in einem auffälligen Orangeton (#FB7C3C, sorry ist halt meine Lieblingsfarbe). Nur Optionen mit Stimmen werden angezeigt, was das Overlay klar und übersichtlich hält. Die Abstimmung kann über den Twitch-Chat (Zahlen 1 bis einstellbare *maxOption*) erfolgen, und Ergebnisse werden ab zwei Stimmen in Echtzeit aktualisiert. Streamer können die Abstimmung über Chat-Befehle (!startvote, !endvote) steuern, während ein optionaler Debug-Modus Simulations-Buttons für Tests bereitstellt.

Das begleitende Config-Tool (config.html) ergänzt das Voting-Tool, indem es Streamern erlaubt, Parameter wie Twitch-Channel, Abstimmungsdauer, maximale Optionen und Debug-Modus über ein einfaches es Streamern erlaubt, Parameter wie Twitch-Channel, Abstimmungsdauer, maximale Optionen und Debug-Modus über ein einfaches Formular anzupassen. Es generiert einen Link für das Voting-Tool, der direkt in OBS oder andere Streaming-Software eingefügt werden kann. Das Config-Tool validiert Eingaben und bietet eine Kopierfunktion für den generierten Link, was die Einrichtung erheblich erleichtert.

Beispielbilder

Hier sind einige Screenshots, die die Funktionalität des Twitch Voting Tools und des Config-Tools zeigen:

Voting Overlay mit Ergebnisbalken
Voting Overlay mit dynamischen Balken während einer laufenden Abstimmung.
Debug-Modus mit Simulations-Buttons
Debug-Modus mit sichtbaren Simulations-Buttons für Testzwecke.
Config-Tool Formular
Config-Tool mit Eingabefeldern und generiertem Link.

Einrichtung

Die Einrichtung des Twitch Voting Tools und des Config-Tools ist einfach und flexibel, sowohl für lokale als auch für serverbasierte Nutzung. Folge diesen Schritten:

  1. Download: Lade die Dateien votes.html und config.html herunter (siehe Download-Abschnitt).
  2. Config-Tool verwenden:
    • Öffne config.html in einem Browser.
    • Gib die gewünschten Parameter ein:
      • Twitch-Channel: Dein Twitch-Channel-Name (z.B. "zakoom").
      • Abstimmungsdauer: Dauer in Sekunden (z.B. 30).
      • Maximale Optionen: Anzahl der Abstimmungsoptionen (z.B. 5).
      • Debug-Modus: "An" (1) für Test-Buttons, "Aus" (0) für Live-Streams.
    • Klicke auf "Link generieren" und kopiere den generierten Link (z.B. ./votes.html?channel=zakoom&votingDuration=30&maxOption=5&debugMode=1).
  3. Voting-Tool einrichten:
    • Füge den kopierten Link als Browser-Quelle in OBS oder andere Streaming-Software ein. Stelle die Größe auf mindestens 600px Breite ein (z.B. 600x400 Pixel).
    • Für lokale Nutzung: Verwende file:///path/to/votes.html?.... Für Server-Nutzung: Lade beide Dateien auf deinen Server und aktualisiere den Pfad in config.html (Variable baseUrl).
  4. Abstimmung starten:
    • Debug-Modus (debugMode=1): Klicke auf "*DEBUG MODE* SIMULATE VOTES" oder sende !startvote im Twitch-Chat (als Broadcaster).
    • Live-Modus (debugMode=0): Sende !startvote im Twitch-Chat (als Broadcaster). Abstimmungen beginnen auch sobald 2 Stimmen innerhalb von 10 Sekunden eingehen.
    • Zuschauer stimmen via Chat ab (z.B. "3" für Option 3).
    • Beende die Abstimmung mit !endvote (Broadcaster/Moderator) oder warte, bis der Timer abläuft.
  5. Testen:
    • Verwende config.html, um einen Link mit debugMode=1 zu generieren.
    • Teste Abstimmungen mit den Simulations-Buttons (Vote 1 bis Vote 5).
    • Überprüfe die Browser-Konsole (F12) für Fehler.

Hinweis: Für serverbasierte Nutzung aktualisiere die baseUrl in config.html (z.B. const baseUrl = 'https://yourserver.com/votes.html';). Für vollständig lokale Nutzung kannst du ComfyJS lokal einbinden, indem du comfy.min.js herunterlädst und referenzierst.

Download

Lade die folgenden Dateien herunter, um das Twitch Voting Tool und das Config-Tool zu verwenden:

folgt...