Aller au contenu principal

StreamElements

Nous fournissons actuellement des adaptateurs pour toutes les plateformes supportées par le service tiers nommé StreamElements ; à savoir Facebook, Trovo, Twitch et YouTube. Vous trouverez donc ci-dessous les instructions d'installation adéquates.

info

StreamElements implémente plusieurs plateformes mais n'offre aucun moyen de combiner leurs événements. L'architecture du service est prévue pour ne gérer qu'une seule plateforme à la fois, c'est donc ici que nous intervenons afin d'ajouter le support du multistreaming !

Dock​

Commencez par copier l'URL suivante pour l'ajouter en tant que dock Internet personnalisé dans votre installation d'OBS. Cette URL est ici configurée pour utiliser notre thème ressemblant au flux d'activités proposé par StreamElements mais vous pouvez bien entendu en choisir un autre.

https://obs.multistream.tools/v1/dock?theme=./themes/streamelements/dock.css

Rendez-vous ensuite sur votre compte StreamElements pour lier autant de plateformes (channels) que nécessaire. Puis utilisez le sélecteur présent tout en haut à gauche du site pour choisir une par une les plateformes à modifier et suivez les instructions correspondantes ci-dessous.

Facebook​

Dirigez-vous dans l'onglet Overlays de la catégorie Streaming tools du menu à gauche du site puis cliquez sur le bouton nommé NEW OVERLAY en haut à gauche de l'écran. Une nouvelle page s'ouvrira et vous serez invité à choisir la résolution de votre overlay ; celle-ci n'a pas d'importance, cliquez simplement sur le bouton START.

En haut à gauche vous pouvez optionnellement donner un nom à votre overlay, celui-ci s'appelle Unnamed overlay par défault, nous vous invitons à changer pour multistream.tools Facebook Adapter v1 afin de mieux pouvoir l'identifier par la suite si besoin.

attention

Un overlay StreamElements ne doit pas être confondu avec un overlay Multistream Tools. Le premier n'est pas multiplateformes et est utilisé ici uniquement en guise d'intégration pour nos adaptateurs.

Cliquez maintenant sur le bouton ADD WIDGET à gauche de l'écran puis sur le bouton Custom widget situé sous la catégorie STATIC / CUSTOM dans le menu nouvellement ouvert.

Assurez-vous que le rectangle, venant d'être ajouté en haut à gauche de la zone grise au centre de l'écran, soit sélectionné puis cliquez sur le bouton OPEN EDITOR affiché en haut du panneau de propriétés à gauche de la zone grise.

Dans l'éditeur de code qui vient de s'ouvrir, remplacez totalement le contenu des différents onglets par le code listé ci-dessous, supprimez celui des autres (CSS et JS) puis cliquez sur le bouton DONE en bas à droite pour valider.

<script type="module">
  import {
    FacebookStreamElementsAdapter,
    session,
    alerts,
    chat,
    other,
    follower,
    fan,
    videoLike,
    supporter,
    share,
    stars,
    merch,
    tip,
    redemption
  } from 'https://obs.multistream.tools/v1/adapters.js';

  new FacebookStreamElementsAdapter({
    [session]: {{session}},
    [alerts]: {{alerts}},
    [chat]: {{chat}},
    [other]: {{other}},
    [follower]: {{follower}},
    [fan]: {{fan}},
    [videoLike]: {{videoLike}},
    [supporter]: {{supporter}},
    [share]: {{share}},
    [stars]: {{stars}},
    [merch]: {{merch}},
    [tip]: {{tip}},
    [redemption]: {{redemption}}
  });
</script>
astuce

Si vous dépliez les sections Events et Alerts venant d'apparaître en-dessous du bouton OPEN EDITOR dans le panneau de propriétés, vous pourrez choisir d'activer et désactiver les événements et alertes de votre choix pour cette plateforme. C'est pratique entre autres si votre audience est conséquente et que vous voulez éviter de jouer des sons trop fréquemment dans vos overlays ; les streameurs populaires désactivent souvent totalement les alertes de type follower par exemple.

N'oubliez pas d'enregistrer votre travail en cliquant sur le bouton SAVE tout en haut à droite du site.

Cliquez maintenant sur le bouton, représentant un lien, située directement à gauche du bouton PREVIEW ; le message Copied to clipboard! devrait apparaître temporairement en bas à droite de la page indiquant que le lien de l'adaptateur a bien été copié dans votre presse-papier.

astuce

Le bouton nommé EMULATE, situé en bas à droite de la zone grise, permet de simuler des alertes. Vous pourrez vous en servir une fois l'installation terminée pour tester que celles-ci s'affichent bien dans notre flux d'activités.

