🎨 Stream Overlays

StreamElements-Style Overlay System. Canvas Editor, Alert Designer, Widget Builder — alles self-hosted.

💡 Konzept

Wie StreamElements, aber self-hosted + tief integriert mit Workflow Engine

Was ist ein Overlay?

Eine transparente Webseite die in OBS als Browser Source geladen wird. Zeigt Alerts, Widgets, Branding — alles was der Zuschauer im Stream sieht (außer dem Spiel). Jedes Overlay hat eine eigene URL mit Token-Auth.

Warum self-hosted?

StreamElements/StreamLabs: Cloud-hosted, Daten bei Dritten, Features kosten Geld, kein Custom Code. Unser System: Volle Kontrolle, direkte Integration mit Discord/Twitch Bots + Workflow Engine + Donation System.

🔴 V3 Probleme

Zwei halbe Systeme, beide unfertig

Zwei Overlay-Systeme

Altes SSE-basiertes alert.html + neues Canvas-basiertes React-System. Beide aktiv, beide unfertig. Routes redirecten von alt zu neu — chaotische Migration.

Media Library unfertig

OverlayMedia Tabelle existiert, Upload-Handler initialisiert aber nie aufgerufen. Kein Image Picker im Canvas Editor. UploadThing nur halb integriert.

XSS-Risiko

Custom CSS/HTML wird mit dangerouslySetInnerHTML injiziert. Template-Variablen ({user}, {message}) nicht escaped. User-Input direkt im DOM.

Kein Live-Edit Sync

Widget-Änderungen im Editor werden nicht live zum OBS-Overlay gepusht. Man muss die Browser Source in OBS refreshen um Änderungen zu sehen.

Viewer Count Widget = 0

Hardcoded auf 0 im Renderer. Kein Twitch API Feed angebunden. Andere Widgets auch nur halb funktional.

Keine Vorlagen/Templates

Kein Template-System für Overlay-Designs. Jedes Overlay von Null erstellt. Kein Import/Export.

🟢 V4 Architektur

Ein System, sauber durchdacht

Twitch/Discord
Event (Follow, Sub...)
→
Workflow Engine
Condition Check
→
Action: Show Alert
Payload → Redis
→
WS Events
Push to Overlay
→
OBS Browser Source
Shows Alert

WebSocket Only

Kein SSE mehr. Alles über WebSocket: Alert Events, Live-Edit Sync, Widget State Updates. Ein Kanal, ein Protokoll.

Live-Edit → OBS

Widget im Editor verschieben → sofort sichtbar in OBS. Canvas-State wird per WebSocket gesynced. Kein Browser Source Refresh nötig.

Workflow-Driven Alerts

Alerts werden NICHT direkt vom Bot getriggert sondern über die Workflow Engine. Dort: Conditions, Delays, Custom Logic. Maximale Flexibilität.

🖥 Canvas Editor — Mockup

Drag'n'Drop Widget-Platzierung auf 1920×1080 Canvas

My Stream Overlay | 🖱 Select 📝 Text 🖼 Image 📊 Goal Bar 💬 Chat 🔔 Alert Box ⏱ Timer 👁 Viewers 🧩 Custom ▶ Preview 🔗 Copy URL
Layers
🔔 Alert Box
💬 Chat Box
📊 Sub Goal
📝 Stream Title
👁 Viewer Count
🖼 Logo (hidden)
🔔 Alert Box
400×200
💬 Chat
Sub Goal: 65/100
👁 234 Viewers
⏱ 02:34:12
Properties — Alert Box
Position
Size
Animation In
Animation Out
Duration
Alert Queue
🔔 Alert Designer

Pro Event-Type mehrere Varianten basierend auf Schwellwerten

👤 New Follower

1 Variante · bounceIn · 4s

⭐ Subscription

3 Varianten (Tier 1/2/3) + Resub

🎁 Gift Sub

2 Varianten (1-5 / 5+ Gifts)

💎 Bits / Cheer

4 Varianten (1-99 / 100-999 / 1K+ / 5K+)

⚔️ Raid

3 Varianten (<10 / 10-50 / 50+ Viewer)

💝 Donation

4 Varianten (<5€ / 5-20€ / 20-50€ / 50€+)

🏆 Channel Points

Pro Reward konfigurierbar

🧩 Custom Event

Workflow Engine Trigger

Preview — Bits Alert (Tier: 1000+)
💎
1,500 Bits!
DankDonator: "GG das war nice!"
Alert Varianten (Conditions):
Bits 1-99: kleines Bild + kurzer Sound · 3s
Bits 100-999: mittleres Bild + Sound · 5s
Bits 1000-4999: großes Bild + Sound + TTS · 8s
Bits 5000+: Video + Explosion + TTS · 12s
Template Variables:
{user} Username · {amount} Betrag · {message} Nachricht · {tier} Sub Tier · {months} Monate · {viewers} Raid Viewer · {total} Gesamt-Betrag
🏆 Subathon System

Countdown Timer der bei Events Zeit dazu bekommt

