Leo & Beani's Stream Tools

Jede Datei.
Erklärt.

Überblick über alle Funktionen der Stream-Tools – mit Beispielen und klaren Beschreibungen.

Scrollen

Kern & Authentifizierung

Basis-Dateien für Twitch-Login und Startseite.

www/index.php

Startseite

Einstiegsseite der Stream Tools. Zeigt das Streamtools-Branding mit Hintergrundbild und lädt die Twitch-OAuth-Logik.

Funktion

  • Bindet lib/oAuth2.php ein (Session/Token-Prüfung)
  • Vollbild-Hintergrund mit assets/StreamTools.jpeg
  • Überschrift „Streamtools“ im Apple-System-Font

Beispiel Aufruf

// Nach Aufruf von index.php wird bei fehlendem Login
// zu Twitch OAuth weitergeleitet (über lib/oAuth2.php).
include(__DIR__ . '/lib/oAuth2.php');
www/lib/oAuth2.php

Twitch OAuth2

Zentrale Twitch-Authentifizierung. Verwaltet Access Token, Validierung, Logout und Broadcaster-ID für alle anderen Seiten.

Wichtige Funktionen

  • getToken($url) – Holt Access Token (Authorization Code oder Client Credentials)
  • checkToken($token) – Validiert Token bei Twitch
  • revokeToken($token) – Widerruft Token beim Logout
  • getUserInfo($access_token, $client_id) – Helix API: User-ID des eingeloggten Users

Session-Variablen

  • $_SESSION['access_token'], token_expires, authenticated_broadcaster_id
  • Callback-URL je nach Host (lokal ohne HTTPS, sonst HTTPS)

Beispiel

// Nach ?auth=reauth wird zur Twitch Authorize-URL weitergeleitet.
// Nach Rückkehr: Token tauschen, speichern, getUserInfo für Broadcaster-ID.
$AUTH_URL = "https://id.twitch.tv/oauth2/authorize";
$TOKEN_URL = "https://id.twitch.tv/oauth2/token";
$VALIDATE_URL = "https://id.twitch.tv/oauth2/validate";

Overlays & Tools

Seiten, die als OBS-Overlay oder eigenständige Tools genutzt werden.

www/OBS.php

OBS Control Center

Twitch-Chat-Anbindung mit Bot-Befehlen. Steuert Szenen und lädt Overlays (Clips, Previously, Raid-Wheel, Countdown) in ein iframe. Optional OBS Browser Source / obsstudio-API.

OBS-Einbindung: Wird OBS.php als Browser-Quelle in OBS verwendet, muss der Quelle in OBS die benötigte Seitenberechtigung erteilt werden, damit die obsstudio-API (z. B. Szenenwechsel, aktuelle Szene) verfügbar ist. Ohne diese Berechtigung steht window.obsstudio nicht zur Verfügung.

Ohne Twitch-Anmeldung: Ist noch keine Session vorhanden, erscheint eine Meldung mit Link „Jetzt anmelden“ und die Seite lädt nach 15 Sekunden automatisch neu – praktisch, wenn die Browser-Source vor dem Login geöffnet wurde und nach dem Anmelden in anderem Tab beim nächsten Reload durchstarten soll.

Link für OBS Browser-Quelle (in OBS: Quelle hinzufügen → Browser):

Funktionen

  • connectChat(user) – WebSocket zu wss://irc-ws.chat.twitch.tv, JOIN mit OAuth
  • Nachrichten werden mit ircMessageParser.js geparst (Tags, Bot-Befehle)
  • Chat-Befehle: Wenn eine Auto-Director-Regel vom Typ „Chat-Befehl“ (channel.chat.message) mit passendem command_filter existiert, wird diese ausgeführt (Platzhalter {user_name}, {message.text}, {command_params}). Sonst Fallback: bekannte Befehle wie !OBS <Szenenname>, !clear, !previously, !clips, !raidwheel, !countdown [Sekunden], !say <Text> (Berechtigung pro Befehl im Panel).
  • Websteuerung: OBS.php pollt api/obs-control.php (GET, broadcaster_id). Steuer-Panel obs-control-panel.php sendet Befehle per POST (nur eingeloggt, pro Streamer getrennt).

