Utiliser le SDK IMA DAI avec un client HTML5

Lire des diffusions en direct enregistrées avec l'API Google Cloud Video Stitcher

Ce guide explique comment utiliser le SDK IMA DAI pour HTML5 pour demander et lire un flux en direct pour un événement enregistré avec l'API Google Cloud Video Stitcher, et comment insérer une coupure publicitaire pendant la lecture.

Ce guide reprend l'exemple de base tiré de la page Premiers pas ce guide pour l'insertion dynamique d'annonces.

Pour en savoir plus sur l'intégration à d'autres plates-formes ou sur l'utilisation du SDK IMA pour les SDK côté client, consultez la page SDK Interactive Media Ads.

Configurer un projet Google Cloud

Saisissez les variables suivantes à utiliser dans le SDK IMA :

Emplacement
Région Google Cloud où votre configuration en ligne a été créée: LOCATION
Numéro du projet
Numéro du projet Google Cloud utilisant l'API Video Stitcher : PROJECT_NUMBER
Jeton OAuth

Le jeton OAuth de courte durée d'un compte de service avec le rôle utilisateur "Video Stitcher" : 

OAUTH_TOKEN

En savoir plus sur de création d'identifiants éphémères comptes Google. Le jeton OAuth peut être réutilisé pour plusieurs requêtes tant qu'il n'a pas expiré.

Code de réseau

Code de réseau Ad Manager pour les demandes d'annonces: NETWORK_CODE

ID de configuration en direct
ID de configuration du direct que vous avez spécifié lors de la création de votre événement en direct: LIVE_CONFIG_ID
Clé d'élément personnalisé
Clé d'élément personnalisé Ad Manager générée lors de la création d'un la configuration d'un événement diffusé en direct avec l'API Video Stitcher: CUSTOM_ASSET_KEY

Configurer un environnement de développement

Les exemples d'applications IMA ne présentent que des requêtes de flux HLS. Vous pouvez toujours utiliser des flux DASH lors de la création de la classe VideoStitcherLiveStreamRequest. Lorsque vous configurez votre lecteur compatible avec DASH, vous devez configurer un écouteur pour les événements de progression de votre lecteur vidéo, qui peut fournir les métadonnées de la vidéo à StreamManager.processMetadata(). Cette fonction prend en compte trois paramètres :

  1. type: chaîne qui doit être définie sur 'ID3' pour les flux HLS et 'urn:google:dai:2018' pour les flux DASH.

  2. data: pour les messages d'événement DASH, il s'agit de la chaîne de données du message.

  3. timestamp : nombre correspondant à l'heure de début du message d'événement pour les flux DASH.

Envoyez les métadonnées dès que possible et aussi souvent que possible les événements de votre lecteur. Si sont manquantes ou incorrectes, le SDK IMA DAI peut ne pas déclencher d'événements d'annonce, entraînant des événements d'annonce mal signalés.

Téléchargez les exemples d'annonces display interactives IMA pour HTML5 et extrayez l'exemple simple HLS.js dans un nouveau dossier. Cet exemple est une application Web que vous pouvez héberger en local à des fins de test.

Pour héberger l'exemple localement, accédez au nouveau dossier et exécutez la commande Python suivante pour démarrer un serveur Web :

python3 -m http.server 8000

http.server n'est disponible que dans Python 3.x. Vous pouvez utiliser n'importe quel autre serveur Web, comme le serveur HTTP Apache ou Node.js.

Ouvrez un navigateur Web et accédez à localhost:8000 pour afficher un lecteur vidéo. Votre navigateur doit être compatible avec le fichier HLS.js. bibliothèque.

Si tout fonctionne correctement, un clic sur le bouton Play du lecteur vidéo lance le court-métrage "Tears of Steel" après une courte annonce. Ce contenu est diffusé à l'aide d'un flux de vidéo à la demande (VOD).

Demander une diffusion en direct

Pour remplacer l'exemple de flux VOD par votre flux en direct, utilisez la classe VideoStitcherLiveStreamRequest, qui crée automatiquement une session publicitaire avec Google Ad Manager. Vous pouvez Utiliser l'interface utilisateur de Google Ad Manager pour localiser les sessions d'insertion dynamique d'annonce générées à des fins de surveillance et de débogage

Dans l'exemple existant, il existe des fonctions permettant de demander un flux VOD ou un flux en direct. Pour qu'il fonctionne avec l'API Google Cloud Video Stitcher, vous devez ajouter une fonction pour renvoyer un objet VideoStitcherLiveStreamRequest.

Exemple :

// 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 = 'CUSTOM_ASSET_KEY';

  streamManager.requestStream(streamRequest);
}

Pour les tests locaux, si les fichiers de diffusion en direct se trouvent dans un bucket Cloud Storage, vous devez activer CORS pour l'origine http://localhost:8000.

Actualisez la page. Vous pouvez ensuite demander et diffuser des diffusions en direct personnalisées.

(Facultatif) Ajouter des options de session de streaming

Personnalisez votre requête de flux en ajoutant des options de session pour remplacer la configuration par défaut de l'API Cloud Video Stitcher à l'aide de VideoStitcherLiveStreamRequest.videoStitcherSessionOptions. Si vous fournissez une option non reconnue, L'API Video Stitcher renvoie une erreur HTTP 400. Pour obtenir de l'aide, consultez le guide de dépannage.

Par exemple, vous pouvez remplacer les options de fichier manifeste avec l'extrait de code suivant, qui demande deux fichiers manifestes de flux avec des rendus triés du débit le plus bas au plus élevé.

...

// The following session options are examples. Use session options
// that are compatible with your video stream.
streamRequest.videoStitcherSessionOptions = {
  "manifestOptions": {
    "includeRenditions": [
      {"bitrateBps": 3000, "codecs": "hvc1.1.4.L126.B0, mp4a.40.2"},
      {"bitrateBps": 2000, "codecs": "avc1.64001f, mp4a.40.2"},
    ],
    "bitrateOrder": "ascending"
  }
};

streamManager.requestStream(streamRequest);

Insérer une coupure publicitaire

L'API Google Cloud Video Stitcher insère les annonces extraites du tag d'emplacement publicitaire pour chaque la coupure publicitaire. Les coupures publicitaires sont indiquées dans le fichier manifeste à l'aide de repères d'annonce. Les marqueurs d'annonces sont insérés par l'encodeur de diffusion en direct.

L'annonce est diffusée immédiatement après l'insertion de la coupure publicitaire.

Effectuer un nettoyage

Maintenant que vous avez organisé une diffusion en direct à l'aide de l'API Google Cloud Video Stitcher et en utilisant le SDK IMA DAI pour HTML5, il est important de supprimer toute diffusion ressources.

Suivez le nettoyage de la diffusion en direct pour supprimer les ressources et les éléments inutiles.

Enfin, dans la fenêtre de terminal où vous avez démarré le serveur Web Python 3, utilisez la commande ctrl+C pour arrêter le serveur local.

Précédent
Chromecast
Suivant
iOS