Mediendateien für Event Flow

Den besten Weg wählen

Option 1: Integrierten Upload verwenden

1. Wähle in Event Flow Audioclip abspielen oder Medien-Overlay anzeigen.
2. Klicke auf Hochladen, wähle die Datei und schließe den Upload auf der geöffneten Seite ab.
3. Prüfe, ob die zurückgegebene https://fileuploads.socialstream.ninja/media/... URL in der Aktion erscheint.
4. Speichere den Flow und lass actions.html?session=YOUR_SESSION in OBS geöffnet.

Wenn die Upload-Seite 1 GB Speicherplatz pro Konto anzeigt und deine Bibliothek größer wird, verwende die folgende Option für lokale Ordner oder Cloudspeicher.

Option 2: Bibliothek auf dem OBS-Computer behalten

Die eigenständige Desktop-App enthält eine lokale Medienbibliothek und einen Loopback-Server, der nur auf diesem Computer lauscht. Event Flow speichert eine stabile Medien-ID, statt deinen Festplattenpfad in den Flow zu schreiben.

1. Starte die eigenständige Social-Stream-App und öffne Event Flow.
2. Auswählen Audioclip abspielen oder Medien-Overlay anzeigen.
3. Klicke auf Lokale Datei auswählen und wähle eine Audio-, Bild-, GIF- oder Videodatei.
4. Prüfe, ob die Aktion die Datei als verfügbar meldet und der lokale Server läuft.
5. Klicke auf Lokale Flow-Actions-URL für OBS kopieren.
6. Füge diese URL in eine OBS-Browserquelle ein, speichere den Flow und teste die Aktion.

• Verwende Vorschau um die ausgewählte Datei zu prüfen.
• Wenn die Datei verschoben oder umbenannt wird, zeigt Event Flow sie als fehlend an. Klicke auf Neu verknüpfen und wähle den neuen Speicherort; bestehende Flows funktionieren weiter.
• Verwende Im Ordner anzeigen wenn du die Originaldatei finden musst.
• Lass SSApp laufen, solange OBS die lokale Flow-Actions-URL verwendet.
• Teile die erzeugte URL nicht. Sie enthält eine private zufällige Zugriffsberechtigung zum Schutz des lokalen Servers.

Erweiterte Alternative: Eigenen lokalen Server betreiben

Die folgende manuelle Einrichtung bleibt verfügbar, wenn du SSApps verwaltete lokale Medienbibliothek nicht verwendest.

Lade den Social Stream Ninja Quellordner herunter und entpacke ihn. Erstelle dann darin einen Ordner namens user-media .

C:\SSN\social_stream\
  actions.html
  user-media\
    audio\booty.mp3
    images\reward.png
    video\celebration.mp4

Manuellen lokalen HTTP-Server starten

1. Installiere Python, falls es noch nicht installiert ist.
2. Öffne PowerShell oder die Eingabeaufforderung und führe diesen Befehl aus. Lass das Fenster während des Streams geöffnet.

Windows-Befehl

py -m http.server 8765 --bind 127.0.0.1 --directory "C:\SSN\social_stream"

macOS- oder Linux-Befehl

python3 -m http.server 8765 --bind 127.0.0.1 --directory "/path/to/social_stream"

Flow-Actions-URL für die OBS-Browserquelle

http://127.0.0.1:8765/actions.html?session=YOUR_SESSION_ID

Medien-URLs zum Einfügen in Event Flow

http://127.0.0.1:8765/user-media/audio/booty.mp3
http://127.0.0.1:8765/user-media/images/reward.png
http://127.0.0.1:8765/user-media/video/celebration.mp4

Die Einstellung --bind 127.0.0.1 beschränkt den Server auf diesen Computer. Dieser einfache Server ist für lokales Streaming gedacht, nicht für öffentliches Internet-Hosting.

file://: funktioniert, ist aber störanfälliger

Wenn du keinen lokalen Server betreiben möchtest, richte OBS auf eine lokale Flow-Actions-Seite aus und verwende ebenfalls lokale Medien-URLs:

file:///C:/SSN/social_stream/actions.html?session=YOUR_SESSION_ID
file:///C:/SSN/social_stream/user-media/audio/booty.mp3

• Verwende Schrägstriche und vermeide Leer- oder Sonderzeichen in Ordner- und Dateinamen.
• Sowohl die Flow-Actions-Seite als auch die Medien müssen lokal sein. Eine gehostete actions.html Seite kann diesen Pfad nicht lesen.
• Wenn OBS eine lokale Datei ablehnt, verwende die oben beschriebene Methode mit lokalem HTTP-Server.

Was ist mit der Chrome-Erweiterung?

Die Erweiterung verwendet dasselbe Event-Flow-Format, sodass auf dem Desktop erstellte Flows kompatibel bleiben. Lokale Aktionen speichern eine undurchsichtige Medien-ID statt eines Windows-, macOS- oder Linux-Pfads.

Die Erweiterung kann allein keine beliebigen Festplattendateien für OBS zugänglich machen. Verwende ohne unterstützte Begleitbrücke Hochladen oder eine normale gehostete URL. Wenn ein importierter Flow lokale Medien referenziert, erklärt die Erweiterung, dass Desktop-App oder Brücke erforderlich ist, statt stillschweigend fehlzuschlagen.

Option 3: Größere Bibliothek online hosten

