Automatically broadcast a Live Channels event stream

{
    "playlist": `https://cdn.jwplayer.com/v2/media/${mediaId}`,
    // Repeat the VOD indefinitely while we wait for the livestream to become available.
    "repeat": true, 
    "autostart": true,
};

{
    "playlist": "https://cdn.jwplayer.com/v2/playlists/{PLAYLIST_ID}"
};

/* 
Please Note: This implementation is a Proof of Concept only provided 
to show the possibilities of the JW Player and should not be taken as an 
offer to create, edit or maintain custom integration or development. 
*/

<!-- The DIV for the Player -->
<div id="player"></div>

<script type="text/javascript">

/**
 * Put the Channel ID here. This is shown on the Channel Detail page in the JW Dashboard.
 */
let channelId = '{channel_id}';

/**
 * The provided snippet will play a looping VOD asset if the channel is not active.
 * Specify the Media ID of the VOD asset here.
 */
let mediaId = '{media_id}';

if (!channelId.match(/[a-zA-Z0-9]{8}/)) {
    alert("The provided channel id is not a valid Live Channel channel ID.");
    throw new Error('Please modify the channel ID');
}


/** The player config to use in order to initialize the player */
const VOD_CONFIG = {
    "playlist": `https://cdn.jwplayer.com/v2/media/${mediaId}`,
    // Repeat the VOD indefinitely while we wait for the livestream to become available.
    "repeat": true, 
    "autostart": true,
};

/**
 * How often we should be checking for an update to the live status.
 * 10 seconds is generally a good frequency, it is not useful to check more often.
 */
const UPDATE_FREQUENCY = 10 * 1e3;

/**
 * The code of the error which the player may raise if the livestream goes offline or finishes.
 */
const LIVESTREAM_COMPLETE_ERROR = 230001;

/**
 * The code of the error emitted by JW Player's HLS implementation if buffering stalls.
 * This may happen when a livestream (suddenly) finishes and no more segments are available to buffer.
 * In this case we'll switch back to VOD playback.
 */
const HLS_BUFFER_STALL_WARNING = 334001;

/**
 * The maximum number of times we'll try before giving up configuring a player.
 * @type {number}
 */
const MAX_RETRIES = 3;

/** The player on the page which we'll use for playback */
const playerInstance = jwplayer('player').setup(VOD_CONFIG);

/** The identifier of the current/last played event. */
let currentEventId;

/** An id used by the setInterval()/clearInterval() functions in order to manage the update loop. */
let intervalId;

// Start the update loop.
checkChannelStatus();

// Register an event listener that triggers when the JW Player has finished playing all
// elements in its playlist. In this demo, this event is triggered when livestream playback
// has finished.
playerInstance.on('playlistComplete', handleLivestreamFinished);

// Register an event listener that triggers when the player emits an error.
playerInstance.on('error', (error) => {
  // Check if the error may have been because the livestream stopped updating, in this case
  // we'll switch back to playing the VOD.
  if (playerInstance.getPlaylistItem().mediaid !== currentEventId) {
    // Ignore errors during VOD playback.
    return;
  }
  if (error.code === LIVESTREAM_COMPLETE_ERROR) {
    handleLivestreamFinished();
  }
});

// Register an event listener which listens for buffer warnings from the player.
// We can use the warnings generated by the player to realize a very fast switchover
// between the livestream and the VOD asset.
playerInstance.on('warning', (warn) => {
  if (playerInstance.getPlaylistItem().mediaid !== currentEventId) {
    // Ignore warnings during VOD playback.
    return;
  }
  if (warn.code === HLS_BUFFER_STALL_WARNING) {
    // The player failed to buffer more media.
    // This *may* be an indicator that the livestream has finished - in this demo we'll switch back to attempting to play
    // the VOD asset if this is the case.
    handleLivestreamFinished();
  }
});

function handleLivestreamFinished() {
  if (intervalId) {
    // We are already checking for a livestream.
    // In this state there should not be a reason to re-initialize the player -- it should already be in the correct
    // state.
    return;
  }
  console.log('Detected livestream completion. Switching to VOD playback.');

  // Enable looping of media.
  playerInstance.setConfig({repeat: true});
  // Reload the VOD playlist.
  playerInstance.load(VOD_CONFIG.playlist);
  if (channelId) {
    // Start checking for a new event.
    checkChannelStatus();
  }
  playerInstance.play();
}

