HTML Overlay (Browser Source)

HTML Overlay lässt dich eigene Webseiten als OBS Browser Source nutzen. Die Overlay-Seiten laufen lokal über den SB HTTP-Server und können via WebSocket live auf Stream-Events reagieren.

Doku: docs.streamer.bot · HTML Overlay

Konzept

Streamer.bot ──WebSocket──→ Browser Source (OBS)
     │                           │
     │  Events: Follow, Sub,     │  HTML/CSS/JS
     │  Bits, Raid, Chat, …      │  rendert Overlay
     │                           │
     └── HTTP Server served ─────┘
         die HTML-Dateien

SB startet einen lokalen HTTP-Server (Datei-Serving)
OBS Browser Source zeigt die HTML-Seite
Die HTML-Seite verbindet sich per WebSocket mit SB
Bei Events (Follow, Sub, Bits) sendet SB Daten an das Overlay
Das Overlay zeigt Animationen/Text

Setup

HTTP Server aktivieren

Servers → HTTP Server in Streamer.bot
Aktivieren und Port setzen (Standard: 7474)
Document Root auf einen Ordner setzen (z.B. C:\StreamBot\overlays\)
HTML-Dateien in diesen Ordner legen

OBS Browser Source

In OBS: Quelle hinzufügen → Browser
URL: http://localhost:7474/dein-overlay.html
Breite/Höhe: passend zum Overlay (z.B. 1920×1080)
Custom CSS: leer lassen (Styling im HTML)
Shutdown source when not visible: deaktiviert (damit WebSocket verbunden bleibt)

Eingebaute Overlay-Module

Streamer.bot liefert vorgefertigte Overlay-Module mit:

Modul	Was es tut
Splat	Wirft Bilder auf den Stream (z.B. Eier, Tomaten)
Show Image	Zeigt ein Bild für X Sekunden
Emote Rain	Emotes regnen über den Bildschirm

Diese Module werden über Sub-Actions in deinen Actions gesteuert.

Eigenes Overlay bauen

Minimales Overlay das auf Follows reagiert:

<!DOCTYPE html>
<html>
<head>
  <style>
    body { margin: 0; overflow: hidden; background: transparent; }
    .alert {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-family: sans-serif;
      font-size: 48px;
      color: white;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
      opacity: 0;
      transition: opacity 0.5s;
    }
    .alert.show { opacity: 1; }
  </style>
</head>
<body>
  <div id="alert" class="alert"></div>
  <script>
    const ws = new WebSocket('ws://localhost:8080/');

    ws.onopen = () => {
      // Events abonnieren
      ws.send(JSON.stringify({
        request: 'Subscribe',
        events: { Twitch: ['Follow'] }
      }));
    };

    ws.onmessage = (event) => {
      const data = JSON.parse(event.data);
      if (data.event?.type === 'Follow') {
        showAlert(`${data.data.user_name} folgt jetzt!`);
      }
    };

    function showAlert(text) {
      const el = document.getElementById('alert');
      el.textContent = text;
      el.classList.add('show');
      setTimeout(() => el.classList.remove('show'), 5000);
    }
  </script>
</body>
</html>

Overlay mit Custom JavaScript Module

Statt eigenes HTML zu bauen, kannst du SB’s eingebautes Overlay-System mit Custom JS Modules erweitern:

HTML Overlay-Datei von SB nutzen (eingebautes overlay.html)
Eigenes JS-Modul schreiben
Modul wird über den WebSocket geladen und reagiert auf Events

Details: docs.streamer.bot · HTML Overlay

Häufige Fallen

Background nicht transparent: background: transparent im CSS setzen. In OBS: Custom CSS leer lassen.
WebSocket nicht verbunden: Port 8080 prüfen, WebSocket Server muss aktiviert sein.
Overlay cached: OBS cached die Browser Source. Nach Änderungen: Rechtsklick → „Refresh cache“ oder „Interact“ → F5.
CORS-Fehler: Bei lokalen Dateien kein Problem. Nur relevant wenn du externe Ressourcen laden willst.
Overlay überlagert Stream: Z-Order in OBS beachten. Overlay-Source über Game-Capture, aber mit transparentem Background.