Utiliser le SDK IMA DAI avec un client HTML5

Lire des flux VOD enregistrés avec l'API Google Cloud Video Stitcher

Ce guide explique comment utiliser le SDK IMA DAI pour HTML5 pour demander et lire une session de streaming VOD Google Cloud.

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 des SDK côté client IMA, 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 dans laquelle votre configuration VOD 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

Découvrez comment créer des jetons OAuth éphémères. Le jeton OAuth peut être réutilisé pour plusieurs requêtes tant qu'il n'a pas est arrivé à expiration.

Code de réseau

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

ID de configuration de la vidéo à la demande

ID de configuration VOD du flux VOD : VOD_CONFIG_ID

Pour en savoir plus sur la création de l'ID de configuration de vidéo à la demande, consultez la section Cloud Suding create a guide de configuration pour la vidéo à la demande.

Configurer un environnement de développement

Les applications exemples IMA n'illustrent que les demandes de flux HLS. Vous pouvez toujours utiliser DASH. lors de la création de la classe VideoStitcherVodStreamRequest. Quand ? configuré votre lecteur compatible DASH, vous devez configurer un écouteur pour votre les événements de progression du lecteur vidéo pouvant fournir les métadonnées de la vidéo à StreamManager.processMetadata() Cette fonction nécessite trois paramètres:

  1. type : chaîne qui doit être définie sur 'ID3' pour les flux HLS et sur '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: un nombre correspondant à l'heure de début du message d'événement pour DASH flux.

Envoyez les métadonnées dès que possible et aussi souvent que possible, en fonction des événements de vos joueurs. Si les métadonnées sont manquantes ou incorrectes, le SDK IMA DAI peut ne pas déclencher d'événements d'annonces, ce qui entraîne des événements d'annonces mal signalés.

Téléchargez les exemples d'insertion dynamique d'annonces IMA pour HTML5, puis extrayez le fichier hls_js/simple 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 en local, accédez au nouveau dossier et exécutez la commande suivante : Python 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 la bibliothèque HLS.js.

Si tout fonctionne correctement, le court-métrage "Tears of Steel" commence à être diffusé en cliquant sur le bouton Play (Lecture) du lecteur vidéo, avec des coupures publicitaires toutes les 30 secondes.

Demander un flux de vidéo à la demande

Pour remplacer l'exemple de flux par votre flux de vidéo à la demande assemblée avec votre annonce, utilisez le VideoStitcherVodStreamRequest pour créer 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.

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

Exemple :

// StreamManager which will be used to request DAI 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() {
  requestVodVideoStitcherStream();

  playButton.style.display = "none";
  playButton.removeEventListener('click', initiatePlayback);
  playButton.addEventListener('click', resumePlayback);
}
...
function requestVodVideoStitcherStream() {
  const streamRequest = new google.ima.dai.api.VideoStitcherVodStreamRequest();
  streamRequest.vodConfigId = 'VOD_CONFIG_ID';
  streamRequest.region = 'LOCATION';
  streamRequest.projectNumber = 'PROJECT_NUMBER';
  streamRequest.oAuthToken = 'OAUTH_TOKEN';
  streamRequest.networkCode = 'NETWORK_CODE';

  streamManager.requestStream(streamRequest);
}

Actualisez la page. Vous pouvez ensuite demander et lire le flux VOD personnalisé.

(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 VideoStitcherVodStreamRequest.videoStitcherSessionOptions. Si vous fournissez une option non reconnue, l'API Cloud Video Stitcher répondra par une erreur HTTP 400. Pour obtenir de l'aide, consultez le guide de dépannage.

Par exemple, vous pouvez ignorer options du fichier manifeste avec l'extrait de code suivant, qui demande deux fichiers manifestes de flux avec rendus classés du débit le plus faible au débit le 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);

Effectuer un nettoyage

Maintenant que vous avez hébergé un flux VOD à l'aide de l'API Google Cloud Video Stitcher et que vous l'avez demandé à l'aide du SDK IMA DAI pour HTML5, il est important de nettoyer toutes les ressources de diffusion.

Suivez le guide de nettoyage des contenus VOD pour supprimer toutes les ressources et composants 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