Beispiel Befehle

!OBS "in Game"     → Szenenwechsel (obsstudio.setCurrentScene)
!countdown 60      → countdown.php?t=60 im iframe
!clips            → clips.php im iframe
!say Hallo         → Sprachausgabe (SpeechSynthesis)

Websteuerung

obs-control-panel.php   // Steuer-Panel (Twitch-Login), sendet an api/obs-control.php
api/obs-control.php (GET)    // ?broadcaster_id=… → liefert nächsten Befehl (OBS pollt alle 2 s)
api/obs-control.php (POST)   // action=… & params=… (Session erforderlich, pro Streamer)
www/obs-control-panel.php

OBS Steuerung (Control Panel)

OBS Steuerung: Status, Buttons, Countdown, Gameinfo, Chat-Berechtigungen

Webbasiertes Steuer-Panel für die Stream Tools. Zeigt Verbindungsstatus (Twitch, OBS.php, Chat, In OBS, Stream live) und Buttons für Overlay-Aktionen. Optional Einladungsmodus per ?invite=TOKEN für Gäste ohne Twitch-Login.

Funktionen

  • Status-Anzeige: Twitch angemeldet, Verbindung zu OBS.php, Chat verbunden, In OBS (Browser Source), Stream live (grün/grau). Neben „Chat verbunden“: Glocke und Schalter Hinweiston bei Chat-Nachricht – wenn der Schalter an ist, ertönt bei jeder neuen Chat-Nachricht ein kurzer Ton; die Glocke erscheint dann ausgefüllt und bleibt es, bis der Schalter wieder aus ist. Voraussetzung: OBS.php als Browser-Source muss mit dem gleichen Kanal laufen (Status „Chat verbunden“ grün).
  • Steuer-Buttons: Clear, Previously, Clips, Raidwheel, Gameinfo – senden Befehle an api/obs-control.php (OBS.php pollt und führt aus)
  • Countdown: Sekunden-Eingabe (z. B. 10), löst Countdown-Overlay aus
  • Gameinfo (Game-ID): Optionale Twitch-Game-ID (z. B. 509) für game-info.php
  • Auto Director: Regeln „Bei Event → Aktion“ (z. B. Raid → Raidwheel, Werbung starten → URL). Neu: Chat-Befehl (!xyz) – Befehl (z. B. !echo) festlegen, Aktion z. B. „Chat-Nachricht senden“ mit Platzhaltern {user_name}, {message.text}, {command_params}. Wenn keine Regeln vorhanden sind: Button „Standard-Konfiguration wiederherstellen“ legt die sechs Standard-Chat-Befehle an.
  • Platzhalter-Info: Pro Regel ein kleines Info-Icon (ⓘ); Mausover zeigt die verfügbaren Platzhalter für das gewählte Event.
  • Poll: Umfrage mit einem einheitlichen Befehl !poll und danach der Option (z. B. !poll ja, !poll 1). Beliebig viele Antwortoptionen; pro Option ein Wert (Label + Wert für !poll). Es zählt die letzte Stimme pro Nutzer. Nach Ablauf wird das Ergebnis automatisch im Overlay angezeigt. Overlay: poll.php?broadcaster_id=… als Browser-Source.
  • Chat-Berechtigungen: Pro Befehl einstellbar, wer ihn im Twitch-Chat ausführen darf (nur Broadcaster, Mods, Subs, alle). OBS-Seite muss geöffnet sein.

Aufruf

obs-control-panel.php
// Nach Twitch-Login (oAuth2). Einladung für Gäste:
obs-control-panel.php?invite=TOKEN
www/clips.php

Clips-Overlay

Clips-Overlay: Spielszene mit Webcam und Snacks-Overlay

Zeigt Twitch-Clips des Kanals in einem Vollbild-iframe. Clip-URLs werden per Helix/API geladen; ein Clip wird zufällig oder sequenziell abgespielt, inkl. Overlay-Text (Clip-Titel, Ersteller).

