No public description

PiperOrigin-RevId: 590633802
googleads · Dec 13, 2023 · ff53c2d · ff53c2d
1 parent acfbb0c
commit ff53c2d
Show file tree

Hide file tree

Showing 3 changed files with 108 additions and 15 deletions.
diff --git a/podserving/hls_js/index.html b/podserving/hls_js/index.html
@@ -25,6 +25,15 @@ <h1>Pod Serving Sample (<span id="playbackMethod">Unknown</span>)</h1>
       <span>API Key:</span>
       <input id="api-key" type="text" value="">
     </label>
+    <label>
+      <span>Pod request type:</span>
+      <div id="request-type">
+        <label for="live-stream-request">Live stream request</label>
+        <input type="radio" id="live-stream-request" name="request-type" value="live" checked />
+        <label for="vod-stream-request">VOD stream request</label>
+        <input type="radio" id="vod-stream-request" name="request-type" value="vod" />
+      </div>
+    </label>
     <button id="request-pod">Request Stream</button>
     <hr>
     <div id="video-container">

diff --git a/podserving/hls_js/player.js b/podserving/hls_js/player.js
@@ -1,13 +1,17 @@
 let adPlaying = false;
 let hls;
 let streamManager;
+let isVodStream;
+let streamId;
 
 const pmElement = document.getElementById('playbackMethod');
 
 const streamUrl = document.getElementById('stream-manifest');
 const netcode = document.getElementById('network-code');
 const assetkey = document.getElementById('custom-asset-key');
 const apikey = document.getElementById('api-key');
+const liveStreamButton = document.getElementById('live-stream-request');
+const vodStreamButton = document.getElementById('vod-stream-request');
 const requestButton = document.getElementById('request-pod');
 
 const adUiElement = document.getElementById('video-ad-ui');
@@ -24,18 +28,44 @@ function init() {
     pmElement.textContent = 'HLS.js';
   }
 
+  // Clear the stream parameters when switching stream types.
+  liveStreamButton.addEventListener('click', clearStreamParameters);
+  vodStreamButton.addEventListener('click', clearStreamParameters);
+
   requestButton.onclick = (e) => {
     e.preventDefault();
     if (!netcode.value || !assetkey.value || !streamUrl.value) {
       logText('ERROR: Network Code, Asset Key, and Stream URL are required');
       setStatus('Error');
       return;
     }
-    logText('Requesting PodServing Stream');
-    requestPodStream(netcode.value, assetkey.value, apikey.value);
+
+    initiateStreamManager();
+    // clear HLS.js instance, if in use.
+    hls?.destroy();
+
+    if (liveStreamButton.checked) {
+      logText('Requesting PodServing Live Stream');
+      requestPodLiveStream(netcode.value, assetkey.value, apikey.value);
+      isVodStream = false;
+    } else {
+      logText('Requesting PodServing VOD Stream');
+      requestPodVodStream(netcode.value, assetkey.value, apikey.value);
+      isVodStream = true;
+    }
   };
 }
 
+/**
+ * Clears the stream parameter input fields.
+ */
+function clearStreamParameters() {
+  streamUrl.value = '';
+  netcode.value = '';
+  assetkey.value = '';
+  apikey.value = '';
+}
+
 /**
  * Check browser for HLS support
  * @return {boolean} is the browser safari.
@@ -48,12 +78,9 @@ function useNativePlayer() {
 }
 
 /**
- * Request the pod stream from Google.
- * @param {string} networkCode - the network code.
- * @param {string} customAssetKey - the asset key.
- * @param {string} apiKey - the api key (optional).
+ * Creates the IMA StreamManager and sets ad event listeners.
  */
-function requestPodStream(networkCode, customAssetKey, apiKey) {
+function initiateStreamManager() {
   // generate a stream manager, on first request
   if (!streamManager) {
     streamManager =
@@ -77,19 +104,36 @@ function requestPodStream(networkCode, customAssetKey, apiKey) {
         ],
         onStreamEvent, false);
   }
-  // clear HLS.js instance, if in use
-  if (hls) {
-    hls.destroy();
-  }
+}
 
-  // Generate a PodServing Stream Request
+/**
+ * Request a pod livestream from Google.
+ * @param {string} networkCode - the network code.
+ * @param {string} customAssetKey - the asset key.
+ * @param {string} apiKey - the api key (optional).
+ */
+function requestPodLiveStream(networkCode, customAssetKey, apiKey) {
   const streamRequest = new google.ima.dai.api.PodStreamRequest();
   streamRequest.networkCode = networkCode;
   streamRequest.customAssetKey = customAssetKey;
   streamRequest.apiKey = apiKey;
   streamManager.requestStream(streamRequest);
 }
 
+/**
+ * Request a pod VOD stream from Google.
+ * @param {string} networkCode - the network code.
+ * @param {string} customAssetKey - the asset key.
+ * @param {string} apiKey - the api key (optional).
+ */
+function requestPodVodStream(networkCode, customAssetKey, apiKey) {
+  const streamRequest = new google.ima.dai.api.PodVodStreamRequest();
+  streamRequest.networkCode = networkCode;
+  streamRequest.customAssetKey = customAssetKey;
+  streamRequest.apiKey = apiKey;
+  streamManager.requestStream(streamRequest);
+}
+
 /**
  * Handle stream events
  * @param {!Event} e - the event object
@@ -99,10 +143,36 @@ function onStreamEvent(e) {
     // Once PodServing stream is initialized, build request
     // for the video stream, including the podserving stream id
     case google.ima.dai.api.StreamEvent.Type.STREAM_INITIALIZED:
-      const streamId = e.getStreamData().streamId;
+      streamId = e.getStreamData().streamId;
       logText('Stream initialized: ' + streamId);
-      const url = buildStreamURL(streamId);
-      loadStream(url);
+      if (isVodStream) {
+        // For VOD streams, IMA requires a call to
+        // StreamManager.loadStreamMetadata() in response to getting the
+        // stream request URL from the video technology partner (VTP) you are
+        // using. It will be similar to this code snippet, but may vary
+        // depending on your VTP.
+        //
+        // vtpInterface.requestStreamURL({
+        //   'streamId': streamId,
+        // })
+        // .then( () => {
+        //   streamManager.loadStreamMetadata();
+        // }, (error) => {
+        //   // Handle the error.
+        // });
+        console.error('VOD stream error: You will need to edit the code to ' +
+                    'make a call to streamManager.loadStreamMetadata() once ' +
+                    'you get the stream URL from your VTP.');
+      } else {
+        const url = buildStreamURL(streamId);
+        loadStream(url);
+      }
+      break;
+    case google.ima.dai.api.StreamEvent.Type.LOADED:
+      if (isVodStream) {
+        const url = buildStreamURL(streamId);
+        loadStream(url);
+      }
       break;
     // Log Errors
     case google.ima.dai.api.StreamEvent.Type.ERROR:

diff --git a/podserving/hls_js/styles.css b/podserving/hls_js/styles.css
@@ -35,6 +35,20 @@ button {
   cursor: pointer;
 }
 
+#request-type {
+  display: block;
+}
+
+#request-type label {
+  display: inline-block;
+}
+
+#request-type input {
+  display: inline-block;
+  width: auto;
+  margin-right: 30px;
+}
+
 #video-container {
   position: relative;
   padding-bottom: 56.25%;