Utilizzare l'SDK IMA DAI su Chromecast

Riproduci stream VOD registrati con l'API Google Cloud Video Stitcher

Questa guida illustra come utilizzare l'SDK IMA DAI per i ricevitori web CAF per richiedere e riprodurre una sessione di streaming VOD di Google Cloud.

Questa guida espande l'esempio di base dell'inserimento di annunci dinamici completo, aggiungendo il supporto per gli stream registrati con l'API Google Cloud Video Stitcher.

Nota: L'SDK IMA DAI per CAF supporta gli stream HLS e DASH, senza differenze di implementazione.

Prima di continuare, assicurati che il formato di streaming sia supportato dai ricevitori web CAF.

Per informazioni sull'integrazione con altre piattaforme o sull'utilizzo dell'IMA SDK lato client, consulta gli SDK Interactive Media Ads.

Sfondo

Prima di utilizzare questa guida, acquisisci familiarità con le Ricevitore web del framework delle applicazioni Chromecast protocollo.

Questa guida presuppone un livello base di familiarità con i concetti di base dei ricevitori CAF, come messaggio intercettatori, MediaInformation: oggetti e l'utilizzo del comando Trasmetti per emulare un mittente CAF.

Componenti e architettura delle app

Implementazione della riproduzione in streaming VOD con lo strumento di stitching video di Google Cloud API con IMA CAF L'SDK DAI prevede due componenti principali, come illustrato in questa guida:

• VideoStitcherVodStreamRequest: Un oggetto che definisce una richiesta di flusso nei server di Google.
• StreamManager: Un oggetto che gestisce la comunicazione tra il video stream e l'IMA DAI l'SDK, come l'attivazione di ping di monitoraggio e l'inoltro di eventi di streaming al publisher.

Configura un progetto Google Cloud

Inserisci le seguenti variabili da utilizzare nell'SDK IMA:

• Località: la regione Google Cloud in cui è stata creata la configurazione VOD.

  LOCATION

• Numero di progetto: il numero di progetto Google Cloud che utilizza lo stitching video tramite Google Cloud CLI o tramite l'API Compute Engine.

  PROJECT_NUMBER

• Token OAuth: il token OAuth di breve durata di un account di servizio con il video Ruolo utente stitching. Scopri di più sulla creazione di credenziali di breve durata per gli account di servizio.

  OAUTH_TOKEN

• Codice di rete: codice di rete Google Ad Manager per richiedere annunci.

  NETWORK_CODE

  URL tag annuncio: l'URL di Ad Manager del tag annuncio. Per i test, puoi utilizzare il sample di pre-roll VMAP IMA.

  AD_TAG_URI

• URL origine di contenuto: la stringa dell'URL del manifest dello stream per il VOD. contenuti.

  VOD_URI

Configurare un ricevitore di trasmissione personalizzato

Per sviluppare un ricevitore di trasmissione personalizzato, devi avere quanto segue:

• Un account della Console per gli sviluppatori di Google Cast con eseguire il test dei dispositivi in una lista consentita.

• Un ricevitore web ospitato Google Cloud, registrato con la tua Console per gli sviluppatori di Google Cast e che può essere modificato per ospitare il codice fornito da questa guida.

• Un'app di invio configurata per usare l'app del ricevitore web. Ai fini di: in questo esempio, la guida utilizza il comando e i controlli di trasmissione strumento come mittente.

Preparare un mittente per passare i dati del flusso al destinatario

In primo luogo, configura l'app del mittente in modo che invii una richiesta di caricamento al ricevitore web. contenente i seguenti campi nel MediaInformation .

Campo	Sommario
contentId	Un identificatore univoco per questo elemento multimediale, come definito nella sezione Trasmissione documentazione di riferimento. Questo ID non deve essere riutilizzato per più articoli in la stessa coda multimediale. CONTENT_ID
contentUrl	URL facoltativo dello stream di backup da riprodurre se il caricamento dello stream DAI non va a buon fine. BACKUP_STREAM_URL
contentType	Tipo MIME facoltativo dell'URL dello stream di backup da riprodurre se lo stream DAI non viene caricato. BACKUP_STREAM_MIMETYPE
streamType	Il valore letterale della stringa o la costante utilizzata per questo valore variano in base al mittente completamente gestita. VOD
customData	Il campo customData contiene un archivio di coppie chiave-valore di campi obbligatori. In questo caso, customData contiene lo streaming DAI dati che hai raccolto. Campo Sommario region LOCATION projectNumber PROJECT_NUMBER oAuthToken OAUTH_TOKEN networkCode NETWORK_CODE adTagUrl AD_TAG_URI contentSourceUrl VOD_URI

Ecco alcuni esempi di codice utili per iniziare:

Web

Per configurare questi valori in un mittente web di trasmissione, devi prima creare un MediaInfo l'oggetto con i dati richiesti, quindi effettua un caricamento richiesta al ricevitore web.

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

Per configurare questi valori in un mittente web di trasmissione, devi prima creare un Oggetto MediaInfo con i dati richiesti, quindi carica richiesta al ricevitore web.

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)

Per configurare questi valori in un mittente web di trasmissione, devi prima creare un GCKMediaInformation l'oggetto con i dati richiesti, quindi effettua un caricamento richiesta al ricevitore web.

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)

Per configurare questi valori in un mittente web di trasmissione, devi prima creare un GCKMediaInformation l'oggetto con i dati richiesti, quindi effettua un caricamento richiesta al ricevitore 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
}

Strumento CAC

Per configurare questi valori nello strumento di controllo e comandi di trasmissione, fai clic sulla scheda Carica contenuti multimediali e imposta il tipo di richiesta di caricamento personalizzato su LOAD. Quindi sostituisci i dati JSON nell'area di testo. con questo 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"
    }
  }
}

Questa richiesta di caricamento personalizzato può essere inviata al destinatario per testare il resto dei carichi di lavoro passaggi.

Crea un ricevitore web CAF personalizzato

Crea un ricevitore web personalizzato, come descritto nella guida sul ricevitore web personalizzato dell'SDK CAF.

Il codice del destinatario dovrebbe avere il seguente aspetto:

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

Importa l'SDK IMA DAI e scarica Player Manager

Aggiungi un tag script per importare l'SDK IMA DAI per CAF nel ricevitore web, dopo il caricamento del CAF dello script. Quindi, nel tag script che segue, memorizza il contesto del ricevitore e il gestore del player come costanti prima di avviare il ricevitore.

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

Inizializza IMA Stream Manager

Inizializza il Gestore stream 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>

Creazione del gestore dei flussi di intercettazione del carico

Prima che i tuoi elementi multimediali vengano passati al CAF, crea la tua richiesta di streaming in un CARICA messaggio intercettore.

    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();

crea la richiesta di flusso

Completa la funzione createStreamRequest per creare un VOD dell'API Video Stitcher di flusso, in base alla richiesta di caricamento 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;
    };