⏱ Subathon Timer Widget

Countdown der durch Events verlängert wird. State persistent in DB — überlebt OBS Restart. Start/Stop per Admin Panel, Chat Command oder Workflow Action.

Sub Tier 1: +2 Minuten
Sub Tier 2: +5 Minuten
Sub Tier 3: +10 Minuten
100 Bits: +1 Minute
1€ Donation: +1 Minute
Gift Sub: +3 Minuten pro Gift
──────────────
Optional Cap: Max. 48h Gesamtzeit
Must Have

🎮 Steuerung

  • !subathon start 2h — Start mit 2h Countdown
  • !subathon pause / !subathon resume
  • !subathon add 10m — Manuell Zeit hinzufügen
  • !subathon end — Sofort beenden
  • Admin Panel: Start/Pause/Resume/End Buttons
  • StreamDeck: One-Touch Start/Stop
  • Workflow Action: Automatischer Start bei Stream Online

📊 Stats nach Subathon

  • Gesamtzeit gestreamt
  • Zeit hinzugefügt (pro Event-Type)
  • Anzahl Subs/Bits/Donations
  • Top Contributors
  • Zeitverlauf Graph
🧩 Widget Types (16)

📝 Text

Statischer oder dynamischer Text. Kann Variablen enthalten: {subCount}, {game}, {title}, {viewers}. Font, Größe, Farbe, Schatten.

Must Have

🖼 Image

Bilder, GIFs, Logos. Aus Media Library oder URL. Contain/Cover Fit, Opacity, Border Radius, Animation.

Must Have

🎬 Video

Video Clips. Loop, Mute, Autoplay. Stinger Transitions, Animated Backgrounds.

Should Have

🔔 Alert Box

Event-Alerts mit Tier-Conditions. Unterschiedliches Bild/Sound/Video je nach Betrag. Queue: Sequential/Stack/Replace.

Must Have

💬 Chat Box

Live Twitch Chat. Badges, Emotes (BTTV/FFZ/7TV), Max Messages, Fade-Out.

Must Have

📊 Goal Widget

Flexibel: Bar, Circle, Thermometer, oder Text Only ({current} / {target}). Datenquelle: Sub Count, Follower, Donations, Bits, oder Custom Value (API/Workflow setzbar).

Must Have

👁 Viewer Count

Live Viewer Anzahl. Twitch API Feed. Als Text-Variable auch in anderen Widgets nutzbar.

Should Have

⏱ Timer Widget

5 Modi: Uptime, Countdown, Subathon (Zeit-Adds), Stopwatch, Event Counter. Steuerbar per Panel, Chat, StreamDeck, Workflow.

Must Have

🏆 Leaderboard

Top Donators, Cheerers, Gifters. Zeitraum: Stream/Woche/Monat/All-Time.

Should Have

📺 Media Player

Audio/Video abspielen via Workflow Action. Sound Alerts, Video Reactions, Meme Sounds.

Should Have

🎰 Wheel / Random

Glücksrad, Random Pick. Für Giveaways, Viewer-Games. Trigger per Chat oder Workflow.

Could Have

😂 Emote Wall

Emotes fliegen / regnen über den Screen wenn Chat sie spammt. Threshold konfigurierbar. BTTV/FFZ/7TV Support.

Should Have

🎵 Now Playing

Aktueller Song (Spotify Integration). Cover Art, Artist, Title. Auto-Hide wenn nichts spielt.

Should Have

📜 Ticker / Marquee

Scrollender Text. Für Ankündigungen, Social Links, Sponsoren. Geschwindigkeit + Richtung konfigurierbar.

Should Have

🧩 Custom HTML

Beliebiges HTML/CSS/JS. Sandbox für Sicherheit. Für alles was kein Standard-Widget abdeckt.

Must Have

💡 Text-Variablen überall nutzbar

Jedes Text-Widget kann dynamische Variablen verwenden. Beispiel für ein Goal Display ohne Bar:

Template: {subCount} / 1154 Subs
Ergebnis: 847 / 1154 Subs
Verfügbare Variablen: {subCount} {followerCount} {viewers} {game} {title} {uptime} {donationTotal} {bitTotal} {lastFollower} {lastSub} {topDonator} {customVar:name}
⏱ Timer Modi

Ein Timer Widget, 5 verschiedene Modi

⬆️ Uptime

Zählt hoch seit Stream Start. Automatisch. Format: hh:mm:ss

⬇️ Countdown

Zählt runter auf 0. Für Events, Pausen, Giveaway-Timer. Trigger bei 0: Workflow Action.

🏆 Subathon

Countdown + automatische Zeit-Adds bei Subs/Bits/Donations. Persistent in DB. Cap optional.

⏱ Stopwatch

Manuell Start/Stop. Für Speedruns, Challenges. Per Chat, Panel oder StreamDeck steuerbar.

🔢 Event Counter

Zeigt Zahl statt Zeit. Deaths, Wins, Custom Counter. Increment per Chat Command oder Event.

