Zum Inhalt

Browser-Overlay mit Live-SB-Daten

Eigenes HTML-Overlay als OBS-Browser-Source das Live-Daten aus Streamer.bot empfängt (Sub-Counter, Heart-Rate, Recent-Events).

Voraussetzung: WebSocket-Server aktiv (siehe setup.md) Patterns: JavaScript-Browser-Code + WS-Verbindung zu SB

Konzept

  1. Eigenes HTML-File mit WebSocket-Client-JS
  2. OBS lädt das File als Browser-Source
  3. Browser-Source verbindet sich mit SB via WS
  4. SB pusht bei jedem Event/State-Change an verbundene Browser
  5. JS empfängt + updated DOM live

Minimal-HTML-Overlay

C:\sb-overlays\sub-counter.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    body { font-family: sans-serif; background: transparent; color: white; }
    .counter { font-size: 5em; text-shadow: 2px 2px 4px #000; }
  </style>
</head>
<body>
  <div class="counter">💎 <span id="count">0</span> Subs</div>
  <script>
    const ws = new WebSocket('ws://localhost:8080/');
    ws.onopen = () => console.log('connected to SB');
    ws.onmessage = (event) => {
      const data = JSON.parse(event.data);
      if (data.type === 'subCount') {
        document.getElementById('count').textContent = data.value;
      }
    };
    ws.onclose = () => setTimeout(() => location.reload(), 2000);
  </script>
</body>
</html>

OBS einbinden

  1. In OBS: + Source → Browser
  2. Local file: ✅
  3. File: C:\sb-overlays\sub-counter.html
  4. Width/Height: passend
  5. Refresh browser when scene becomes active: ✅

SB sendet Update bei Sub

In [Event] Sub Hype (Doku) eine Sub-Action ergänzen:

Sub-Action: Broadcast to Custom Server

Pfad: Streamer.bot → WebSocket → Broadcast (oder ähnlich je nach SB-Version)

Feld Wert
Custom Server (deiner)
Data {"type":"subCount","value":%subscriberCount%}

Vorher Sub-Count abrufen:

[Event] Sub Hype
├── ... (existing logic) ...
├── X. Get Subscriber Count
└── Y. Broadcast: {"type":"subCount","value":%subscriberCount%}

Bei jeder neuen Sub aktualisiert das Overlay live.

Use-Case A: Heart-Rate-Live-Overlay

Statt OBS-Set-GDI-Text (siehe HR-Display) ein schöner HTML-Overlay mit Animation:

<div class="hr-display">
  <span class="emoji">❤</span>
  <span class="bpm" id="bpm">--</span> BPM
</div>
<script>
const ws = new WebSocket('ws://localhost:8080/');
ws.onmessage = (e) => {
  const d = JSON.parse(e.data);
  if (d.type === 'hr') {
    document.getElementById('bpm').textContent = d.value;
    document.querySelector('.emoji').classList.add('beat');
    setTimeout(() => document.querySelector('.emoji').classList.remove('beat'), 200);
  }
};
</script>
<style>
.emoji.beat { transform: scale(1.3); transition: transform 100ms; }
</style>

SB sendet bei jedem HR-Pulse:

[Event] HR Pulse → Browser
Trigger: Heart Rate Pulse
└── Broadcast: {"type":"hr","value":%heartRate%}

Browser updated mit Pulse-Animation.

Use-Case B: Live-Chat-Reaction-Overlay

Bei jedem !cheer-Command animation im Overlay:

HTML: 

<div id="reactions"></div>
<script>
const ws = new WebSocket('ws://localhost:8080/');
ws.onmessage = (e) => {
  const d = JSON.parse(e.data);
  if (d.type === 'cheer') {
    const el = document.createElement('div');
    el.textContent = '🎉 ' + d.user;
    el.style.animation = 'fadeUp 2s';
    document.getElementById('reactions').appendChild(el);
    setTimeout(() => el.remove(), 2000);
  }
};
</script>
<style>
@keyframes fadeUp {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(-20px); }
}
</style>

SB: 

[Cmd] !cheer
└── Broadcast: {"type":"cheer","user":"%user%"}

Use-Case C: Top-Donator-Leaderboard

Persistent Top-3 anzeigen via Globals + WS:

[Cmd] !donate (oder via Cheer-Event)
├── 1. (Globals updaten)
├── 2. Get Top 3 (würde C# brauchen — pragmatisch via Globals direkt:)
└── 3. Broadcast: {"type":"leaderboard","top":[{"name":"%top1%","val":"%top1val%"},...]}

Browser baut sich die Leaderboard-Liste dynamisch.

Tipps für Browser-Overlays

  • Transparenz: body { background: transparent; } plus in OBS keine Background-Color
  • Auto-Reconnect: ws.onclose triggert Reload nach 2s, damit Overlay sich neu verbindet wenn SB neu startet
  • CSP-Probleme bei externen CDNs — alles lokal vendoren (vendor JS/CSS direkt)
  • Debug-Hinweise: Im Browser-Tab F12 öffnen während OBS noch nicht läuft, OBS-internen Browser kann man via --remote-debugging-port debuggen

Variante: Mit Web-Frontend statt OBS

Du kannst das HTML auch in einem normalen Browser öffnen — als Mod-Dashboard auf einem Zweit-Monitor.

Häufige Fallen

  • Browser cached die HTML — bei Änderungen "Refresh cache" in OBS-Browser-Settings
  • Audio im Overlay — Browser-Source muss "Audio over OBS" haben damit Stream-Audio rauskommt
  • CORS bei externen Ressourcen — alles lokal halten, file:// statt http://
  • Übertragene Strings müssen valide JSON sein — Quotes-Escape beachten

Quellen