ChamboZero Quizshow.
Eine interaktive Quizshow für Livestreams. Moderator, bis zu sechs Spieler und ein Admin-Panel, alle in Echtzeit verbunden und direkt in OBS eingebunden.
01 / Die Idee
Ein Quiz im Stream braucht mehr als eine Folie: Spieler mit Kamera, einen Buzzer, Punkte und jemanden, der das Ganze im Griff hat. Die ChamboZero Quizshow bringt das alles in eine Web-App, die als Browser-Quelle direkt in OBS läuft.
Alle Ansichten sind per Passwort oder Zugangscode geschützt. Eine offene Zuschauer-Adresse gibt es bewusst nicht.
Illustration. Die echte Show gibt es im Video.
02 / Rollen & Ablauf
- Admin wählt Spielmodus und Teamgröße, erzeugt Zugangscodes und steuert Fragen, Buzzer, Timer und Punkte.
- Moderator öffnet die Bühnenansicht mit allen Kameras, die in OBS als Browser-Quelle in 1920×1080 eingebunden wird.
- Spieler öffnen ihren persönlichen Link, geben den Code ein und geben Kamera und Mikrofon frei.
- Show läuft: Frage freischalten, Buzzer freigeben, Timer starten, Punkte verteilen.
03 / Spielmodi & Fragen
Spielmodi
- Team-Modus mit zwei Teams von 1v1 bis 3v3 und gemeinsamem Punktekonto
- Buzzer auf einen Versuch pro Team begrenzbar
- Singleplayer mit eigenem Punktekonto pro Spieler
- Jeopardy-Modus mit Kategorien-Brett und eigenen Spielbrettern
Fragetypen
- Multiple Choice mit vier Antworten
- Schätzfragen mit Freitext
- Bildsuche: Spieler klicken auf die gesuchte Stelle, Punkte nach Entfernung zum Ziel
- Zuordnen von Begriffspaaren, optional mit Störbegriffen und Zug-Timer
Admin-Panel
- Fragen komplett im Panel pflegen, inklusive Bildvorschau und klickbarer Zielplatzierung
- Mehrere Fragensets, umschaltbar
- Fertige Spieler-Links zum Kopieren, passend zur aktuellen Adresse
Show-Elemente
- Webcams aller Spieler auf einer Bühne
- Buzzer- und Tick-Sounds, Hintergrundmusik
- Timer und Punkteanzeige
- Twitch-Chat-Einbindung
04 / Technik
Das Backend mit Express und Socket.IO ist die einzige Quelle der Wahrheit. Clients schicken nur Aktionen, das Backend verteilt den neuen Zustand an alle. Eine REST-API gibt es nicht.
Die Webcams laufen Peer-to-Peer über WebRTC. Nur die Verbindungsaushandlung geht über Socket.IO, die Videodaten fließen nie über den Server. Für Livestreams reicht ein einziger offener Port, und über einen Tunnel gibt es HTTPS, ohne das Browser keine Kamera freigeben.
- React
- Vite
- Tailwind CSS
- Node.js
- Express
- Socket.IO
- WebRTC
- Docker
- ngrok
- OpenAI Codex
05 / Mehr Projekte
Fragen zum Projekt?
Ich bin nicht auf der Suche. Wenn eine wirklich spannende Stelle dabei ist, höre ich mir das aber gern an.