Configura con DAI servizio completo

Seleziona la piattaforma: HTML5 Android iOS tvOS Cast Roku

Questa guida mostra come riprodurre uno stream DAI utilizzando l'SDK IMA CAF DAI. Se vuoi visualizzare o seguire un'integrazione di esempio completata, scarica l'esempio.

Prima di utilizzare questa guida, assicurati di acquisire familiarità con il protocollo Web Receiver di Chromecast Application Framework. Questa guida presuppone una conoscenza di base dei concetti relativi ai receiver CAF, come gli intercettatori di messaggi e gli oggetti mediaInformation, nonché una conoscenza dell'utilizzo dello strumento Cast Command and Control per emulare un sender CAF.

Per utilizzare IMA DAI, devi disporre di un account Ad Manager 360. Se hai un account Ad Manager, contatta il tuo account manager per maggiori dettagli. Per informazioni sulla registrazione ad Ad Manager, visita il Centro assistenza Ad Manager.

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

Panoramica di CAF DAI

L'implementazione di DAI utilizzando l'SDK IMA CAF DAI prevede due componenti principali, come mostrato in questa guida:

  • StreamRequest: un oggetto che definisce una richiesta di stream ai server pubblicitari di Google. Le richieste di stream sono di due tipi principali:

    • LiveStreamRequest: specifica una chiave asset e altri parametri facoltativi.
    • VODStreamRequest: specifica un ID origine di contenuto, un ID video e altri parametri facoltativi.
    • Entrambi i tipi di richiesta possono includere facoltativamente una chiave API necessaria per accedere agli stream specificati e un codice di rete Google Ad Manager per consentire all'SDK IMA di gestire gli identificatori degli annunci come specificato nelle impostazioni di Google Ad Manager.
  • StreamManager: un oggetto che gestisce la comunicazione tra lo stream video e l'SDK IMA DAI, ad esempio l'attivazione dei ping di monitoraggio e l'inoltro degli eventi di stream al publisher.

Prerequisiti

  • Un account Cast Developer Console con un dispositivo di test registrato.
  • Un'app Web Receiver ospitata registrata con Cast Developer Console e che può essere modificata per ospitare il codice fornito da questa guida.
  • Un'app mittente configurata per l'utilizzo dell'app Web Receiver. Questo esempio utilizza lo strumento Cast Command and Control come mittente.

Configura gli oggetti MediaInfo del mittente

Innanzitutto, configura l'oggetto MediaInfo dell'app mittente in modo da includere i seguenti campi:

contentId Un identificatore univoco per questo elemento multimediale
contentUrl L'URL dello stream di riserva da caricare se la richiesta StreamRequest DAI non va a buon fine per qualsiasi motivo
streamType Per i live streaming, questo valore deve essere impostato su "LIVE". Per gli stream VOD, questo valore deve essere impostato su "BUFFERED".
customData assetKey Solo live streaming. Identifica il live streaming da caricare
contentSourceId Solo stream VOD. Identifica il feed multimediale che contiene lo stream richiesto.
videoId Solo stream VOD. Identifica lo stream richiesto all'interno del feed multimediale specificato.
networkCode (Facoltativo) Il tuo codice di rete Google Ad Manager.
ApiKey Una chiave API facoltativa che può essere richiesta per recuperare l'URL dello stream dall'SDK IMA DAI
senderCanSkip Un valore booleano per comunicare al ricevitore se il dispositivo di invio ha la possibilità di visualizzare un pulsante Salta, attivando il supporto per gli annunci ignorabili

Per configurare questi valori nello strumento di comando e controllo di Cast, fai clic sulla scheda Carica contenuti multimediali e imposta il tipo di richiesta di caricamento personalizzata su LOAD. Quindi sostituisci i dati JSON nell'area di testo con uno dei seguenti oggetti JSON:

IN DIRETTA

{
  "media": {
    "contentId": "bbb",
    "contentUrl": "https://storage.googleapis.com/interactive-media-ads/media/bbb.m3u8",
    "streamType": "LIVE",
    "customData": {
      "assetKey": "c-rArva4ShKVIAkNfy6HUQ",
      "networkCode": "21775744923",
      "ApiKey": "",
      "senderCanSkip": true
    }
  },
  "credentials": "testCredentials"
}

VOD

{
  "media": {
    "contentId": "tos",
    "contentUrl": "https://storage.googleapis.com/interactive-media-ads/media/tos.m3u8",
    "streamType": "BUFFERED",
    "customData": {
      "contentSourceId": "2548831",
      "videoId": "tears-of-steel",
      "networkCode": "21775744923",
      "ApiKey": "",
      "senderCanSkip": true
    }
  },
  "credentials": "testCredentials"
}

Questo oggetto di richiesta di caricamento personalizzato può essere inviato al ricevitore per testare i passaggi seguenti.

Crea un ricevitore CAF di base

Seguendo la guida al ricevitore di base dell'SDK CAF, crea un ricevitore web di base.

Il codice del ricevitore dovrebbe avere il seguente aspetto:

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

Importa l'SDK IMA DAI e ottieni il gestore del player

Aggiungi un tag di script per importare l'SDK IMA DAI per CAF nel tuo ricevitore web, subito dopo lo script che carica CAF. L'SDK CAF DAI è sempre aggiornato, quindi non è necessario impostare una versione specifica. Poi, nel tag di script che segue, memorizza il contesto del ricevitore e il gestore del player come costanti prima di avviare il ricevitore.

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

Inizializza IMA Stream Manager

Inizializza Stream Manager dell'SDK CAF DAI.

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

Crea l'intercettatore dei messaggi di caricamento

L'SDK DAI CAF utilizza l'intercettatore di messaggi di caricamento CAF per effettuare richieste di stream e sostituire l'URL dei contenuti con lo stream DAI finale. L'intercettatore di messaggi chiama streamManager.requestStream(), che gestisce l'impostazione delle interruzioni pubblicitarie, la richiesta dello stream e la sostituzione dell'contentURL esistente.

Può esistere un solo intercettatore di messaggi di caricamento, quindi se la tua app richiede l'utilizzo dell'intercettatore, devi incorporare eventuali funzioni personalizzate nello stesso callback.

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

Crea la richiesta di stream

Per completare l'integrazione di CAF DAI, devi creare la richiesta di stream utilizzando i dati inclusi nell'oggetto mediaInfo del mittente.

<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.networkCode) {
        streamRequest.networkCode = imaRequestData.networkCode;
      }
      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>

Ora puoi richiedere e riprodurre stream DAI con l'SDK DAI CAF di Google. Per scoprire di più sulle funzionalità più avanzate dell'SDK, consulta le altre guide o scarica le nostre applicazioni di ricezione di esempio.