# Getting started with THEOlive on Web

## Usage

1. Follow [our Getting Started guide](https://docs-preview.optiview.dolby.com/pr-863/theoplayer/getting-started/sdks/web/getting-started.md) 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.

```javascript
function needsServiceWorkerForTHEOlive() {
  const canPlayMSE = !!(window.MediaSource || 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:

```javascript
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](https://docs-preview.optiview.dolby.com/pr-863/theoplayer/v9/api-reference/web/interfaces/TheoLiveConfiguration).

```javascript
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

* [API references](https://docs-preview.optiview.dolby.com/pr-863/theoplayer/v9/api-reference/web/interfaces/TheoLiveSource)