/**
 * Periodically checks whether the specified livestream channel is available, and if it is, configures the player
 * to start playing it.
 */
function checkChannelStatus() {
  if (!intervalId) {
    console.log(`Waiting for Live Channel ${channelId} to become active.`);
    // Make sure to execute this method every UPDATE_FREQUENCY milliseconds.
    intervalId = setInterval(checkChannelStatus, UPDATE_FREQUENCY);
  }
  getChannelStatus(channelId).then((channelStatus) => {
    console.log(`Received channel status: %O`, channelStatus);
    if (channelStatus['status'] === 'active') {
      // Determine the id of the active event based on the returned status.
      const eventId = channelStatus['current_event'];

      // Check if we have seen this eventId before.
      if (currentEventId === eventId) {
        // The eventId returned by the API was not a *new* event id.
        // Ignore it and continue polling until we see a new id.
        return;
      }
      currentEventId = eventId;

      // Stop polling the channel status.
      intervalId = clearInterval(intervalId);

      // Attempt to configure the player in order to start livestream playback.
      configurePlayer(eventId).catch((error) => {
        console.log(`Failed to start live event stream playback: ${error}`);
      });
    }
  }, (error) => {
    console.log(`Unable to fetch the channel status for ${channelId}: ${error}`);
    // If we fail to retrieve the channel status, then give up.
    intervalId = clearInterval(intervalId);
  });
}

/**
 * (Re-)configures the active playerInstance to play the livestream identified by eventId.
 */
async function configurePlayer(eventId) {
  // There may be a slight delay between the livestream becoming available, and its playlist to become available.
  // Therefore, we first attempt to fetch the playlist for the new live event, as soon as we have successfully fetched
  // a playlist, we will load it on the player and start playback of the livestream.
  let playlist;
  let attempts = 0;
  console.log(`Fetching playlist for ${eventId}.`);
  while (!playlist) {
    try {
      playlist = await getPlaylist(eventId);
    } catch (e) {
      ++attempts;
      console.error(e);
      if (attempts >= MAX_RETRIES) {
        // Manually set up the player if we were not able to retrieve the playlist after 3 retries
        console.log('Configuring Player with m3u8');
        playlist = {
          'playlist': [{
            'mediaid': eventId,
            'file': `https://cdn.jwplayer.com/live/events/${eventId}.m3u8`
          }]
        };
        break;
      }
      // Retry with exponential backoff, i.e. first retry after 5, 10, 20, 40, 80 seconds
      // after which we ultimately give up.
      await sleep(2 ** (attempts - 1) * 5 * 1000);
    }
  }

  // Once a playlist is available, use it to configure the player.
  playerInstance.setConfig({
    repeat: false,
  });
  playerInstance.load(playlist.playlist);
  // Start playback
  playerInstance.play();
  console.log(`Playing live event stream with id '${eventId}'.`);
}

/**
 * Utility function to fetch a JSON document.
 * @param url
 */
async function fetchJSON(url, init) {
  return await fetch(url, init)
    .then((response) => {
      if (!response.ok) {
        throw new Error(`Unable to fetch ${url}: ${response.statusText}`);
      }
      return response.json();
    });
}

/**
 * Fetches the current status of a Live Channel.
 * Returns a promise that will yield the status for a particular channel.
 *
 * @param channelId The channel to fetch the status for.
 */
function getChannelStatus(channelId) {
  return fetchJSON(`https://cdn.jwplayer.com/live/channels/${channelId}.json`);
}

/**
 * Fetches a JW Platform feed for a particular media item.
 *
 * @param mediaId The media id to fetch a single item playlist for.
 */
function getPlaylist(mediaId) {
  return fetchJSON(`https://cdn.jwplayer.com/v2/media/${mediaId}`, { cache: "no-cache" });
}

/**
 * A simple utility method which can be used to wait for some time between retries.
 *
 * @param ms The amount of milliseconds to wait between retries.
 */
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

</script>