Concepts

Les outils Multistream Tools s'articulent autour de différents concepts pour lesquels il est important d'avoir une vue d'ensemble avant d'entrer dans les détails.

Le schéma d'architecture ci-dessous offre une vue synthétique permettant de mieux comprendre comment les différents composants de nos outils sont interconnectés et communiquent les uns avec les autres.

attention

Vous remarquerez ci-dessous que nos outils sont versionnés (v1). Il est important d'utiliser la même version pour chaque élément composant le système afin de s'assurer d'une compatibilité parfaite.

Plateformes

Le multistreaming introduit forcément une notion de plateforme, le but de la pratique étant d'en combiner plusieurs. Une plateforme devra alors porter un identifiant unique permettant de la distinguer au milieu de toutes les autres et ainsi pouvoir aisément déterminer la source des événements que le système reçoit.

En parlant d'événements, la plateforme porte également ici une liste des événements qu'elle émet. En effet, le vocabulaire n'est pas le même selon les plateformes ; par exemple Twitch parle de subscriber pour qualifier un abonnement payant, de follower pour qualifier un abonnement gratuit et de cheer pour qualifier un don monétaire là où YouTube emploie respectivement les termes sponsor, subscriber et superchat.

La définition d'une plateforme se fait de la manière suivante :

import { Platform } from 'https://obs.multistream.tools/v1/adapters.js';

const platform = new Platform('platformId', ['event1', 'event2', 'event3']);

Ou bien en créant une sous-classe, plus simple à réutiliser :

import { Platform } from 'https://obs.multistream.tools/v1/adapters.js';

class CustomPlatform extends Platform {
  constructor(...args) {
    super('platformId', ['event1', 'event2', 'event3'], ...args);
  }
}

const platform = new CustomPlatform();

Nous fournissons les plateformes Facebook, Trovo, Twitch et YouTube, pré-configurées pour vous éviter de les modéliser vous-même.

import { Twitch } from 'https://obs.multistream.tools/v1/adapters.js';

const platform = new Twitch();

Vous retrouverez plus de détails concernant la classe Platform sur la page dédiée.

Adaptateurs

Un adaptateur est la pièce du puzzle extrêmement importante chargée de faire remonter vers notre système les événements émis par une plateforme donnée. Afin d'ajouter le support d'une nouvelle plateforme, il s'agit d'implémenter une sous-classe d'Adapter selon comment on souhaite intégrer celle-ci dans notre système, ce dernier étant générique et offrant une liberté conséquente en matière d'intégration. La seule condition imposée est qu'un adaptateur est forcément exécuté dans une page HTML pouvant être importée dans notre dock.

import { Twitch, Adapter } from 'https://obs.multistream.tools/v1/adapters.js';

class TwitchAdapter extends Adapter {
  constructor(...args) {
    super(Twitch, ...args);

    // Implement custom integration logic here.
  }
}

const adapter = new TwitchAdapter();

S'il s'agit là du composant le plus complexe de notre système, rassurez-vous car nous fournissons les adaptateurs FacebookStreamElementsAdapter, TrovoStreamElementsAdapter, TwitchStreamElementsAdapter et YouTubeStreamElementsAdapter, pré-configurés pour vous éviter de les modéliser vous-même. Ceux-ci sont implémentés pour être intégrés dans le service tiers nommé StreamElements, l'un de ceux les plus utilisés par les streameurs dans le monde.

import { TwitchStreamElementsAdapter } from 'https://obs.multistream.tools/v1/adapters.js';

const adapter = new TwitchStreamElementsAdapter();

Vous retrouverez plus de détails concernant la classe Adapter sur la page dédiée.

Dock

https://obs.multistream.tools/v1/dock

Notre dock est une page HTML destinée à être ajoutée à OBS en tant que dock Internet personnalisé. Ce dock devra être configuré pour importer autant d'adaptateurs que vous souhaitez correspondant aux différentes plateformes sur lesquelles vous avez décidé de streamer simultanément.

Cette configuration se fera dans l'onglet nommé Réglages. Une fois celle-ci effectuée, vous pourrez afficher l'onglet nommé Flux d'activités dans lequel tous les événements reçus par le système pendant votre stream seront listés en temps réel.

astuce

Notre dock peut être utilisé seul, sans aucun wrapper ni overlay, afin de bénéficier uniquement d'un flux d'activités multiplateformes.

À l'inverse, notre dock n'est pas nécessaire au bon fonctionnement d'overlays traitant uniquement des événements personnalisés liés à aucune plateforme en particulier.

Le style du dock peut être modifié par le biais d'un thème système ou personnalisé.

Vous retrouverez plus de détails concernant le dock sur la page dédiée.

Wrapper

https://obs.multistream.tools/v1/wrapper

Notre wrapper est une page HTML principalement destinée à être ajoutée à OBS en tant que source de type navigateur Web. Son but est d'afficher, en plein écran, un overlay en exposant à ce dernier toutes les fonctionnalités offertes par notre système. l'overlay associé pourra ainsi recevoir chaque événement émis par les adaptateurs importés dans le dock, recevoir des événements personnalisés émis par d'autres overlays, en émettre lui-même, et également utiliser l'API JavaScript d'OBS.

Si le wrapper est généralement une source dans OBS, il est tout à fait possible d'ajouter celui-ci en tant que dock Internet personnalisé si vous souhaitez par exemple créer des interfaces d'administation pour vos overlays. Notre overlay prêt à l'emloi nommé Polls est notamment découpé en deux pages HTML, l'une étant l'overlay que vos spectateurs verront et l'autre le dock qui vous permettra de créer et gérer des sondages.

Rien ne pourrait fonctionner sans ce wrapper car il permet d'établir une connexion bidirectionnelle entre notre système et des overlays hébergés hors de nos serveurs ; communication qui serait sinon tout bonnement impossible pour des raisons de sécurité.

Vous retrouverez plus de détails concernant le wrapper sur la page dédiée.

Overlays

Les overlays sont le dernier maillon de la chaîne. Il s'agit de pages HTML capables de recevoir et d'envoyer des événements par le biais de leurs wrappers respectifs grâce à un framework JavaScript simple et complet.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="robots" content="noindex,nofollow"/>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <title>Custom overlay</title>
    <link rel="stylesheet" href="https://obs.multistream.tools/v1/core.css"/>
    <link rel="stylesheet" href="https://obs.multistream.tools/v1/overlay.css"/>
  </head>
  <body>
    <script type="module">
      import { Observer } from 'https://obs.multistream.tools/v1/overlay.js';

      const observer = new Observer({
        alerts({ platform, event, data }) {
          // Received alert events will be logged to the developer console.
          console.log(platform, event, data);
        }
      });
    </script>
  </body>
</html>

Nous fournissons des overlays prêts à l'emploi pouvant être utilisés en l'état ou bien servir d'exemple à la création de nouveaux davantage personnalisés.

Le style d'un overlay peut être modifié par le biais d'un thème système ou personnalisé.

Vous retrouverez plus de détails concernant les overlays sur la page dédiée.