Si quieres habilitar la API de Video Stitcher para tu proyecto, comunícate con tu representante de cuenta o con Ventas para obtener más información.

Se usó la API de Cloud Translation para traducir esta página.

Cómo usar el SDK de IMA de DAI en Chromecast

Reproducir transmisiones de VOD registradas con la API de Google Cloud Video Stitcher

En esta guía, se muestra cómo usar el SDK de IMA de DAI para los receptores web de CAF para lo siguiente: solicitar y reproducir una sesión de transmisión de VOD de Google Cloud.

En esta guía, se amplía el ejemplo básico de la DAI de servicio completo y se agrega compatibilidad con transmisiones registradas con la API de Google Cloud Video Stitcher.

Asegúrate de que tu formato de transmisión sea compatible con los receptores web de CAF antes de continuar.

Para obtener información sobre la integración con otras plataformas o el uso de los SDKs del cliente de IMA, consulta SDKs de anuncios multimedia interactivos.

Segundo plano

Antes de usar esta guía, familiarízate con el protocolo del receptor web del framework de aplicaciones de Chromecast.

En esta guía, se supone que tienes un nivel básico de familiaridad con los conceptos de los receptores de CAF, como los interceptores de mensajes, los objetos MediaInformation y el uso de la herramienta de comando y control de Cast para emular un remitente de CAF.

Componentes y arquitectura de la app

Implementación de la reproducción de transmisiones de VOD con la herramienta de unión de videos de Google Cloud API con el CAF de IMA El SDK de DAI incluye dos componentes principales, como se demuestra en esta guía:

VideoStitcherVodStreamRequest: Un objeto que define una solicitud de transmisión para los servidores de Google.
StreamManager: Es un objeto que controla la comunicación entre la transmisión de video y el SDK de IMA DAI, como activar pings de seguimiento y reenviar eventos de transmisión al publicador.

Configura un proyecto de Google Cloud

Ingresa las siguientes variables para usarlas en el SDK de IMA:

Ubicación: Es la región de Google Cloud en la que se creó tu configuración de VOD.

LOCATION
Número de proyecto: Es el número de proyecto de Google Cloud que usa la API de Video Stitcher.

PROJECT_NUMBER
Token de OAuth: Es un token de OAuth de corta duración de una cuenta de servicio con el rol de usuario de Video Stitcher. Más información sobre crear credenciales de corta duración para los servicios .

OAUTH_TOKEN
Código de red: Es el código de red de Google Ad Manager para solicitar anuncios.

NETWORK_CODE

URL de la etiqueta de anuncio: Es la URL de Ad Manager de la etiqueta de anuncio. Para hacer pruebas, puedes usar el Ejemplo de anuncio previo al video de VMAP de IMA.

AD_TAG_URI
URL de la fuente del contenido: Es la cadena de URL del manifiesto de transmisión de tu VOD. contenido.

VOD_URI

Cómo configurar un receptor de transmisión personalizado

Para desarrollar un receptor de transmisiones personalizado, necesitas lo siguiente:

Una cuenta de Cast Developer Console con dispositivos de prueba en una lista de entidades permitidas
Un receptor web alojado App que se registrados con tu Play Console de Cast y que se pueden modificar para alojar el código proporcionado en esta guía.
Una app de envío configurada para usar tu app de receptor web. Para los fines de este ejemplo, esta guía usa el Comando y control de Cast Tool como el remitente.

Prepara un remitente para pasar datos de transmisión al receptor

Primero, configura tu app emisora para que realice una solicitud de carga al receptor web. que contenga los siguientes campos en el bucket MediaInformation .

Campo Contenido

contentId

Un identificador único para este elemento multimedia, como se define en la sección Transmitir documentación de referencia. Este ID no se debe volver a usar para varios elementos en la misma fila de contenido multimedia.

CONTENT_ID

contentUrl

URL de transmisión de copia de seguridad opcional para reproducir si no se puede cargar la transmisión de DAI.

BACKUP_STREAM_URL

contentType

Tipo MIME opcional de la URL de transmisión de copia de seguridad que se reproducirá si la transmisión de DAI no se puede cargar.

BACKUP_STREAM_MIMETYPE

streamType

La constante o el literal de cadena que se usa para este valor varía según la plataforma del remitente.

VOD

customData

El campo customData contiene un almacén de pares clave-valor de claves campos obligatorios. En este caso, customData contiene la transmisión de DAI. los datos que recopilaste.

Campo	Contenido
`region`	`LOCATION`
`projectNumber`	`PROJECT_NUMBER`
`oAuthToken`	`OAUTH_TOKEN`
`networkCode`	`NETWORK_CODE`
`adTagUrl`	`AD_TAG_URI`
`contentSourceUrl`	`VOD_URI`

A continuación, se incluyen algunas muestras de código que te ayudarán a comenzar:

Web

Para configurar estos valores en un remitente web de transmisión, primero crea un MediaInfo objeto con los datos requeridos, realiza una carga solicitud al receptor 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

Para configurar estos valores en un remitente web de transmisión, primero crea un Objeto MediaInfo con los datos requeridos, hacer una carga solicitud al receptor 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)

Para configurar estos valores en un remitente web de transmisión, primero crea un GCKMediaInformation objeto con los datos requeridos, realiza una carga solicitud al receptor 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)

Para configurar estos valores en un remitente web de transmisión, primero crea un GCKMediaInformation objeto con los datos requeridos, realiza una carga solicitud al receptor 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
}

Herramienta de CAC

Para configurar estos valores en la herramienta de comando y control de Cast, haz clic en la pestaña Cargar contenido multimedia y establece el tipo de solicitud de carga personalizada en LOAD. Luego, reemplaza los datos JSON en el área de texto por este 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"
    }
  }
}

Esta solicitud de carga personalizada se puede enviar al receptor para probar el resto de los pasos.

Cómo crear un receptor web de CAF personalizado

Crear un receptor web personalizado, como se ve en el Receptor web personalizado del SDK de CAF de la Guía de inicio rápido.

El código del receptor debería verse de la siguiente manera:

<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 el SDK de DAI de IMA y obtén el Administrador de reproductores

Agrega una etiqueta de secuencia de comandos para importar el SDK de IMA DAI para CAF a tu receptor web, justo después de que la secuencia de comandos cargue CAF. Luego, en la etiqueta de secuencia de comandos que sigue, almacena el contexto del receptor y el administrador de jugadores como constantes antes de iniciar el receptor.

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

Cómo inicializar el administrador de transmisiones de IMA

Inicializa IMA Stream Manager.

<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 el interceptor de carga del administrador de transmisiones

Antes de que tus elementos multimedia se pasen a CAF, crea la solicitud de transmisión en un CARGAR mensaje un interceptor.

    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 solicitud de transmisión

Completa la función createStreamRequest para crear una solicitud de transmisión de VOD de la API de Video Stitcher, según la solicitud de carga de 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;
    };

Android

HTML5