Skip to main content

StreamBoost

StreamBoost is a Quanteec module that lets viewers see the impact of peer-to-peer (P2P) streaming and take part in it. It sits on top of the Quanteec SDK and adds a small interface to the video page: a button that opens a panel.

What it does​

  • Shows P2P statistics to the viewer, as dashboard cards: Peers, Shared, Speed, Power, Energy, Water, CO2 and Ranking.
  • Gamifies P2P: the viewer collects points by sharing the stream with other viewers.
  • Lets the viewer choose: the boost can be switched on or off, enabling or disabling p2p.
  • Supports sponsoring: an advertising banner can be displayed in the panel, linked to a campaign.

How it works​

  1. The page loads the Quanteec SDK on the player, as usual. P2P exchanges between viewers are handled by the SDK.
  2. The StreamBoost plugin is added to the page, the Quanteec plugin instance is passed down to StreamBoost or automatically detected.
  3. The streaming and P2P states are detected, generating Quoins that can be claimed when available.
  4. Actions from the users are detected and send to our analytics dashboard.

Components​

StreamBoost can be implemented using one of these two Components:

  • The Button: an icon button on that opens the panel. It embeds the panel.
  • The Panel: The dashboard and status view. It can be used alone, opened from your own button.

The two components are available in two forms:

  • a JS plugin: in any HTML page, through the custom elements <streamboost-button/> or <streamboost-panel/>.
  • a React plugin: for React applications, through StreamboostButton or StreamboostPanel.

Viewer id​

Every StreamBoost integration requires a viewer id (user-id, userID or userId depending on the integration). It identifies the viewer, not your platform: it must be unique per viewer and stay the same across sessions, so that the viewer keeps their Quoins. StreamBoost does not generate or store it: use your platform user id for logged-in viewers, or generate a UUID once and keep it in localStorage for anonymous viewers:

let userId = localStorage.getItem("quanteecUserId");
if (!userId) {
  userId = crypto.randomUUID();
  localStorage.setItem("quanteecUserId", userId);
}
note

Some players embed the QUANTEEC plugin natively, in which case StreamBoost is configured through the player itself instead of the components above. See for example StreamBoost with Bradmax: StreamBoost is only displayed when quanteecConfig.streamboost.userId is set.

Next steps​

Integrate StreamBoost in your player: