Play live streams registered with the Google Cloud Video Stitcher API

This guide demonstrates how to use the IMA DAI SDK for HTML5 to request and play a live stream for an event registered with the Google Cloud Video Stitcher API, and how to insert an ad break during playback.

This guide expands on the basic example from the Get started guide for IMA DAI.

For information on integrating with other platforms or on using the IMA client-side SDKs, see Interactive Media Ads SDKs.

Set up a Google Cloud project

Set up a Google Cloud project and configure service accounts to access the project.

Register a live stream event using your own content live stream or a test live stream. This guide expects an HLS stream.

Enter the following variables for use in the IMA SDK:

Location

The Google Cloud region where your live config was created: LOCATION

Project number

The Google Cloud project number using the Video Stitcher API: PROJECT_NUMBER

OAuth token

A service account's short lived OAuth token with the Video Stitcher user role:

OAUTH_TOKEN

Read more about creating short-lived credentials for service accounts. The OAuth token can be reused across multiple requests as long as it has not expired.

Network code

The Ad Manager network code for requesting ads: NETWORK-CODE

Live config ID

The live config ID you specified when creating your live stream event: LIVE_CONFIG_ID

Custom asset key

The Ad Manager custom asset key generated during the process of registering a live stream event with the Video Stitcher API: ASSET_KEY

Host the HLS example

Download the IMA DAI examples for HTML5 and extract the HLS.js Simple sample into a new folder. This example is a web app that you can host locally for testing purposes.

To host the example locally, navigate to the new folder, and run the following python command to start a web server:

python3 -m http.server 8000

http.server is only available in Python 3.x. You can use any other web server, such as the Apache HTTP Server or Node JS.

Open a web browser and navigate to localhost:8000 to see a video player.

If everything is working properly, clicking the play button on the video player begins the short film "Tears of Steel" after a short ad. This content is delivered using a video on demand (VOD) stream.

Request a live stream

To replace the sample VOD stream with your live stream, use the VideoStitcherLiveStreamRequest class that automatically creates an ad session with Google Ad Manager. You can use the Google Ad Manager UI to locate the generated DAI sessions for monitoring and debugging.

In the existing sample, there are functions for requesting a VOD stream or a live stream. To make it work with the Google Cloud Video Stitcher API, you need to add a new function to return a VideoStitcherLiveStreamRequest object.

Here's an example:

...
// StreamManager which will be used to request ad-enabled streams.
let streamManager;
...

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(
    videoElement,
    adUiElement
  );
  streamManager.addEventListener(
      [
        google.ima.dai.api.StreamEvent.Type.LOADED,
        google.ima.dai.api.StreamEvent.Type.ERROR,
        google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
        google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED
      ],
      onStreamEvent, false);

  hls.on(Hls.Events.FRAG_PARSING_METADATA, function(event, data) {
    if (streamManager && data) {
      // For each ID3 tag in our metadata, we pass in the type - ID3, the
      // tag data (a byte array), and the presentation timestamp (PTS).
      data.samples.forEach(function(sample) {
        streamManager.processMetadata('ID3', sample.data, sample.pts);
      });
    }
  });

  videoElement.addEventListener('pause', () => {
    playButton.style.display = 'block';
  });

  playButton.addEventListener('click', initiatePlayback);
}

function initiatePlayback() {
  requestVideoStitcherStream();

  playButton.style.display = "none";
  playButton.removeEventListener('click', initiatePlayback);
  playButton.addEventListener('click', resumePlayback);
}
...

function requestVideoStitcherStream() {
  const streamRequest = new google.ima.dai.api.VideoStitcherLiveStreamRequest();
  streamRequest.liveStreamEventId =
      'LIVE_CONFIG_ID';
  streamRequest.region =
      'LOCATION';
  streamRequest.projectNumber =
      'PROJECT_NUMBER';
  streamRequest.oAuthToken =
      'OAUTH_TOKEN';
  streamRequest.networkCode =
      'NETWORK_CODE';
  streamRequest.customAssetKey =
      'ASSET_KEY';

  streamManager.requestStream(streamRequest);
}
...

For local testing, if the live stream files are located in a Cloud Storage bucket, then you need to enable CORS for origin http://localhost:8000.

Reload the page. Then, you can request and play custom live stream.

Insert an ad break

While playing your custom live stream, try inserting an ad break channel event using the Google Cloud Live Stream API. The ad break should be inserted and played immediately.

Clean up

Now that you have successfully hosted a live stream using the Google Cloud Video Stitcher API and requested it using the IMA DAI SDK for HTML5, it's important to clean up any serving resources.

Follow the Unregister live stream events guide to end your live stream event.

Finally, in the terminal window where you started the Python 3 web server, use the command ctrl+C to end the local server.