Configurare l'SDK IMA per DAI

Seleziona la piattaforma: HTML5 Android iOS tvOS Cast Roku

Gli SDK IMA semplificano l'integrazione di annunci multimediali nei tuoi siti web e nelle tue app. Gli SDK IMA possono richiedere annunci da qualsiasi ad server compatibile con VAST e gestire la riproduzione degli annunci nelle tue app. Con gli SDK IMA DAI, le app effettuano una richiesta di streaming per l'annuncio e il video dei contenuti, che possono essere VOD o live. L'SDK restituisce quindi uno stream video combinato, in modo da non dover gestire il passaggio tra l'annuncio e il video di contenuti all'interno dell'app.

Seleziona la soluzione DAI che ti interessa

Servizio completo Pubblicazione di pod API Cloud Stitching Live API Cloud Stitching VOD

Riprodurre i live streaming registrati con l'API Google Cloud Video Stitcher

Questa guida mostra come utilizzare l'SDK IMA DAI per HTML5 per richiedere e riprodurre uno streaming live per un evento registrato con l'API Google Cloud Video Stitcher e come inserire un'interruzione pubblicitaria durante la riproduzione.

Questa guida espande l'esempio di base della guida iniziale per IMA DAI.

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

Per visualizzare o seguire un'integrazione di esempio completata, scarica l'esempio di Cloud Video Stitcher per HLS o DASH.

Nota:L'SDK IMA DAI per HTML5 supporta gli stream HLS e DASH, ma la riproduzione di ciascuno richiede un lettore multimediale o un'estensione diversa, ad esempio HLS.js o DASH.js, con implementazioni diverse.

Questa guida spiega come configurare HLS.js e l'SDK IMA DAI per riprodurre uno stream HLS, con note importanti sulle differenze di implementazione per DASH.

Consulta l'app di esempio DASH.js di IMA per un punto di partenza per implementare stream DAI DASH con IMA.

Configura un progetto Google Cloud

Configura un progetto Google Cloud e configura gli account di servizio per accedere al progetto.

Crea una configurazione per un evento in live streaming utilizzando il tuo live streaming di contenuti o un live streaming di test. Questa guida prevede uno streaming HLS.

Inserisci le seguenti variabili da utilizzare nell'SDK IMA:

Località

La regione Google Cloud in cui è stata creata la configurazione live: LOCATION

Numero progetto

Il numero del progetto Google Cloud che utilizza l'API Video Stitcher: PROJECT_NUMBER

Token OAuth

Token OAuth di breve durata di un service account con il ruolo utente Video Stitcher:

OAUTH_TOKEN

Scopri di più sulla creazione di credenziali di breve durata per i service account. Il token OAuth può essere riutilizzato in più richieste finché non è scaduto.

Codice di rete

Il codice di rete Ad Manager per richiedere gli annunci: NETWORK_CODE

ID configurazione live

L'ID configurazione live specificato durante la creazione dell'evento di live streaming: LIVE_CONFIG_ID

Chiave asset personalizzata

La chiave asset personalizzata di Ad Manager generata durante la procedura di creazione di una configurazione per un evento live streaming con l'API Video Stitcher: CUSTOM_ASSET_KEY

Configura un ambiente di sviluppo

Punto chiave :la classe VideoStitcherLiveStreamRequest di IMA DAI supporta sia gli stream HLS sia gli stream DASH multiperiodo. Le interruzioni pubblicitarie vengono inserite solo tra i periodi DASH.

Le app di esempio IMA mostrano solo le richieste di stream HLS. Puoi comunque utilizzare gli stream DASH durante la creazione della classe VideoStitcherLiveStreamRequest. Quando configuri il tuo player compatibile con DASH, devi configurare un listener per gli eventi di avanzamento del video player che possono fornire i metadati del video a StreamManager.processMetadata(). Questa funzione accetta tre parametri:

1. type: una stringa che deve essere impostata su 'ID3' per gli stream HLS e 'urn:google:dai:2018' per gli stream DASH.

2. data: per i messaggi di eventi DASH, questa è la stringa di dati del messaggio.

3. timestamp: Un numero che indica l'ora di inizio del messaggio dell'evento per gli stream DASH.

Invia i metadati il prima possibile e con la frequenza con cui possono essere forniti dagli eventi del giocatore. Se i metadati sono mancanti o non corretti, l'SDK IMA DAI potrebbe non attivare gli eventi pubblicitari, con conseguente segnalazione errata degli eventi pubblicitari.

Scarica gli esempi di IMA DAI per HTML5 ed estrai l'esempio HLS.js Simple in una nuova cartella. Questo esempio è un'app web che puoi ospitare localmente a scopo di test.

Per ospitare l'esempio in locale, vai alla nuova cartella ed esegui questo comando Python per avviare un server web:

python3 -m http.server 8000

http.server è disponibile solo in Python 3.x. Puoi utilizzare qualsiasi altro server web, come Apache HTTP Server o Node JS.

Apri un browser web e vai alla pagina localhost:8000 per visualizzare un video player. Il browser deve supportare la libreria HLS.js.

