Utiliser le SDK IMA DAI sur Chromecast

Lire les diffusions en direct enregistrées 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 lancer la diffusion en direct d'un événement enregistré auprès de API Google Cloud Video Stitcher et insérer une coupure publicitaire pendant la lecture.

Ce guide développe l'exemple de base de l'insertion dynamique d'annonces en service complet, pour les flux enregistrés avec l'API Google Cloud Video Stitcher.

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 le protocole Web Receiver du Chromecast Application Framework.

Ce guide suppose que vous connaissez les concepts de base des récepteurs CAF, tels que les intercepteurs de messages, les objets MediaInformation et l'utilisation de l'outil de commande et de contrôle Cast pour émuler un émetteur CAF.

Composants et architecture de l'application

Implémenter la lecture en direct avec l'assembleur vidéo Google Cloud l'API IMA ou CAF Comme indiqué dans ce guide, le SDK pour l'insertion dynamique d'annonce implique deux composants principaux:

• VideoStitcherLiveStreamRequest : objet qui définit une requête de flux à vers les serveurs de Google. La requête spécifie une instance de l'API Cloud Video Stitcher, un ID de configuration en direct et d'autres paramètres facultatifs.
• 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.

Prérequis

Vous avez besoin des variables suivantes pour le SDK IMA :

• ID de configuration en direct : il s'agit de l'ID de configuration en direct que vous avez spécifié lors de la création de votre configuration en direct de l'API Video Stitcher.

  LIVE_CONFIG_ID

• Emplacement : région Google Cloud dans laquelle votre configuration en direct 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

• Clé d'asset personnalisée : clé d'asset personnalisée Google Ad Manager générée lors de la création d'une configuration pour un événement de streaming en direct avec l'API Video Stitcher.

  CUSTOM_ASSET_KEY

Vous avez besoin des éléments suivants pour un récepteur Cast personnalisé :

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

• Un récepteur Web hébergé application qui est enregistré dans votre console développeur Cast, et qui peut être modifié pour hébergent le code fourni par 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 l'application émettrice pour qu'elle envoie une requête de chargement à votre récepteur Web. contenant les champs suivants dans le fichier MediaInformation .

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

// 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.LIVE;
mediaInfo.customData = {
liveConfigID: "LIVE_CONFIG_ID",
region: "LOCATION",
projectNumber: "PROJECT_NUMBER",
oAuthToken: "OAUTH_TOKEN",
networkCode: "NETWORK_CODE",
customAssetKey: "CUSTOM_ASSET_KEY"
};

// 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); });

JSONObject customData = new JSONObject()
  .put("liveConfigID", "LIVE_CONFIG_ID")
  .put("region", "LOCATION")
  .put("projectNumber", "PROJECT_NUMBER")
  .put("oAuthToken", "OAUTH_TOKEN")
  .put("networkCode", "NETWORK_CODE")
  .put("customAssetKey", "CUSTOM_ASSET_KEY");

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

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

NSURL url = [NSURL URLWithString:@"BACKUP_STREAM_URL"];
NSDictionary *customData = @{
  @"liveConfigID": @"LIVE_CONFIG_ID",
  @"region": @"LOCATION",
  @"projectNumber": @"PROJECT_NUMBER",
  @"oAuthToken": @"OAUTH_TOKEN",
  @"networkCode": @"NETWORK_CODE",
  @"customAssetKey": @"CUSTOM_ASSET_KEY"
};

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

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

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

let customData = [
  "liveConfigID": "LIVE_CONFIG_ID",
  "region": "LOCATION",
  "projectNumber": "PROJECT_NUMBER",
  "oAuthToken": "OAUTH_TOKEN",
  "networkCode": "NETWORK_CODE",
  "customAssetKey": "CUSTOM_ASSET_KEY"
]

let mediaInfoBuilder = GCKMediaInformationBuilder.init(contentId: "CONTENT_ID")
mediaInfoBuilder.contentURL = mediaUrl
mediaInfoBuilder.contentType = "BACKUP_STREAM_MIMETYPE"
mediaInfoBuilder.streamType = GCKMediaStreamType.Live
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
}

{
  "media": {
    "contentId": "CONTENT_ID",
    "contentUrl": "BACKUP_STREAM_URL",
    "contentType": "BACKUP_STREAM_MIMETYPE",
    "streamType": "LIVE",
    "customData": {
      "liveConfigID": "LIVE_CONFIG_ID",
      "region": "LOCATION",
      "projectNumber": "PROJECT_NUMBER",
      "oAuthToken": "OAUTH_TOKEN",
      "networkCode": "NETWORK_CODE",
      "customAssetKey": "CUSTOM_ASSET_KEY"
    }
  }
}

Cette demande de chargement personnalisé peut être envoyée au récepteur pour tester le reste du é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 télécharger le Gestionnaire de lecteurs

Ajoutez un tag de script pour importer le SDK IMA DAI pour CAF vers votre récepteur Web. Il vous suffit pour cela après le chargement du script CAF. Ensuite, dans la balise de script qui suit, stockez le contexte du récepteur et le gestionnaire de lecteurs en tant que constantes avant de démarrer le récepteur.

<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 à CAF, créez votre requête de flux dans un intercepteur de message LOAD.

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

    /**
     * Creates a livestream 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 API Video Stitcher diffusion en direct, en fonction de la requête de chargement CAF.

    /**
     * Creates a livestream 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.VideoStitcherLiveStreamRequest();
      const customData = castRequest.media.customData;

      streamRequest.liveStreamEventId = customData.liveConfigID;
      streamRequest.region = customData.region;
      streamRequest.projectNumber = customData.projectNumber;
      streamRequest.oAuthToken = customData.oAuthToken;
      streamRequest.networkCode = customData.networkCode;
      streamRequest.customAssetKey = customData.customAssetKey;

      return streamRequest;
    };