Rendez-vous maintenant dans votre installation d'OBS pour ajouter ce lien dans l'onglet Réglages de notre dock. Vous pouvez ajouter l'étiquette #facebook à la fin de l'URL pour mieux distinguer cet adaptateur des autres par la suite.

Cliquez enfin sur le bouton Enregistrer/Recharger puis rendez-vous sur l'onglet Flux d'activités ; les boutons Sourdine, Pause et Passer devraient devenir actifs après un court instant, si ce n'est pas le cas veuillez reprendre les étapes d'installation.

Félicitations, vous venez d'installez votre premier adaptateur Multistream Tools !

Trovo​

attention

Le support de la plateforme Trovo par StreamElements n'est actuellement pas totalement opérationnel. Il existe des problèmes non négligeables avec le chat, raison pour laquelle nous avons choisi de désactiver entièrement cette catégorie d'événements par défaut et vous conseillons de laisser cela ainsi pour le moment. Ceci n'est malheureusement pas de notre ressort.

La procédure à suivre reste la même que pour la plateforme Facebook. Seuls le contenu des onglets ci-dessous, le nom optionnel de l'overlay (multistream.tools Trovo Adapter v1) et l'étiquette en fin d'URL (#trovo) changent.

Assurez-vous de bien avoir sélectionné la plateforme (channel) Trovo dans StreamElements.

<script type="module">
  import {
    TrovoStreamElementsAdapter,
    session,
    alerts,
    chat,
    other,
    follower,
    raid,
    subscriber,
    elixir,
    merch,
    tip,
    redemption
  } from 'https://obs.multistream.tools/v1/adapters.js';

  new TrovoStreamElementsAdapter({
    [session]: {{session}},
    [alerts]: {{alerts}},
    [chat]: {{chat}},
    [other]: {{other}},
    [follower]: {{follower}},
    [raid]: {{raid}},
    [subscriber]: {{subscriber}},
    [elixir]: {{elixir}},
    [merch]: {{merch}},
    [tip]: {{tip}},
    [redemption]: {{redemption}}
  });
</script>

Twitch​

La procédure à suivre reste la même que pour la plateforme Facebook. Seuls le contenu des onglets ci-dessous, le nom optionnel de l'overlay (multistream.tools Twitch Adapter v1) et l'étiquette en fin d'URL (#twitch) changent.

Assurez-vous de bien avoir sélectionné la plateforme (channel) Twitch dans StreamElements.

<script type="module">
  import {
    TwitchStreamElementsAdapter,
    session,
    alerts,
    chat,
    other,
    subscriber,
    cheer,
    follower,
    raid,
    reward,
    merch,
    tip,
    redemption
  } from 'https://obs.multistream.tools/v1/adapters.js';

  new TwitchStreamElementsAdapter({
    [session]: {{session}},
    [alerts]: {{alerts}},
    [chat]: {{chat}},
    [other]: {{other}},
    [subscriber]: {{subscriber}},
    [cheer]: {{cheer}},
    [follower]: {{follower}},
    [raid]: {{raid}},
    [reward]: {{reward}},
    [merch]: {{merch}},
    [tip]: {{tip}},
    [redemption]: {{redemption}}
  });
</script>
info

StreamElements ne traite actuellement pas les événements de type reward (points de chaîne), nous avons donc ajouté leur support en utilisant directement l'API PubSub Twitch ; veillez à n'activer ces événements que lorsque nécessaire.

YouTube​

La procédure à suivre reste la même que pour la plateforme Facebook. Seuls le contenu des onglets ci-dessous, le nom optionnel de l'overlay (multistream.tools YouTube Adapter v1) et l'étiquette en fin d'URL (#youtube) changent.

Assurez-vous de bien avoir sélectionné la plateforme (channel) YouTube dans StreamElements.

<script type="module">
  import {
    YouTubeStreamElementsAdapter,
    session,
    alerts,
    chat,
    other,
    sponsor,
    superChat,
    subscriber,
    merch,
    tip,
    redemption
  } from 'https://obs.multistream.tools/v1/adapters.js';

  new YouTubeStreamElementsAdapter({
    [session]: {{session}},
    [alerts]: {{alerts}},
    [chat]: {{chat}},
    [other]: {{other}},
    [sponsor]: {{sponsor}},
    [superChat]: {{superChat}},
    [subscriber]: {{subscriber}},
    [merch]: {{merch}},
    [tip]: {{tip}},
    [redemption]: {{redemption}}
  });
</script>