Fichiers multimédias pour Event Flow

Choisir la meilleure solution

Option 1 : utiliser l'envoi intégré

1. Dans Event Flow, sélectionnez Lire un extrait audio (Play Audio Clip) ou Afficher une incrustation multimédia (Display Media Overlay).
2. Cliquez sur Envoyer (Upload), choisissez le fichier et terminez l'envoi dans la page qui s'ouvre.
3. Vérifiez que l'URL renvoyée https://fileuploads.socialstream.ninja/media/... apparaît dans l'action.
4. Enregistrez le flux et gardez actions.html?session=YOUR_SESSION ouvert dans OBS.

Si le site d'envoi indique un quota de compte de 1 Go et que votre bibliothèque le dépassera, utilisez l'option de dossier local ou de stockage cloud ci-dessous.

Option 2 : conserver la bibliothèque sur l'ordinateur OBS

L'application de bureau autonome inclut une bibliothèque locale de médias et un serveur de bouclage qui écoute uniquement sur cet ordinateur. Event Flow enregistre un identifiant stable de média au lieu d'insérer le chemin de votre disque dans le flux.

1. Démarrez l'application autonome Social Stream et ouvrez Event Flow.
2. Sélectionnez Lire un extrait audio (Play Audio Clip) ou Afficher une incrustation multimédia (Display Media Overlay).
3. Cliquez sur Choisir un fichier local (Choose Local File) et sélectionnez un fichier audio, image, GIF ou vidéo.
4. Vérifiez que l'action indique le fichier disponible et que le serveur local fonctionne.
5. Cliquez sur Copier l'URL locale Flow Actions pour OBS (Copy Local Flow Actions URL for OBS).
6. Collez cette URL dans une source navigateur OBS, enregistrez le flux et testez l'action.

• Utilisez Aperçu pour vérifier le fichier sélectionné.
• Si le fichier est déplacé ou renommé, Event Flow le signale manquant. Cliquez sur Réassocier (Relink) et choisissez son nouvel emplacement ; les flux existants continuent de fonctionner.
• Utilisez Afficher dans le dossier (Reveal in Folder) lorsque vous devez retrouver le fichier d'origine.
• Gardez SSApp en cours d'exécution pendant qu'OBS utilise l'URL locale Flow Actions.
• Ne partagez pas l'URL générée. Elle contient un jeton privé aléatoire d'accès utilisé pour protéger le serveur local.

Solution de repli avancée : exécuter votre propre serveur local

La configuration manuelle suivante reste disponible si vous n'utilisez pas la bibliothèque locale gérée de médias de SSApp.

Téléchargez et extrayez le dossier source Social Stream Ninja, puis créez dedans un dossier nommé user-media .

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

Démarrer le serveur HTTP local manuel

1. Installez Python s'il n'est pas déjà installé.
2. Ouvrez PowerShell ou l'Invite de commandes et exécutez cette commande. Laissez la fenêtre ouverte pendant la diffusion.

Commande Windows

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

Commande macOS ou Linux

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

URL Flow Actions pour la source navigateur OBS

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

URL de médias à coller dans 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

Le paramètre --bind 127.0.0.1 limite le serveur à cet ordinateur. Ce serveur simple est destiné à une utilisation en streaming local, pas à un hébergement public sur Internet.

file://: fonctionne, mais est plus fragile

Si vous ne souhaitez pas exécuter de serveur local, dirigez OBS vers une page Flow Actions locale et utilisez aussi des URL de médias locales :

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

• Utilisez des barres obliques et évitez les espaces ou caractères spéciaux dans les noms de dossiers et de fichiers.
• La page Flow Actions et les médias doivent être locaux. Une page hébergée actions.html ne peut pas lire ce chemin.
• Si OBS refuse un fichier local, utilisez la méthode du serveur HTTP local ci-dessus.

Et l'extension Chrome ?

L'extension utilise le même format Event Flow ; les flux créés sur ordinateur restent donc compatibles. Les actions locales enregistrent un identifiant opaque de média plutôt qu'un chemin Windows, macOS ou Linux.

L'extension ne peut pas exposer seule des fichiers arbitraires de votre disque à OBS. Sans passerelle complémentaire prise en charge, utilisez Envoyer (Upload) ou une URL hébergée normale. Si un flux importé fait référence à des médias locaux, l'extension explique que l'application de bureau ou la passerelle est requise au lieu d'échouer silencieusement.

