Regarder des diffusions en direct enregistrées auprès de l'API Google Cloud Video Stitcher
Ce guide explique comment utiliser le SDK IMA DAI pour HTML5 afin de demander et de lire une diffusion en direct d'un événement enregistré avec l'API Google Cloud Video Stitcher. Il explique également comment insérer une coupure publicitaire pendant la lecture.
Ce guide développe l'exemple de base du guide de démarrage pour l'insertion dynamique d'annonces IMA.
Pour en savoir plus sur l'intégration à d'autres plates-formes ou sur l'utilisation des SDK IMA 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 dans laquelle votre configuration active a été créée :
LOCATION - Numéro du projet
- Numéro de projet Google Cloud utilisant l'API Video Stitcher :
PROJECT_NUMBER - Jeton OAuth
Jeton OAuth de courte durée d'un compte de service avec le rôle utilisateur d'assembleur vidéo :
OAUTH_TOKEN
Découvrez comment créer des identifiants éphémères pour les comptes de service. 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 la configuration en ligne
- 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'une configuration pour un événement de diffusion en direct avec l'API Video Stitcher :
CUSTOM_ASSET_KEY
Configurer un environnement de développement
Les applications exemples IMA n'illustrent que les demandes de flux HLS. Vous pouvez toujours utiliser des flux DASH lorsque vous créez la classe VideoStitcherLiveStreamRequest. Lorsque vous configurez votre lecteur compatible DASH, vous devez configurer un écouteur pour les événements de progression de votre lecteur vidéo, capable de fournir les métadonnées de la vidéo à StreamManager.processMetadata().
Cette fonction nécessite trois paramètres:
type: chaîne qui doit être définie sur'ID3'pour les flux HLS et sur'urn:google:dai:2018'pour les flux DASH.data: pour les messages d'événement DASH, il s'agit de la chaîne de données du message.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 les métadonnées sont manquantes ou incorrectes, il est possible que le SDK IMA DAI ne déclenche pas d'événements d'annonce, ce qui entraîne des rapports incorrects.
Téléchargez les exemples d'insertion dynamique d'annonces IMA pour HTML5, puis extrayez l'exemple simple HLS.js dans un nouveau dossier. Cet exemple est une application Web que vous pouvez héberger localement à des fins de test.
Pour héberger l'exemple localement, accédez au nouveau dossier et exécutez la commande Python suivante afin de 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, cliquez sur le bouton de lecture du lecteur vidéo pour lancer 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 de vidéo à la demande par votre diffusion 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.
L'exemple existant contient des fonctions permettant de demander un flux de vidéo à la demande ou un flux en direct. Pour qu'elle 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 en local, si les fichiers des diffusions 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 des diffusions en direct personnalisées et les regarder.
(Facultatif) Ajouter des options de session de streaming
Personnalisez votre demande 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 Cloud 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 du fichier manifeste par l'extrait de code suivant, qui demande deux fichiers manifestes de flux avec les renvois classés du débit le plus faible au débit le plus élevé.
...
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 coupure publicitaire. Les coupures publicitaires sont indiquées dans le fichier manifeste à l'aide de repères d'annonces. Les repères d'annonce sont insérés par l'encodeur de diffusion en direct.
Si vous utilisez votre propre diffusion en direct, vous devez insérer le marqueur d'annonce. Pour en savoir plus sur les repères d'annonce HLS et DASH compatibles, consultez la documentation sur les repères d'annonce.
Si vous avez créé une diffusion en direct à l'aide de l'API Google Cloud Livestream, insérez un événement de canal de coupure publicitaire.
L'annonce est diffusée immédiatement après l'insertion de la coupure publicitaire.
Effectuer un nettoyage
Maintenant que vous avez hébergé une diffusion en direct à l'aide de l'API Google Cloud Video Stitcher et que vous l'avez demandée à l'aide du SDK IMA DAI pour HTML5, il est important de nettoyer toutes les ressources de diffusion.
Suivez le guide de 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.