Skip to main content
Version: 8.6.1

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