Utiliser le SDK IMA DAI sur Chromecast

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

Ce guide explique comment utiliser le SDK IMA DAI pour les récepteurs Web CAF afin de demander et de lire une session de streaming VOD Google Cloud.

Ce guide complète l'exemple de base de la publicité in-stream avec service complet en ajoutant la prise en charge des flux enregistrés avec l'API Google Cloud Video Stitcher.

Remarque: Le SDK IMA DAI pour CAF est compatible avec les flux HLS et DASH, sans différences d'implémentation.

Avant de continuer, vérifiez que votre format de streaming est compatible avec les récepteurs Web CAF.

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.

Contexte

Avant d'utiliser ce guide, familiarisez-vous avec les Récepteur Web du framework d'application Chromecast standard.

Ce guide suppose que vous maîtrisez les concepts de base des récepteurs CAF, tel que message les intercepteurs, MediaInformation objets, et à l'aide de la commande et du contrôle Cast pour émuler un expéditeur CAF.

Composants et architecture de l'application

L'implémentation de la lecture de flux VOD avec l'API Google Cloud Video Stitcher avec le SDK IMA CAF DAI implique deux composants principaux, comme indiqué dans ce guide :

• VideoStitcherVodStreamRequest : objet qui définit une requête de flux vers les serveurs de Google.
• StreamManager : objet qui gère la communication entre le flux vidéo et le SDK IMA DAI, par exemple en déclenchant des pings de suivi et en transmettant des événements de flux à l'éditeur.

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

• Project Number (Numéro du projet) : numéro du projet Google Cloud utilisé par l'assembleur vidéo API.

  PROJECT_NUMBER

• Jeton OAuth : jeton OAuth de courte durée d'un compte de service avec le rôle utilisateur "Monteur vidéo". Découvrez comment créer des identifiants éphémères pour des comptes de service.

  OAUTH_TOKEN

• Network Code : code de réseau Google Ad Manager pour demander des annonces.

  NETWORK_CODE

  URL du tag d'emplacement publicitaire : URL Ad Manager du tag d'emplacement publicitaire. Pour effectuer des tests, vous pouvez utiliser la méthode Exemple d'annonce vidéo pré-roll VMAP IMA.

  AD_TAG_URI

• URL de la source du contenu : chaîne de l'URL du fichier manifeste du flux de votre vidéo à la demande. contenus.

  VOD_URI

Configurer un récepteur de cast personnalisé

Pour développer un récepteur de cast personnalisé, vous avez besoin des éléments suivants:

• Un compte Console de développement Cast avec d'appareils de test figurant dans une liste d'autorisation.

• Une application de récepteur Web hébergée enregistrée dans votre console développeur Cast et pouvant être modifiée pour héberger le code fourni dans ce guide.

• Une application d'envoi configurée pour utiliser votre application réceptrice Web. Aux fins de Dans cet exemple, ce guide utilise la commande et le contrôle Cast en tant qu'expéditeur.

Préparer un expéditeur à transmettre des données de flux au destinataire

Commencez par configurer votre application d'envoi pour qu'elle envoie une requête de chargement à votre récepteur Web, contenant les champs suivants dans l'objet MediaInformation de votre plate-forme.

Champ	Sommaire
contentId	Un identifiant unique pour cet élément multimédia, tel que défini dans l'accord de diffusion documentation de référence. Cet ID ne doit pas être réutilisé pour plusieurs éléments de la même file d'attente multimédia. CONTENT_ID
contentUrl	URL du flux de sauvegarde facultatif à lire si le flux DAI ne parvient pas à se charger. BACKUP_STREAM_URL
contentType	Type MIME facultatif de l'URL du flux secondaire à lire si le flux d'insertion dynamique d'annonce lors du chargement. BACKUP_STREAM_MIMETYPE
streamType	Le littéral de chaîne ou la constante utilisés pour cette valeur varie selon l'expéditeur Google Cloud. VOD
customData	Le champ customData contient un magasin de paires clé-valeur champs obligatoires. Ici, customData contient le flux d'insertion dynamique d'annonce. les données que vous avez collectées. Champ Sommaire region LOCATION projectNumber PROJECT_NUMBER oAuthToken OAUTH_TOKEN networkCode NETWORK_CODE adTagUrl AD_TAG_URI contentSourceUrl VOD_URI

Voici quelques exemples de code pour vous aider à démarrer:

Web

Pour configurer ces valeurs dans un expéditeur Web Cast, créez d'abord un MediaInfo avec les données requises, puis effectuez un chargement Cloud SQL au Web receiver.