Se tutto funziona correttamente, facendo clic sul pulsante Riproduci sul video player inizia la riproduzione del cortometraggio "Tears of Steel" dopo un breve annuncio. Questi contenuti vengono distribuiti utilizzando uno stream video on demand (VOD).

Richiedere un live streaming

Per sostituire lo stream VOD di esempio con il tuo live streaming, utilizza la classe VideoStitcherLiveStreamRequest che crea automaticamente una sessione pubblicitaria con Google Ad Manager. Puoi utilizzare l'interfaccia utente di Google Ad Manager per individuare le sessioni DAI generate per il monitoraggio e il debug.

Nell'esempio esistente, sono presenti funzioni per richiedere uno stream VOD o un live streaming. Per farlo funzionare con l'API Google Cloud Video Stitcher, devi aggiungere una nuova funzione per restituire un oggetto VideoStitcherLiveStreamRequest.

Ecco un esempio:

// StreamManager which will be used to request ad-enabled streams.
let streamManager;
...
function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(
    videoElement,
    adUiElement
  );
  streamManager.addEventListener(
      [
        google.ima.dai.api.StreamEvent.Type.LOADED,
        google.ima.dai.api.StreamEvent.Type.ERROR,
        google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
        google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED
      ],
      onStreamEvent, false);

  hls.on(Hls.Events.FRAG_PARSING_METADATA, function(event, data) {
    if (streamManager && data) {
      // For each ID3 tag in our metadata, we pass in the type - ID3, the
      // tag data (a byte array), and the presentation timestamp (PTS).
      data.samples.forEach(function(sample) {
        streamManager.processMetadata('ID3', sample.data, sample.pts);
      });
    }
  });

  videoElement.addEventListener('pause', () => {
    playButton.style.display = 'block';
  });

  playButton.addEventListener('click', initiatePlayback);
}

function initiatePlayback() {
  requestVideoStitcherStream();

  playButton.style.display = "none";
  playButton.removeEventListener('click', initiatePlayback);
  playButton.addEventListener('click', resumePlayback);
}
...

function requestVideoStitcherStream() {
  const streamRequest = new google.ima.dai.api.VideoStitcherLiveStreamRequest();
  streamRequest.liveStreamEventId = 'LIVE_CONFIG_ID';
  streamRequest.region = 'LOCATION';
  streamRequest.projectNumber = 'PROJECT_NUMBER';
  streamRequest.oAuthToken = 'OAUTH_TOKEN';
  streamRequest.networkCode = 'NETWORK_CODE';
  streamRequest.customAssetKey = 'CUSTOM_ASSET_KEY';

  streamManager.requestStream(streamRequest);
}

Per i test locali, se i file del live streaming si trovano in un bucket Cloud Storage, devi attivare CORS per l'origine http://localhost:8000.

Ricarica la pagina. Dopodiché, puoi richiedere e riprodurre live streaming personalizzati.

(Facoltativo) Aggiungi opzioni per la sessione di streaming

Personalizza la richiesta di stream aggiungendo opzioni di sessione per eseguire l'override della configurazione predefinita dell'API Cloud Video Stitcher utilizzando VideoStitcherLiveStreamRequest.videoStitcherSessionOptions. Se fornisci un'opzione non riconosciuta, l'API Cloud Video Stitcher risponderà con un errore HTTP 400. Per assistenza, consulta la guida alla risoluzione dei problemi.

Ad esempio, puoi eseguire l'override delle opzioni del manifest con lo snippet di codice seguente, che richiede due manifest di stream con rendition ordinate dal bitrate più basso a quello più alto.

...

// The following session options are examples. Use session options
// that are compatible with your video stream.
streamRequest.videoStitcherSessionOptions = {
  "manifestOptions": {
    "bitrateOrder": "ascending"
  }
};

streamManager.requestStream(streamRequest);

Inserire un'interruzione pubblicitaria

L'API Google Cloud Video Stitcher inserisce gli annunci recuperati dal tag annuncio per ogni interruzione pubblicitaria. Le interruzioni pubblicitarie sono indicate nel manifest utilizzando i marcatori pubblicitari. Gli indicatori di annunci vengono inseriti dal codificatore del live streaming.

• Se utilizzi il tuo live streaming, devi inserire il marcatore pubblicitario. Per maggiori informazioni sugli indicatori di annunci HLS e DASH supportati, consulta la documentazione sugli indicatori di annunci.

• Se hai creato un live streaming utilizzando l'API Google Cloud Livestream, inserisci un evento del canale di interruzione pubblicitaria.

L'annuncio viene riprodotto immediatamente dopo l'inserimento della pausa pubblicitaria.

Esegui la pulizia

Ora che hai ospitato correttamente un live streaming utilizzando l'API Google Cloud Video Stitcher e l'hai richiesto utilizzando l'SDK IMA DAI per HTML5, è importante eliminare tutte le risorse di pubblicazione.

Segui la guida alla pulizia dei live streaming per rimuovere risorse e asset non necessari.

Infine, nella finestra del terminale in cui hai avviato il server web Python 3, utilizza il comando ctrl+C per terminare il server locale.