Ce guide explique comment lire un flux d'insertion dynamique d'annonce à l'aide du SDK IMA CAF DAI. Si vous souhaitez consulter ou suivre un exemple d'intégration terminé, téléchargez-le.
Avant d'utiliser ce guide, veillez à vous familiariser avec le protocole WebReceiver (récepteur d'applications Chromecast) du Chromecast. Ce guide part du principe que vous possédez des connaissances de base des concepts de récepteur CAF, tels que les intercepteurs de messages et les objets mediaInformation, et que vous savez utiliser l'outil de commande et de contrôle Cast pour émuler un expéditeur CAF.
Pour utiliser l'insertion dynamique d'annonce IMA, vous devez disposer d'un compte Ad Manager 360. Si vous possédez un compte Ad Manager, contactez votre responsable de compte pour en savoir plus. Pour en savoir plus sur l'inscription à Ad Manager, consultez le Centre d'aide Ad Manager.
Présentation de l'insertion dynamique d'annonce CAF
L'implémentation de l'insertion dynamique d'annonce à l'aide du SDK IMA CAF DAI implique deux composants principaux, présentés dans ce guide:
StreamRequest: objet qui définit une demande de flux à envoyer aux serveurs publicitaires de Google. Il existe deux types de requêtes StreamRequest :LiveStreamRequest: permet de spécifier une clé d'élément, une clé API facultative, ainsi que d'autres paramètres facultatifs.VODStreamRequest: permet de spécifier un ID de source de contenu, un ID vidéo, une clé API facultative, ainsi que d'autres paramètres facultatifs.
StreamManager: objet qui gère la communication entre le flux vidéo et le SDK IMA DAI, comme le déclenchement des pings de suivi et le transfert des événements de flux à l'éditeur.
Conditions préalables
Avant de commencer, vous avez besoin des éléments suivants :
- Un compte Console pour les développeurs Cast avec un appareil de test enregistré
- Une application réceptrice Web hébergée, enregistrée auprès de la console développeur Cast et pouvant être modifiée pour héberger le code fourni par ce guide.
- Application d'envoi configurée pour utiliser votre application de récepteur Web. Pour les besoins de cet exemple, nous utiliserons l'outil de commande et de contrôle Cast comme expéditeur.
1. Configurer les objets MediaInfo de l'expéditeur
Commencez par configurer l'objet MediaInfo de votre application émettrice afin d'inclure les champs suivants:
| contentId | Identifiant unique de cet élément multimédia | |
| contentUrl | URL du flux de remplacement à charger si la demande StreamRequest pour l'insertion dynamique d'annonce échoue pour une raison quelconque | |
| streamType | Pour les diffusions en direct, cette valeur doit être définie sur "LIVE". Pour les flux de VOD, cette valeur doit être définie sur "BUFFERED". | |
| customData | assetKey | Diffusions en direct uniquement. Identifie la diffusion en direct à charger. |
| contentSourceId | Diffusions à la demande uniquement. Identifie le flux média contenant le flux demandé. | |
| videoId | Diffusions à la demande uniquement. Identifie le flux demandé dans le flux média spécifié. | |
| ApiKey | Clé API facultative qui peut être requise pour récupérer l'URL du flux à partir du SDK IMA pour l'insertion dynamique d'annonce. | |
| senderCanSkip | Valeur booléenne indiquant au destinataire si l'appareil émetteur peut afficher un bouton "Ignorer", ce qui permet la prise en charge des annonces désactivables. | |
Pour configurer ces valeurs dans l'outil de contrôle et de commande cast, cliquez sur l'onglet "Load Media" (Charger le média), puis définissez le type de requête de chargement personnalisé sur "LOAD". Remplacez ensuite les données JSON dans la zone de texte par l'un des objets JSON suivants:
EN DIRECT
{
"media": {
"contentId": "bbb",
"contentUrl": "https://storage.googleapis.com/interactive-media-ads/media/bbb.m3u8",
"streamType": "LIVE",
"customData": {
"assetKey": "sN_IYUG8STe1ZzhIIE_ksA",
"ApiKey": "",
"senderCanSkip": true
}
},
"credentials": "testCredentials"
}
VOD
{
"media": {
"contentId": "tos",
"contentUrl": "https://storage.googleapis.com/interactive-media-ads/media/tos.m3u8",
"streamType": "BUFFERED",
"customData": {
"contentSourceId": "2528370",
"videoId": "tears-of-steel",
"ApiKey": "",
"senderCanSkip": true
}
},
"credentials": "testCredentials"
}
Cet objet de requête de chargement personnalisé peut être envoyé au récepteur pour tester chaque étape ci-dessous
2. Créer un récepteur CAF de base
En suivant le guide de base du récepteur du SDK CAF, créez un récepteur Web de base.
Le code de votre récepteur doit se présenter comme suit:
<html>
<head>
<script type="text/javascript"
src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js">
</script>
</head>
<body>
<cast-media-player></cast-media-player>
<script>
cast.framework.CastReceiverContext.getInstance().start();
</script>
</body>
</html>
3. Importer le SDK IMA DAI et obtenir le gestionnaire de lecteurs
Ajoutez un tag de script pour importer le SDK IMA DAI pour CAF dans votre récepteur Web, juste après le chargement de CAF par le script. Le SDK d'insertion dynamique d'annonce CAF est intemporel. Vous n'avez donc pas besoin de définir une version spécifique. Ensuite, dans le tag de script ci-dessous, stockez le contexte du récepteur et le gestionnaire de joueurs en tant que constantes avant de démarrer le récepteur.
<html>
<head>
<script type="text/javascript"
src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
<script src="//imasdk.googleapis.com/js/sdkloader/cast_dai.js"></script>
</head>
<body>
<cast-media-player></cast-media-player>
<script>
const castContext = cast.framework.CastReceiverContext.getInstance();
const playerManager = castContext.getPlayerManager();
castContext.start();
</script>
</body>
</html>
4. Initialiser IMA Stream Manager
Initialisez le gestionnaire de flux du SDK d'insertion dynamique d'annonce CAF.
<html>
<head>
<script type="text/javascript"
src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
<script src="//imasdk.googleapis.com/js/sdkloader/cast_dai.js"></script>
</head>
<body>
<cast-media-player></cast-media-player>
<script>
const castContext = cast.framework.CastReceiverContext.getInstance();
const playerManager = castContext.getPlayerManager();
const streamManager = new google.ima.cast.dai.api.StreamManager();
castContext.start();
</script>
</body>
</html>
5. Créer l'intercepteur de messages de chargement
Le SDK d'insertion dynamique d'annonce CAF utilise l'intercepteur de messages de chargement CAF pour effectuer des requêtes de flux et remplacer l'URL de contenu par le flux final d'insertion dynamique d'annonce. L'intercepteur de messages appelle streamManager.requestStream(), qui gère la configuration des coupures publicitaires, demande le flux et remplace l'URL de contenu existante.
<html>
<head>
<script type="text/javascript"
src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
<script src="//imasdk.googleapis.com/js/sdkloader/cast_dai.js"></script>
</head>
<body>
<cast-media-player></cast-media-player>
<script>
const castContext = cast.framework.CastReceiverContext.getInstance();
const playerManager = castContext.getPlayerManager();
const streamManager = new google.ima.cast.dai.api.StreamManager();
const getStreamRequest = (request) => null;
playerManager.setMessageInterceptor(
cast.framework.messages.MessageType.LOAD, (request) => {
return streamManager.requestStream(request, getStreamRequest(request))
.then((request) => {
this.broadcast('Stream request successful.');
return Promise.resolve(request);
})
.catch((error) => {
this.broadcast('Stream request failed.');
return Promise.resolve(request);
});
});
castContext.start();
</script>
</body>
</html>
6. Créer la demande de flux
Pour intégrer l'insertion dynamique d'annonce CAF, vous devez créer votre demande de flux à l'aide des données incluses dans l'objet mediaInfo de l'expéditeur.
<html>
<head>
<script type="text/javascript"
src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
<script src="//imasdk.googleapis.com/js/sdkloader/cast_dai.js"></script>
</head>
<body>
<cast-media-player></cast-media-player>
<script>
const castContext = cast.framework.CastReceiverContext.getInstance();
const playerManager = castContext.getPlayerManager();
const streamManager = new google.ima.cast.dai.api.StreamManager();
const getStreamRequest = (request) => {
const imaRequestData = request.media.customData;
let streamRequest = null;
if (imaRequestData.assetKey) {
// Live stream
streamRequest = new google.ima.cast.dai.api.LiveStreamRequest();
streamRequest.assetKey = imaRequestData.assetKey;
} else if (imaRequestData.contentSourceId) {
// VOD stream
streamRequest = new google.ima.cast.dai.api.VODStreamRequest();
streamRequest.contentSourceId = imaRequestData.contentSourceId;
streamRequest.videoId = imaRequestData.videoId;
}
if (streamRequest && imaRequestData.ApiKey) {
streamRequest.ApiKey = imaRequestData.ApiKey;
}
if (streamRequest && imaRequestData.senderCanSkip) {
streamRequest.senderCanSkip = imaRequestData.senderCanSkip;
}
return streamRequest;
};
playerManager.setMessageInterceptor(
cast.framework.messages.MessageType.LOAD, (request) => {
return streamManager.requestStream(request, getStreamRequest(request))
.then((request) => {
return Promise.resolve(request);
})
.catch((error) => {
this.broadcast('Stream request failed.');
return Promise.resolve(request);
});
});
castContext.start();
</script>
</body>
</html>
... et voilà ! Vous pouvez désormais demander et lire des flux d'insertion dynamique d'annonce à l'aide du SDK d'insertion dynamique d'annonce de Google. Pour en savoir plus sur les fonctionnalités avancées du SDK, consultez les autres guides ou téléchargez nos exemples d'applications de récepteur.