// Create mediaInfo object
const mediaInfo = new chrome.cast.media.MediaInfo("CONTENT_ID");
mediaInfo.contentUrl = "BACKUP_STREAM_URL";
mediaInfo.contentType = "BACKUP_STREAM_MIMETYPE";
mediaInfo.streamType = chrome.cast.media.StreamType.VOD;
mediaInfo.customData = {
region: "LOCATION",
projectNumber: "PROJECT_NUMBER",
oAuthToken: "OAUTH_TOKEN",
networkCode: "NETWORK_CODE",
adTagUrl: "AD_TAG_URI"
contentSourceUrl: "VOD_URI"
};

// Make load request to cast web receiver
const castSession = cast.framework.CastContext.getInstance().getCurrentSession();
const request = new chrome.cast.media.LoadRequest(mediaInfo);
castSession.loadMedia(request).then(
  () => { console.log('Load succeed'); },
  (errorCode) => { console.log('Error code: ' + errorCode); });

Android

Pour configurer ces valeurs dans un expéditeur Web Cast, créez d'abord un Objet MediaInfo avec les données requises, puis effectuez un chargement Cloud SQL au Web receiver.

JSONObject customData = new JSONObject()
  .put("region", "LOCATION")
  .put("projectNumber", "PROJECT_NUMBER")
  .put("oAuthToken", "OAUTH_TOKEN")
  .put("networkCode", "NETWORK_CODE")
  .put("adTagUrl", "AD_TAG_URI")
  .put("contentSourceUrl", "VOD_URI");

MediaInfo mediaInfo = MediaInfo.Builder("CONTENT_ID")
  .setContentUrl("BACKUP_STREAM_URL")
  .setContentType("BACKUP_STREAM_MIMETYPE")
  .setStreamType(MediaInfo.STREAM_TYPE_VOD)
  .setCustomData(customData)
  .build();

RemoteMediaClient remoteMediaClient = mCastSession.getRemoteMediaClient();
remoteMediaClient.load(new MediaLoadRequestData.Builder().setMediaInfo(mediaInfo).build());

iOS (Obj-C)

Pour configurer ces valeurs dans un expéditeur Web Cast, créez d'abord un GCKMediaInformation avec les données requises, puis effectuez un chargement de requête au Web receiver.

NSURL url = [NSURL URLWithString:@"BACKUP_STREAM_URL"];
NSDictionary *customData = @{
  @"region": @"LOCATION",
  @"projectNumber": @"PROJECT_NUMBER",
  @"oAuthToken": @"OAUTH_TOKEN",
  @"networkCode": @"NETWORK_CODE",
  @"adTagUrl": @"AD_TAG_URI",
  @"contentSourceUrl": @"VOD_URI"
};

GCKMediaInformationBuilder *mediaInfoBuilder =
  [[GCKMediaInformationBuilder alloc] initWithContentID: @"CONTENT_ID"];
mediaInfoBuilder.contentURL = url;
mediaInfoBuilder.contentType = @"BACKUP_STREAM_MIMETYPE";
mediaInfoBuilder.streamType = GCKMediaStreamTypeNone;
mediaInfoBuilder.customData = customData;
self.mediaInformation = [mediaInfoBuilder build];

GCKRequest *request = [self.sessionManager.currentSession.remoteMediaClient loadMedia:self.mediaInformation];
if (request != nil) {
  request.delegate = self;
}

iOS (Swift)

Pour configurer ces valeurs dans un émetteur Web Cast, créez d'abord un objet GCKMediaInformation avec les données requises, puis envoyez une requête de chargement au récepteur Web.

let url = URL.init(string: "BACKUP_STREAM_URL")
guard let mediaURL = url else {
  print("invalid mediaURL")
  return
}

let customData = [
  "region": "LOCATION",
  "projectNumber": "PROJECT_NUMBER",
  "oAuthToken": "OAUTH_TOKEN",
  "networkCode": "NETWORK_CODE",
  "adTagUrl": "AD_TAG_URI",
  "contentSourceUrl": "VOD_URI"
]

let mediaInfoBuilder = GCKMediaInformationBuilder.init(contentId: "CONTENT_ID")
mediaInfoBuilder.contentURL = mediaUrl
mediaInfoBuilder.contentType = "BACKUP_STREAM_MIMETYPE"
mediaInfoBuilder.streamType = GCKMediaStreamType.none
mediaInfoBuilder.customData = customData
mediaInformation = mediaInfoBuilder.build()