Option 3 : héberger une plus grande bibliothèque en ligne

Fournisseur	Adapté à	Notes importantes
Cloudflare R2	Meilleur choix général pour une bibliothèque publique de médias d'alertes.	Le stockage Standard inclut actuellement 10 Go-mois par mois et la sortie vers Internet gratuite. Utilisez un domaine personnalisé en production ; r2.dev est limitée en débit et destinée au développement.
Backblaze B2	Stockage compatible S3 économique avec URL publiques des fichiers.	Les 10 premiers Go sont actuellement gratuits ; le stockage et la sortie excédentaires sont facturés au-delà des quantités incluses.
Amazon S3 ou un autre hébergeur compatible S3	Comptes cloud existants et contrôles d'accès avancés.	Activez la lecture publique des médias, définissez les bons types de contenu et ajoutez une règle CORS de lecture seule si les requêtes du navigateur l'exigent.
GitHub	Quelques petits fichiers publics ou téléchargements occasionnels de versions.	Les dépôts ordinaires bloquent les fichiers de plus de 100 Mio et les sites GitHub Pages sont limités à 1 Go publié. Les versions permettent de plus grosses ressources, mais conviennent mal à une bibliothèque gérée de médias d'alertes.

Configuration Cloudflare R2

1. Créez un compartiment R2 avec la classe de stockage Standard .
2. Envoyez vos médias avec des noms de dossiers clairs tels que audio/, images/, et video/.
3. Dans Settings du compartiment, activez l'accès public. Utilisez l'URL publique de développement uniquement pour les tests, ou connectez un domaine personnalisé pour un usage régulier en direct.
4. Ouvrez une URL d'objet dans une fenêtre de navigation privée. Elle doit charger directement le fichier, sans connexion ni page de partage.
5. Collez cette URL HTTPS directe dans l'action Event Flow.

Les images et sons simples se chargent normalement sans paramètres CORS personnalisés. Si une incrustation personnalisée, une police, un lecteur vidéo ou une récupération du navigateur signale une erreur CORS, ouvrez Bucket → Settings → CORS Policy et ajoutez une règle de lecture seule :

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

Ajoutez l'origine exacte de toute autre page qui récupère les fichiers. Les origines ne contiennent ni chemin ni barre oblique finale. Si un domaine personnalisé était déjà en cache avant l'ajout de CORS, purgez le cache de ce nom d'hôte.

Références officielles : compartiments R2 publics, CORS R2, et tarifs R2.

Exemple CORS Backblaze B2

Rendez le compartiment public, utilisez l'URL directe du fichier et appliquez une règle de téléchargement uniquement si un navigateur signale une erreur CORS :

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

Consultez la documentation Backblaze : référence officielle des règles CORS.

Avant de passer en direct

1. Ouvrez l'URL exacte du média dans une fenêtre de navigation privée. Elle doit charger directement le fichier.
2. Utilisez Image pour les médias PNG, JPG, WebP ou GIF. Utilisez Vidéo/intégration (Video/Embed) pour les URL de vidéos ou d'intégrations.
3. Privilégiez MP3 pour l'audio, PNG/WebP/GIF pour les images et MP4 H.264/AAC pour la compatibilité vidéo.
4. Ouvrez la page Flow Actions dans OBS avec le même identifiant de session qu'Event Flow.
5. Utilisez le panneau de test Event Flow, puis actualisez une fois la source navigateur OBS avant le vrai direct.

• L'URL télécharge au lieu de lire : l'hébergeur envoie le mauvais type de contenu ou une réponse réservée au téléchargement.
• Le fichier cloud est bloqué : rendez-le public et vérifiez l'origine, la méthode et les en-têtes CORS.
• Le fichier local manque : ouvrez l'action dans SSApp et utilisez Réassocier (Relink).
• Le serveur local est hors ligne : démarrez SSApp et recopiez l'URL locale Flow Actions si le port ou le jeton de sécurité a changé.
• La page Flow Actions hébergée ne peut pas lire l'élément local : remplacez l'URL OBS par celle générée par SSApp.
• Rien n'arrive dans OBS : vérifiez que l'URL Flow Actions et Event Flow utilisent le même identifiant de session.