Anbieter	Geeignet für	Wichtige Hinweise
Cloudflare R2	Beste allgemeine Wahl für eine öffentliche Meldungsmedien-Bibliothek.	Standard-Speicher enthält derzeit 10 GB-Monate pro Monat und kostenlosen ausgehenden Internetverkehr. Verwende für den Produktivbetrieb eine eigene Domain; r2.dev ist ratenbegrenzt und für Entwicklung vorgesehen.
Backblaze B2	Kostengünstiger S3-kompatibler Speicher mit öffentlichen Datei-URLs.	Die ersten 10 GB sind derzeit kostenlos; Speicher und übermäßiger ausgehender Datenverkehr werden oberhalb der enthaltenen Mengen berechnet.
Amazon S3 oder ein anderer S3-kompatibler Host	Bestehende Cloudkonten und erweiterte Zugriffskontrollen.	Aktiviere öffentlichen Lesezugriff auf die Medien, setze korrekte Inhaltstypen und füge bei Bedarf für Browseranfragen eine schreibgeschützte CORS-Regel hinzu.
GitHub	Einige kleine öffentliche Dateien oder gelegentliche Release-Downloads.	Normale Repositories blockieren Dateien über 100 MiB, und veröffentlichte GitHub-Pages-Websites sind auf 1 GB begrenzt. Releases erlauben größere Dateien, sind als verwaltete Bibliothek für Meldungsmedien aber umständlich.

Cloudflare R2 einrichten

1. Erstelle einen R2-Bucket mit der Standard Speicherklasse.
2. Lade deine Medien mit eindeutigen Ordnernamen hoch, etwa audio/, images/, und video/.
3. Aktiviere in den Bucket-Einstellungen öffentlichen Zugriff. Verwende die öffentliche Entwicklungs-URL nur zum Testen oder verbinde eine eigene Domain für den regulären Livebetrieb.
4. Öffne eine Objekt-URL in einem privaten/Inkognito-Browserfenster. Sie sollte die Datei direkt ohne Anmeldung oder Freigabeseite laden.
5. Füge diese direkte HTTPS-URL in die Event-Flow-Aktion ein.

Einfache Bilder und Audiodateien laden normalerweise ohne eigene CORS-Einstellungen. Wenn ein eigenes Overlay, eine Schrift, ein Videoplayer oder ein Browserabruf einen CORS-Fehler meldet, öffne Bucket → Settings → CORS Policy und füge eine Richtlinie nur für Lesezugriff hinzu:

[
  {
    "AllowedOrigins": [
      "https://socialstream.ninja",
      "http://127.0.0.1:8765"
    ],
    "AllowedMethods": ["GET", "HEAD"],
    "AllowedHeaders": ["Range"],
    "ExposeHeaders": [
      "Content-Length",
      "Content-Range",
      "Accept-Ranges"
    ],
    "MaxAgeSeconds": 3600
  }
]

Füge den genauen Origin jeder anderen Seite hinzu, die die Dateien abruft. Origins enthalten keine Pfade oder abschließenden Schrägstriche. Wenn eine eigene Domain vor dem Hinzufügen von CORS bereits zwischengespeichert wurde, leere den Cache für diesen Hostnamen.

Offizielle Referenzen: öffentliche R2-Buckets, R2-CORS, und R2-Preise.

Backblaze-B2-CORS-Beispiel

Mache den Bucket öffentlich, verwende die direkte Datei-URL und wende eine Regel nur für Downloads an, wenn ein Browser einen CORS-Fehler meldet:

[
  {
    "corsRuleName": "allowSSNMedia",
    "allowedOrigins": ["https://socialstream.ninja"],
    "allowedHeaders": ["range"],
    "allowedOperations": ["b2_download_file_by_name"],
    "exposeHeaders": [
      "content-length",
      "content-range",
      "accept-ranges"
    ],
    "maxAgeSeconds": 3600
  }
]

Siehe Backblazes offizielle CORS-Regelreferenz.

Vor dem Livestart

1. Öffne die genaue Medien-URL in einem privaten/Inkognito-Fenster. Sie muss die Datei direkt laden.
2. Verwende Bild für PNG-, JPG-, WebP- oder GIF-Medien. Verwende Video/Einbettung für Video- oder Einbettungs-URLs.
3. Bevorzuge MP3 für Audio, PNG/WebP/GIF für Bilder und H.264/AAC-MP4 für gute Videokompatibilität.
4. Öffne die Flow-Actions-Seite in OBS mit derselben Sitzungs-ID wie Event Flow.
5. Verwende das Event-Flow-Testfeld und lade die OBS-Browserquelle vor dem echten Stream einmal neu.

• URL lädt herunter statt abzuspielen: der Host sendet den falschen Inhaltstyp oder eine Antwort, die nur einen Download erlaubt.
• Clouddatei wird blockiert: mache sie öffentlich und prüfe CORS-Origin, -Methode und -Header.
• Lokale Datei fehlt: öffne die Aktion in SSApp und verwende Neu verknüpfen.
• Lokaler Server ist offline: starte SSApp und kopiere die lokale Flow-Actions-URL erneut, wenn sich Port oder Sicherheitstoken geändert haben.
• Gehostetes Flow Actions kann den lokalen Eintrag nicht abspielen: ersetze die OBS-URL durch die von SSApp erzeugte.
• Nichts erreicht OBS: prüfe, ob Flow-Actions-URL und Event Flow dieselbe Sitzungs-ID verwenden.