Utilizzare l'SDK IMA DAI su Chromecast

Riproduci live streaming 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 un live streaming per un evento registrato presso API Google Cloud Video Stitcher, e inserisci un'interruzione pubblicitaria durante la riproduzione.

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 dell'app

Implementazione della riproduzione in live streaming 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:

• VideoStitcherLiveStreamRequest: un oggetto che definisce una richiesta di streaming per nei server di Google. La richiesta specifica un'istanza del componente Video Cloud API Stitcher, un ID configurazione live e altri parametri facoltativi.
• 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.

Prerequisiti

Per l'SDK IMA sono necessarie le seguenti variabili:

• ID configurazione live: si tratta dell'ID configurazione live che hai specificato durante la creazione. della configurazione live dell'API Video Stitcher.

  LIVE_CONFIG_ID

• Località: la regione Google Cloud in cui è stata creata Live Config.

  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ù su creazione di credenziali di breve durata per i servizi Google Cloud.

  OAUTH_TOKEN

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

  NETWORK_CODE

• Chiave asset personalizzata. La chiave asset personalizzata di Google Ad Manager generata durante la processo di creazione di una configurazione per un live streaming con l'API Video Stitcher.

  CUSTOM_ASSET_KEY

Per un ricevitore di trasmissione personalizzato, sono necessari i seguenti requisiti:

• 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 a trasmettere i dati dello stream 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 riesce a caricarsi. BACKUP_STREAM_MIMETYPE
streamType	Il valore letterale della stringa o la costante utilizzata per questo valore variano in base al mittente completamente gestita. LIVE
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 liveConfigID LIVE_CONFIG_ID region LOCATION projectNumber PROJECT_NUMBER oAuthToken OAUTH_TOKEN networkCode NETWORK_CODE customAssetKey CUSTOM_ASSET_KEY

Ecco alcuni esempi di codice utili per iniziare:

Web

Per configurare questi valori in un mittente web di trasmissione, devi prima creare un MediaInfo 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.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); });

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

iOS (Obj-C)

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

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

iOS (Swift)

Per configurare questi valori in un mittente web di trasmissione, devi prima creare un GCKMediaInformation 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 = [
  "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
}

Strumento CAC

Per configurare questi valori nel campo Comando e controllo di trasmissione , fai clic sulla scheda Carica contenuti multimediali e imposta 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": "LIVE",
    "customData": {
      "liveConfigID": "LIVE_CONFIG_ID",
      "region": "LOCATION",
      "projectNumber": "PROJECT_NUMBER",
      "oAuthToken": "OAUTH_TOKEN",
      "networkCode": "NETWORK_CODE",
      "customAssetKey": "CUSTOM_ASSET_KEY"
    }
  }
}

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

Crea un ricevitore web CAF personalizzato

Crea un ricevitore web personalizzato, come mostrato nel ricevitore web personalizzato dell'SDK CAF Google Cloud.

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 gli elementi multimediali vengano trasmessi a CAF, crea la richiesta di streaming in un intercettatore di messaggi 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();

crea la richiesta di flusso

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