Funktionen

  • Twitch Helix API: Clips des broadcaster_id abrufen
  • Clip in iframe einbinden; optional randojs.js für Zufallsauswahl
  • Anzeige von Cliptitel und „clipcreator“ mit Glow-Animation
// Aufruf z. B. von OBS.php per !clips
clips.php?broadcaster_id=' . $BROADCASTER . '
www/countdown.php

Countdown

Countdown-Overlay: Starting in… mit Fortschrittsring

Countdown-Overlay in Sekunden. Parameter t legt die Dauer fest. Optik: dunkler Hintergrund, Partikel-Canvas, große Zahl, Apple-ähnliches Design.

Parameter

  • ?t=60 – Countdown von 60 Sekunden (Standard 60, Minimum 1)

Beispiel

countdown.php?t=10
// Wird von OBS.php bei !countdown 10 geladen
www/poll.php

Poll (Umfrage)

Poll-Bauchbinde: Frage, Optionen mit !poll-Befehl, verbleibende Zeit

Chat-Umfragen mit einheitlichem Befehl !poll und Option (z. B. !poll ja, !poll 1). Das Overlay erscheint als Bauchbinde (untere Leiste wie bei Gameinfo): Frage links, Optionen als Pills mit grün hervorgehobenem Befehl, rechts die verbleibende Zeit (z. B. „noch 1 Min“). Nach Ablauf wird automatisch das Ergebnis mit Balken und Stimmenzahl angezeigt.

Funktionen

  • Ein Befehl: Im Chat voten Zuschauer mit !poll <Option> (Option = Wert oder Label, z. B. !poll 1 oder !poll Pizza). Pro Nutzer zählt die letzte abgegebene Stimme.
  • Steuer-Panel: Im Abschnitt „Poll“: Frage, Dauer (Sekunden), beliebig viele Optionen (Label + Wert für !poll). „Poll starten“ legt den Poll an und sendet den Overlay-Befehl; „Poll Overlay“ (oben bei den Buttons) lädt die Bauchbinde in OBS. Während ein Poll läuft, sind die Optionen-Felder gesperrt; der Button „Poll beenden“ ist nur bei aktivem Poll klickbar.
  • Gäste: Auch Nutzer mit Einladungslink können Polls erstellen und beenden (für den Streamer-Kanal).

Parameter

  • ?broadcaster_id=DEINE_TWITCH_ID – erforderlich

API

api/obs-poll.php?broadcaster_id=...
// GET: aktueller Poll (status active|ended|none, poll mit question/options/ends_at bzw. results)

api/obs-poll.php (POST) action=create
// question, duration_seconds, options (JSON), optional invite_token für Gäste

api/obs-poll.php (POST) action=vote
// broadcaster_id, user_id, command (Option) – von OBS.php bei !poll <option>

api/obs-poll.php (POST) action=end
// Poll sofort beenden (Session oder invite_token)
www/raid.php

Raid-Wheel

Raid-Wheel: Drehendes Rad mit Kanalnamen

Zufallsauswahl eines Follower/Viewers als „Gewinner“ für Raid- oder Giveaway-Overlays. Zeigt Profilbild und Namen mit Glow-Effekt. Optional nur Follower (all_followers-Parameter).

Funktionen

  • Twitch API: Follower- oder Viewer-Liste (je nach Parameter)
  • Zufallsauswahl, Anzeige von Avatar und Display-Name
  • Benötigt $implicit_user (oAuth2)
  • Parameter: wait steuert Verhalten und Buttons: wait nicht gesetzt → Buttons sichtbar, Start per Klick. wait=0 → keine Buttons, kein Auto-Spin (nur laden). wait=N (Sekunden) → keine Buttons, Auto-Spin nach N Sekunden. reset_label und start_label für Button-Beschriftung (wenn Buttons sichtbar).
raid.php?broadcaster_id=...&all_followers
// Ohne all_followers: nur Follower; mit: alle berücksichtigen

raid.php?broadcaster_id=...&wait=5
// Keine Buttons, Rad startet nach 5 Sekunden