guard let mediaInfo = mediaInformation else {
  print("invalid mediaInformation")
  return
}

if let request = sessionManager.currentSession?.remoteMediaClient?.loadMedia(mediaInfo) {
  request.delegate = self
}

Outil CAC

Pour configurer ces valeurs dans l'outil de commande et de contrôle de la diffusion, cliquez sur l'onglet "Charger des contenus multimédias", 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 ce code JSON :

{
  "media": {
    "contentId": "CONTENT_ID",
    "contentUrl": "BACKUP_STREAM_URL",
    "contentType": "BACKUP_STREAM_MIMETYPE",
    "streamType": "VOD",
    "customData": {
      "region": "LOCATION",
      "projectNumber": "PROJECT_NUMBER",
      "oAuthToken": "OAUTH_TOKEN",
      "networkCode": "NETWORK_CODE",
      "adTagUrl": "AD_TAG_URI",
      "contentSourceUrl": "VOD_URI"
    }
  }
}

Cette requête de charge personnalisée peut être envoyée au destinataire pour tester le reste des étapes.

Créer un récepteur Web CAF personnalisé

Créez un récepteur Web personnalisé, comme illustré dans le récepteur Web personnalisé du SDK CAF Guide de démarrage.

Le code du récepteur doit se présenter comme suit:

<html>
<head>
  <script
      src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js">
  </script>
</head>
<body>
  <cast-media-player></cast-media-player>
  <script>
    const castContext = cast.framework.CastReceiverContext.getInstance()
    castContext.start();
  </script>
</body>
</html>

Importer le SDK IMA DAI et obtenir le Player Manager

Ajoutez une balise de script pour importer le SDK IMA DAI pour CAF dans votre récepteur Web, juste après le chargement du script CAF. Ensuite, dans le tag de script qui suit, stockez le le contexte du récepteur et le gestionnaire de joueurs comme constantes avant de le démarrer.

<html>
<head>
  <script
      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>

Initialiser le gestionnaire de flux IMA

Initialisez le gestionnaire de flux IMA.

<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>

Créer l'intercepteur de charge du gestionnaire de flux

Avant que vos éléments multimédias ne soient transmis au CAF, créez votre demande de flux dans un CHARGER le message intercepteur.

    const castContext = cast.framework.CastReceiverContext.getInstance();
    const playerManager = castContext.getPlayerManager();
    const streamManager = new google.ima.cast.dai.api.StreamManager();

    /**
     * Creates a VOD stream request object for the Video Stitcher API.
     * @param {!LoadRequestData} castRequest The request object from the cast sender
     * @return {StreamRequest} an IMA stream request
     */
    const createStreamRequest = (castRequest) => { /* ... */};

    /**
     * Initates a DAI stream request for the final stream manifest.
     * @param {!LoadRequestData} castRequest The request object from the cast sender
     * @return {Promise<LoadRequestData>} a promise that resolves to an updated castRequest, containing the DAI stream manifest
     */
    const createDAICastRequest = (castRequest) => {
        return streamManager.requestStream(castRequest, createStreamRequest(castRequest))
          .then((castRequestWithStreamData) => {
            console.log('Successfully made DAI stream request.');
            return castRequestWithStreamData;
          })
          .catch((error) => {
            console.log('Failed to make DAI stream request.');
            // CAF will automatically fallback to the content URL
            // that it can read from the castRequest object.
            return castRequest;
          });
    };

    playerManager.setMessageInterceptor(
        cast.framework.messages.MessageType.LOAD, createDAICastRequest);

    castContext.start();

Créer la demande de flux

Exécuter la fonction createStreamRequest pour créer une vidéo à la demande de l'API Video Stitcher en fonction de la requête de chargement CAF.

    /**
     * Creates a VOD stream request object for the Video Stitcher API.
     * @param {!LoadRequestData} castRequest The request object from the cast sender
     * @return {StreamRequest} an IMA stream request
     */
    const createStreamRequest = (castRequest) => {
      const streamRequest = new google.ima.cast.dai.api.VideoStitcherVodStreamRequest();
      const customData = castRequest.media.customData;

      streamRequest.region = customData.region;
      streamRequest.projectNumber = customData.projectNumber;
      streamRequest.oAuthToken = customData.oAuthToken;
      streamRequest.networkCode = customData.networkCode;
      streamRequest.adTagUrl = customData.adTagUrl;
      streamRequest.contentSourceUrl = customData.contentSourceUrl;

      return streamRequest;
    };