🎮 Steuerung

Alle Modi steuerbar per:
• Admin Panel Buttons
• Chat Commands (!timer)
• StreamDeck Plugin
• Workflow Actions

⚖️ Vergleich mit StreamElements
FeatureStreamElementsCodenull V4
Canvas Editor✓ Drag'n'Drop✓ Drag'n'Drop (React DnD)
Alert Designer✓ Per Event Type✓ Per Event Type + Workflow Conditions
Widget Library✓ 30+ Widgets✓ 12 Widgets + Custom HTML
Live-Edit Sync✓ Cloud Sync✓ WebSocket Sync (instant)
Custom Code⚠️ Limited✓ Full HTML/CSS/JS (sandboxed)
Templates✓ Community Store✓ Import/Export JSON + Presets
Media Hosting✓ SE CDN✓ Self-hosted + UploadThing
TTS✓ Google/Amazon TTS✓ Web Speech API + Browser TTS
Automation⚠️ Basic Rules✓ Full Workflow Engine (Drag'n'Drop)
Donation Integration✓ SE Tips✓ Own Donation System (Stripe/PayPal)
Self-Hosted✗ Cloud Only✓ 100% Self-Hosted
Data Ownership✗ SE owns data✓ Deine Daten
🗄 Datenmodell (V4)
overlayCanvas id text PK userId text FK → user name text // "Main Stream Overlay" width integer // default 1920 height integer // default 1080 token text unique // URL token for OBS browser source isActive boolean backgroundColor text // transparent default overlayWidget id text PK canvasId text FK → overlayCanvas type enum // TEXT, IMAGE, VIDEO, ALERT_BOX, CHAT, GOAL, VIEWER, TIMER, LEADERBOARD, MEDIA, WHEEL, CUSTOM name text // "Follow Alert" x y width height integer rotation integer // degrees zIndex integer isVisible boolean isLocked boolean settings jsonb // type-specific settings customCss text? overlayAlert id text PK canvasId text FK → overlayCanvas eventType text // "channel.follow", "channel.subscribe", "donation", ... isEnabled boolean imageUrl text? soundUrl text? videoUrl text? duration integer // ms animationIn text // bounceIn, fadeIn, slideInLeft, ... animationOut text messageTemplate text // "{user} ist jetzt Follower!" titleTemplate text // "New Follower!" style jsonb // { fontSize, fontFamily, textColor, textShadow, ... } soundVolume integer // 0-100 ttsEnabled boolean conditions jsonb? // min amount, specific user, etc overlayMedia id text PK userId text FK → user type enum // IMAGE, GIF, AUDIO, VIDEO name text url text // CDN URL fileSize integer mimeType text thumbnailUrl text? tags text[]
✅ Entscheidungen

Geklärt am 2026-03-18

1. Media Storage: Egal

Flexibel halten — UploadThing für schnellen Start, Self-hosted als Option später. Abstraction Layer damit beides geht.

2. TTS: Browser Web Speech API

Gratis, keine Drittanbieter-Abhängigkeit. Qualität reicht für Stream-Alerts. Läuft direkt im OBS Browser Source.

3. Import/Export: Ja, kein Community

Overlays als JSON exportieren/importieren. Kein Community-Marktplatz — nur lokaler Import/Export für Backup und Sharing.

4. Single Canvas

Ein primäres Overlay in dem alles platziert wird. Widgets können per Workflow oder manuell getoggelt werden (show/hide). Kein Multi-Canvas nötig.

5. Custom HTML: iframe Sandbox

<iframe sandbox="allow-scripts"> isoliert Custom Code. Kommunikation über postMessage für Variablen-Updates. Browser macht die Isolation.

6. Alert Queue: Ja, immer

Alle Alerts laufen durch eine Queue — einer nach dem anderen. Kein Überlappen von Sounds/Animationen. Verhindert Chaos bei vielen Events gleichzeitig.

📋 OBS Event Dock

Live Event-Übersicht als OBS Custom Dock (Browser Panel via SSE)

Was ist das?

Ein OBS Custom Browser Dock (nicht Browser Source!) das in OBS als Panel angedockt wird. Zeigt eine Live-Liste aller eingehenden Events: Follows, Subs, Bits, Donations, Raids. Wie das "Recent Events" Panel in StreamElements.

  • SSE Stream für Echtzeit-Updates (leichtgewichtig)
  • Event-Typ Filter (nur Subs zeigen, nur Donations, etc)
  • Quick Actions: Event erneut triggern (Alert replay), User bannen, etc
  • Session-basiert: zeigt nur Events seit Stream-Start
  • URL: https://codenull.de/obs/events?token=xxx

Mockup

Recent Events Filter ▾
● Follow NewViewer123 2s ago
● Sub T1 xXGamerXx · 6mo 15s ago
● 500 Bits DankDonator · "GG!" 1m ago
● Raid FriendlyStreamer · 87 3m ago
● Donation BigFan · 10€ 5m ago
Codenull Platform · Stream Overlay System Planning · 2026-03-18