raid.php?broadcaster_id=...&wait=0
// Keine Buttons, kein Auto-Spin (Start von außen z. B. erneut aufrufen mit wait=5)

raid.php?broadcaster_id=...&reset_label=Neu&start_label=Drehen
// Eigene Button-Beschriftungen (wenn ohne wait aufgerufen)
www/previously.php

Previously

Previously-Overlay: Previously on… Intro

„Previously on …“-Overlay: Graustufen-Video/Inhalt mit 3D-Text-Intro („previously“). Wird per !previously im Chat in OBS.php geladen.

Funktionen

  • iframe mit optionalem Inhalt, Graustufen-Filter
  • Großer animierter Text (intro-Animation)
www/game-info.php

Aktuelles Spiel (Fullscreen & Bauchbinde)

Game-Info Bauchbinde: Spielcover, Titel R.E.P.O., Genres, Plattform, Spielmodi, Preis, Entwickler

Seite für OBS: zeigt Infos zum aktuell gestreamten Spiel. Zwei Darstellungen: Fullscreen (zentriert, großes Cover, IGDB-Infos) und Bauchbinde (kompakte untere Leiste mit Cover + Spielname).

Funktionen

  • Twitch Helix: aktueller Stream und Spiel (game_id, game_name, box_art_url)
  • IGDB (über proxy/igdb-proxy.php): Kurzbeschreibung, Genres, Release-Jahr, Bewertung, Steam-Preis
  • Fullscreen: Spielcover, Spielname, Live-Badge, IGDB-Infos, Key-Art-Hintergrund
  • Bauchbinde: untere Leiste mit kleinem Cover und Spielname (für Lower-Third)
  • OBS: als Browser-Quelle (Fullscreen 100vw×100vh oder Bauchbinde z. B. unten zentriert)
  • Ohne Stream: Hinweis „Aktuell kein Stream“

Aufruf

game-info.php  // Darstellung: Fullscreen (Standard)
game-info.php?view=bauchbinde  // Darstellung: Bauchbinde (untere Leiste)
game-info.php?broadcaster_id=…  // anderer Kanal (mit Anmeldung)
game-info.php?game_id=509658  // Test ohne Stream (Twitch-Game-ID, z. B. 509658 = Just Chatting)
www/whiteboard.php

Whiteboard

Whiteboard: Zeichenfläche mit Toolbar, Farbauswahl und Radierer

Kollaboratives Zeichen-Overlay für den Stream. Streamer und eingeladene Gäste zeichnen gemeinsam auf einer Fläche; in OBS wird das Overlay transparent ohne Toolbar eingebunden und sekündlich aktualisiert.

Modi

  • Overlay (?overlay=1): Für OBS als Browser-Quelle – keine Toolbar, transparenter Hintergrund, Strokes werden live synchronisiert.
  • Zeichenseite (Standard): Mit Toolbar (Löschen, Hintergrund, Farben, Stiftgrößen, Radierer) für den Streamer.
  • Invite-Modus (?invite=TOKEN): Gast zeichnet über Einladungslink direkt im Whiteboard des Broadcasters, ohne Twitch-Login.

Steuerung im Panel

  • „Whiteboard öffnen": Öffnet die Zeichenseite (mit Toolbar) in einem neuen Tab.
  • „In OBS anzeigen / ausblenden": Sendet den Overlay-Befehl an OBS.php.
  • Einladungslink: Erstellt whiteboard.php?invite=TOKEN zum Mitzeichnen ohne Twitch-Login.

Aufruf

whiteboard.php  // Zeichenseite mit Toolbar (Broadcaster)
whiteboard.php?overlay=1&broadcaster_id=…  // OBS-Overlay ohne Toolbar
whiteboard.php?invite=TOKEN  // Gast-Modus via Einladungslink

API

api/whiteboard.php?broadcaster_id=…  // GET: Strokes abrufen
api/whiteboard.php?invite=TOKEN  // GET: broadcaster_id + Strokes für Gäste
api/whiteboard.php  // POST: Stroke hinzufügen oder clear (Session oder invite=TOKEN)
api/whiteboard-invite.php  // create / list / revoke Einladungslinks

