Skip to main content
Version: 8.7.0

Getting started with THEOlive on Web

THEOlive delivers broadcast quality live streaming at sub-second latency, enabling interactivity and fan engagement.

Usage​

  1. Follow our Getting Started guide to set up THEOplayer in your web app or website.
  2. Register the service worker if necessary.
  3. Add a THEOlive source to your player's source.

Register the service worker​

On Apple devices running an iOS version lower than 17.1, a service worker needs to be registered to support low latency play-out of THEOlive streams.

function needsServiceWorkerForTHEOlive() {
  const canPlayMSE = !!(window.MediaSource || window.WebKitMediaSource || window.ManagedMediaSource);
  const videoElement = document.createElement('video');
  const canPlayHLS = videoElement.canPlayType && videoElement.canPlayType('application/vnd.apple.mpegURL') !== '';
  return canPlayHLS && !canPlayMSE;
}
if (needsServiceWorkerForTHEOlive()) {
  await navigator.serviceWorker.register('theoplayer.sw.js');
}

The service worker theoplayer.sw.js is part of the THEOplayer SDK and needs to be on the same domain and path as the page initiating the player.

Add a THEOlive source​

After setting up your THEOplayer on your web page, set its source to a SourceDescription containing a THEOliveSource. Take into account that the source must be set after awaiting the registration of the service worker for streams to work on iOS versions lower than 17.1. You'll need a THEOlive channel ID:

const player = new THEOplayer.Player(element, configuration);
player.source = {
  sources: {
    type: 'theolive',
    src: 'your-channel-id',
  },
};

Add configuration​

Optionally, you can provide additional configuration to the player, specific for THEOlive streams. To configure these settings, add a theolive property to the player configuration. For an exhaustive list of these options, please visit the documentation.

var player = new THEOplayer.Player(element, {
  license: 'your-license',
  // This is needed for fallback to work properly
  retryConfiguration: {
    maxRetries: 6,
  },
  theoLive: {
    externalSessionId: 'my-external-session-id',
    fallbackEnabled: true,
  },
});

More information​