Anleitung: Overlay in OBS einbinden

So bringst du das transparente Overlay in wenigen Minuten in deinen Stream. Ein Video folgt – bis dahin findest du hier die einzelnen Schritte.

🎬 Video-Anleitung

▶
Video folgt hier (Platzhalter)

Schritt für Schritt

  1. Server starten: Starte einen lokalen Web-Server im Projektordner, z. B. npx serve . und öffne http://localhost:8000/overlay.html.
  2. OBS öffnen: Starte OBS Studio und wähle die Szene, in der das Overlay erscheinen soll.
  3. Browser-Quelle hinzufügen: Klicke unten bei „Quellen“ auf ＋ → Browser.
  4. URL eintragen: Füge die Overlay-URL ein, z. B. http://localhost:8000/overlay.html?userId=1688546147. Passe die userId an deinen Roblox-Account an.
  5. Größe setzen: Stelle die Breite/Höhe z. B. auf 400 × 320 und aktiviere „Seitenumbrüche deaktivieren“ sowie „Benutzerdefinierte CSS“ (leer lassen).
  6. Platzieren: Ziehe die Quelle an die gewünschte Stelle im Stream und ordne sie über der Spiel-Aufnahme an.

Firebase konfigurieren

Trage die URL deines Firebase-Projekts im CONFIG-Objekt in js/app.js ein. Unter players/{userId} muss ein Objekt mit {"isLive": true} liegen, damit das Overlay auf „Live“ schaltet. Details in der README.md.

← Zurück zur Startseite