Latency-Test & Session

Synchronisierter Latenztest und Pre-Flight-Checkliste mit OBS-Anbindung.

www/latency-test.php

Latency Test

Latency Test: Timer, Waveform, STOP-Button, Mikrofon-Pegel

Hauptseite für den Latenztest: Mikrofon-Beep in konfigurierbarem Intervall, synchrone Start/Stop-Steuerung über Session-Code, Pre-Flight-Checkliste (Twitch, OBS Audio Sources), OBS-Szenenbild im Hintergrund.

Funktionen

  • Session: Session erstellen/beitreten/verlassen, Code per URL ?session=CODE
  • Sync: Start/Stop synchron für alle Clients (Polling gegen api/latency-session.php)
  • Audio: Beep-Intervall, Mikrofon-Auswahl, Visualisierung (Wave-Canvas)
  • OBS WebSocket (v5): Verbindung zu OBS, Audio-Sources (Lautstärke, Mute, „in Szene aktiv“), Szenenbild, Events (Live-Updates)
  • Pre-Flight: Twitch-Verbindung, OBS Audio Sources mit Warnung bei „in Szene aktiv, aber stumm“
  • Einstellungen: In localStorage (Intervall, Mikrofon, OBS-URL/Passwort); HTTP/HTTPS-Hinweise

Beispiel URL

latency-test.php?session=ABC123
// Öffnet Seite und tritt Session ABC123 bei
www/api/latency-session.php

Session-API (Backend)

JSON-API für synchrone Latenztest-Sessions. Sessions werden als JSON-Dateien in www/sessions/ gespeichert. Alte Sessions (>1 h) werden automatisch gelöscht.

Actions (GET/POST, Parameter: action, session_code, client_id)

  • create – Neue Session, 6-stelliger Code, Host = erster Client
  • join – Session beitreten (session_code erforderlich)
  • sync – Status abrufen (status, last_action, interval); setzt last_action nach Abruf zurück
  • start – Test starten (optional interval), setzt last_action = start
  • stop – Test stoppen
  • update_interval – Nur Host: Intervall der Session ändern

Beispiel Request

GET api/latency-session.php?action=create
// Response: {"success":true,"session_code":"A1B2C3","is_host":true}

GET api/latency-session.php?action=sync&session_code=A1B2C3&client_id=...
// Response: status, last_action, interval, clients_count, ...

Hilfsdateien & Skripte

OBS-WebSocket-Demo, JSON-Extraktion und JavaScript-Helfer.

www/util/webSocket.php

OBS WebSocket Demo

Einfache Testseite: Verbindung zu OBS WebSocket (localhost:4455), Identify (op 1), GetInputList und für jede Audio-Input GetInputVolume. Zeigt Ergebnisse im Seiten-Output. Nutzt älteres Protokoll (op 6).

Funktion

  • Demonstration, wie OBS-Input-Liste und Lautstärken abgefragt werden
  • latency-test.php verwendet OBS WebSocket v5 mit Authentication (SHA256) und eventSubscriptions
www/json2string.php

JSON zu String

Lädt JSON von einer URL und extrahiert Werte über einen Pfad (Punkt-Notation). Optionaler Filter (key:value) schränkt gefundene Knoten ein.

Parameter

  • url – URL der JSON-Ressource
  • extract – Pfad z. B. data.0.id (Komma als Dezimaltrenner wird zu Punkt)
  • filter – optional, z. B. type:user

Beispiel

json2string.php?url=https://api.example.com/data.json&extract=data,0,name
// Gibt den Wert data[0].name aus (kommasepariert bei mehreren Treffern)
www/js/

JavaScript

Gemeinsam genutzte Skripte.

Dateien

  • ircMessageParser.js – Parst Twitch IRC-Nachrichten (Tags, Befehle, PRIVMSG, Bot-Commands); wird von OBS.php verwendet
  • randojs.js – Zufalls-/Sequenz-Logik (z. B. Clips)
  • confetti.js – Konfetti-Effekt für Overlays/Events