Cette page a été traduite par l'API Cloud Translation.

Premiers pas

Ce guide explique comment lire un flux d'insertion dynamique d'annonce à l'aide du SDK IMA pour l'insertion dynamique d'annonce. Si vous souhaitez consulter ou suivre un exemple d'intégration terminé, téléchargez l'exemple.

Avant d'utiliser ce guide, veillez à vous familiariser avec le protocole Web receiver receiver du framework d'application Chromecast. Ce guide suppose un niveau de connaissance de base des concepts du récepteur CAF, comme les intercepteurs de messages et les objets mediaInformation, ainsi que l'utilisation de l'outil Cast Command and Control 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 avez un compte Ad Manager, contactez-le 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 implique deux composants principaux, comme indiqué dans ce guide:

StreamRequest: objet qui définit une demande de flux auprès des serveurs publicitaires de Google. Il existe deux types de StreamRequests :
- LiveStreamRequest: spécifie une clé d'élément, une clé API facultative, ainsi que d'autres paramètres facultatifs.
- VODStreamRequest: spécifie 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 pour l'insertion dynamique d'annonce, comme le déclenchement de 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é
Application récepteur Web hébergée et enregistrée dans votre Play Console et pouvant être modifiée pour héberger le code fourni dans ce guide.
Application d'envoi configurée pour utiliser votre application récepteur Web. Pour cet exemple, nous utiliserons l'outil de commande et de diffusion Cast en tant qu'expéditeur.

1. Configurer les objets MediaInfo de l'expéditeur

Commencez par configurer l'objet MediaInfo de votre application d'expéditeur de manière à inclure les champs suivants:

ID du contenu		Identifiant unique de cet élément multimédia.
URL du contenu		URL du flux de remplacement à charger en cas d'échec de la demande de flux d'insertion dynamique d'annonce.
streamType		Pour les diffusions en direct, cette valeur doit être définie sur "LIVE". Pour les flux de vidéo à la demande, cette valeur doit être définie sur "BUFFERED"
customData	clé d'élément	Diffusions en direct uniquement. Identifie la diffusion en direct à charger
	contentSourceId (ID du contenu source)	Streaming à la demande uniquement. Identifie le flux multimédia contenant le flux demandé.
	ID vidéo	Streaming à la demande uniquement. Identifie le flux demandé dans le flux multimédia spécifié.
	Clé d'API	Une clé API facultative pouvant être requise pour récupérer l'URL du flux à partir du SDK IMA DAI.
	senderCanSkip	Valeur booléenne indiquant au destinataire si l'appareil émetteur peut afficher un bouton "Ignorer", ce qui permet de prendre en charge les annonces désactivables

Pour configurer ces valeurs dans l'outil de commande et de diffusion Cast, cliquez sur l'onglet "Charger un contenu multimédia", puis définissez le type de demande de chargement personnalisé sur "LOAD" (Charger). 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 destinataire pour qu'il teste chaque étape ci-dessous

2. Créer un récepteur CAF de base

Conformément au guide du destinataire basique du SDK CAF, créez un récepteur Web de base.

Le code du destinataire 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 pour l'insertion dynamique d'annonce et obtenir le gestionnaire de joueurs

Ajoutez un tag de script pour importer le SDK IMA DAI pour CAF dans votre récepteur Web, juste après le chargement du script CAF. Le SDK d'insertion dynamique d'annonce CAF est intemporel. Il n'est donc pas nécessaire de définir une version spécifique. Ensuite, dans la balise 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 le gestionnaire de flux IMA

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 des messages de chargement

Le SDK d'insertion dynamique d'annonce de CAF utilise l'intercepteur de message de chargement CAF pour effectuer les requêtes de flux et remplacer l'URL de contenu par le flux d'insertion dynamique d'annonce final. L'intercepteur de message appelle streamManager.requestStream(), qui gère la définition 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 terminer l'intégration de l'insertion dynamique d'annonce CAF, vous devez créer votre demande de flux en utilisant les 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 maintenant demander et lire des flux d'insertion dynamique d'annonce avec le SDK CAF de l'insertion dynamique d'annonce de Google. Pour en savoir plus sur les fonctionnalités plus avancées du SDK, consultez les autres guides ou téléchargez nos exemples d'applications récepteurs.