Concepts

Our tools are structured around different concepts for which it is important to have an overview before going into details.

The architecture diagram below offers a synthetic view to better understand how the different components of our tools are interconnected and communicate with each other.

warning

You will notice below that our tools are versioned (v1). It is important to use the same version for each element making up the system to ensure perfect compatibility.

Platforms

Multistreaming necessarily introduces a notion of platform, the aim of the practice being to combine several of them. A platform must then carry a unique identifier allowing it to be distinguished from all the others and thus be able to easily determine the source of the events that the system receives.

Speaking of events, the platform also carries a list of events that it emits. In fact, the vocabulary is not the same depending on the platforms; for example Twitch speaks of subscriber to qualify a paid subscription, follower to qualify a free subscription and cheer to qualify a monetary donation where YouTube uses the terms sponsor, subscriber and superchat respectively.

The definition of a platform is done as follows:

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

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

Or by creating a subclass, easier to reuse:

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();

We provide the Facebook, TikTok, Trovo, Twitch and YouTube platforms, pre-configured to avoid you having to model them yourself.

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

const platform = new Twitch();

You will find more details regarding the Platform class on the dedicated page.

Adapters

An adapter is the extremely important piece of the puzzle responsible for reporting events emitted by a given platform to our system. In order to add support for a new platform, it involves implementing a subclass of Adapter depending on how you wish to integrate it into our system, the latter being generic and offering substantial freedom in terms of integration. The only condition imposed is that an adapter must be executed in an HTML page that can be imported into our 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();

If this is the most complex component of our system, rest assured because we provide the FacebookStreamElementsAdapter, TrovoStreamElementsAdapter, TwitchStreamElementsAdapter, YouTubeStreamElementsAdapter and TikFinityAdapter adapters, pre-configured to save you to model them yourself. These are implemented to be integrated either into the third-party service named StreamElements, one of those most used by streamers around the world, or the TikFinity Windows desktop application.

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

const adapter = new TwitchStreamElementsAdapter();

You will find more details regarding the Adapter class on the dedicated page.

Dock

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

Our dock is an HTML page intended to be added to OBS as a custom browser dock. This dock will be configured to import as many adapters as you want corresponding to the different platforms on which you have decided to stream simultaneously.

This configuration will be done in the tab named Settings. Once this is done, you will be able to display the tab named Activity feed in which all the events received by the system during your stream will be listed in real time.

tip

Our dock can be used alone, without any wrapper or overlay, in order to benefit only from a multiplatform activity feed.

Conversely, our dock is not necessary for the proper functioning of overlays processing only custom events linked to no particular platform.

The dock style can be changed through a system or custom theme.

You will find more details about the dock on the dedicated page.

Wrapper

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

Our wrapper is an HTML page primarily intended to be added to OBS as a browser source. Its goal is to display, in full screen, an overlay by exposing to it all the functionalities offered by our system. The associated overlay will thus be able to receive each event emitted by the adapters imported into our dock, receive custom events emitted by other overlays, emit some itself, and also use the OBS JavaScript API.

If the wrapper generally is a source in OBS, it is entirely possible to add it as a custom browser dock if you wish, for example, to create administration interfaces for your overlays. Our ready-to-use overlay named Polls is notably divided into two HTML pages, one being the overlay that your viewers will see and the other the dock that will allow you to create and manage surveys.

Nothing could work without this wrapper because it allows a bidirectional connection to be established between our system and overlays hosted outside our servers; communication which would otherwise be simply impossible for security reasons.

You will find more details about the wrapper on the dedicated page.

Overlays

Overlays are the last link in the chain. These are HTML pages capable of receiving and sending events through their respective wrappers using a simple comprehensive JavaScript framework.

<!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>

We provide ready-to-use overlays that can be used as is as examples for creating new, more personalized ones.

The style of an overlay can be changed through a system or custom theme.

You will find more details regarding overlays on the dedicated page.