STREAM OVERLAYS

Professionelle Overlays für SaarlandLetsPlay Streams

🚀

START SCREEN

Begrüße deine Zuschauer mit einem eindrucksvollen Startbildschirm inklusive Countdown und Live-Informationen.

Animiertes Logo
Countdown-Timer
Social Media Links
Stream Schedule
Startscreen anzeigen
⏸️

PAUSE SCREEN

Halte deine Zuschauer bei der Stange während kurzer Pausen mit unterhaltsamen Inhalten und Live-Stats.

Animierte Pause-Symbole
Live Stream-Statistiken
Aktivitäten-Vorschläge
Rückkehr-Informationen
Pausescreen anzeigen
💬

JUST CHATTING

Perfekt für Unterhaltungen mit der Community. Zeigt Webcam, Chat und Screen-Share in einem professionellen Layout.

Webcam-Bereich
Live Chat-Feed
Screen-Share-Fenster
Aktivitäts-Feed
Just Chatting (Demo)
📡

JUST CHATTING LIVE

Optimiertes Layout: Großer Bildschirmbereich links, Webcam und Chat rechts. Perfekt für interaktive Streams.

Großer Screen-Bereich
Webcam rechts oben
Live Chat rechts unten
Echte Twitch-Daten
Live Version anzeigen
🎮

GAMING OVERLAY

Kompaktes Overlay für Gaming-Sessions. Zeigt alle wichtigen Infos ohne das Spiel zu verdecken.

Webcam-Frame (280x210)
Live Stats kompakt
Activity Feed
Sauberer Gaming-Fokus
Gaming Overlay anzeigen
🎬

END SCREEN

Verabschiede dich stilvoll von deinen Zuschauern mit Stream-Zusammenfassung und nächsten Terminen.

Stream-Zusammenfassung
Konfetti-Animation
Nächste Stream-Infos
Stream-Highlights
Endscreen anzeigen
🧪

API TEST TOOL

Teste deine Twitch API Konfiguration und überprüfe die Verbindung zu deinen Stream-Daten.

Konfiguration validieren
API Verbindung testen
Live Daten anzeigen
Fehlerdiagnose
API Testen
📖

SETUP ANLEITUNG

Komplette Schritt-für-Schritt Anleitung zur Einrichtung der Twitch API Integration.

Developer App erstellen
Access Token generieren
Konfiguration eintragen
Troubleshooting
Anleitung öffnen

🎮 VERWENDUNG IN OBS STUDIO

1. Browser-Quelle hinzufügen
Füge eine neue Browser-Quelle in OBS Studio hinzu und gib den lokalen Pfad zur gewünschten HTML-Datei ein.
2. Auflösung einstellen
Stelle die Auflösung auf 1920x1080 ein für optimale Darstellung in Full-HD-Streams.
3. Szenen erstellen
Erstelle separate Szenen für jeden Overlay-Typ und wechsle zwischen ihnen je nach Stream-Situation.
4. Anpassungen vornehmen
Passe die HTML/CSS-Dateien nach Bedarf an, um Texte, Farben oder Layouts zu verändern.

⚙️ TECHNISCHE SPEZIFIKATIONEN

Auflösung: 1920x1080 (Full HD)
Format: HTML5 + CSS3 + JavaScript
Browser-Kompatibilität: Chrome, Firefox, OBS Browser
Responsive: Ja, anpassbar
CSS Framework: Custom Gaming Theme
Schriftarten: Orbitron, Roboto (Google Fonts)
Animationen: CSS3 Keyframes