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

Cómo comenzar

En esta guía, se muestra cómo reproducir una transmisión de DAI con el SDK de DAI de IMA CAF. Si quieres ver una integración de muestra completa o seguirla, descárgala.

Antes de usar esta guía, asegúrate de familiarizarte con el protocolo receptor web del framework de aplicaciones de Chromecast. En esta guía, se da por sentado que conoces los conceptos básicos de los receptores de CAF, como los interceptores de mensajes y los objetos mediaInformation, así como el uso de la herramienta de comando y control de transmisión para emular un remitente de CAF.

Para usar la DAI de IMA, debes tener una cuenta de Ad Manager 360. Si tienes una cuenta de Ad Manager, comunícate con tu administrador de cuentas para obtener más detalles. Para obtener información sobre cómo registrarse en Ad Manager, visite el Centro de ayuda de Ad Manager.

Descripción general de la DAI de CAF

La implementación de DAI con el SDK de DAI de IMA CAF implica dos componentes principales, que se demuestran en esta guía:

StreamRequest: Es un objeto que define una solicitud de transmisión a los servidores publicitarios de Google. Las StreamRequests vienen en dos variedades principales:
- LiveStreamRequest: Especifica una clave de recurso y una clave de API opcional, así como otros parámetros opcionales.
- VODStreamRequest: Especifica un Content Source ID, un Video ID y una clave de API opcional, entre otros parámetros opcionales.
StreamManager: Es un objeto que controla la comunicación entre la transmisión de video por Internet y el SDK de DAI de IMA, como la activación de pings de seguimiento y el reenvío de eventos de transmisión al publicador.

Requisitos previos

Antes de comenzar, necesitas lo siguiente:

Una cuenta de Play Console de Cast con un dispositivo de prueba registrado
Una app receptora web alojada que esté registrada en tu Play Console de Cast y que se pueda modificar para alojar el código que se proporciona en esta guía
Una app de envío configurada para usar la app del receptor web. En este ejemplo, usaremos la herramienta de control y comando de transmisión como remitente.

1. Configurar los objetos MediaInfo del remitente

Primero, configura el objeto MediaInfo de tu app emisora para que incluya los siguientes campos:

contentId		Un identificador único para este elemento multimedia
contentUrl		La URL de transmisión de resguardo que se debe cargar si la solicitud de StreamRequest de DAI falla por algún motivo
streamType		Para las transmisiones en vivo, este valor se debe establecer como "LIVE". Para las transmisiones de VOD, este valor se debe establecer como “BUFFERED”.
customData	assetKey	Solo transmisiones en vivo. Identifica la transmisión en vivo que se cargará
	contentSourceId	Solo transmisiones de VOD. Identifica el feed de contenido multimedia que contiene la transmisión solicitada.
	videoId	Solo transmisiones de VOD. Identifica la transmisión solicitada en el feed multimedia especificado.
	ApiKey	Una clave de API opcional que puede requerirse para recuperar la URL de transmisión desde el SDK de DAI de IMA.
	senderCanSkip	Un valor booleano para informarle al receptor si el dispositivo que envía la información puede mostrar un botón Omitir, lo que habilita la compatibilidad con anuncios que se pueden omitir.

Para configurar estos valores en la herramienta de comando y control de transmisión, haz clic en la pestaña "Load Media" y establece el tipo de solicitud de carga personalizada en "LOAD". A continuación, reemplaza los datos JSON en el área de texto por uno de los siguientes objetos JSON:

EN VIVO

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

VOD

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

Este objeto de solicitud de carga personalizado se puede enviar al receptor para probar cada uno de los siguientes pasos

2. Crea un receptor de CAF básico

De acuerdo con la Guía básica del receptor de CAF, crea un receptor web básico.

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

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

3. Importa el SDK de IMA de DAI y obtén el Administrador del reproductor

Agregue una etiqueta de secuencia de comandos para importar el SDK de IMA de DAI para CAF a su receptor web, justo después del CAF de carga de la secuencia de comandos. El SDK de DAI de CAF es perdurable, por lo que no es necesario establecer una versión específica. Luego, en la etiqueta de la secuencia de comandos a continuación, almacena el contexto de la app receptora y el administrador del reproductor como constantes antes de iniciar la app receptora.

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

4. Cómo inicializar el Administrador de transmisión de IMA

Inicializa el Administrador de transmisiones del SDK de DAI de CAF.

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

5. Crea el interceptor de mensajes de carga

El SDK de DAI de CAF usa el interceptor de mensajes de carga de CAF para realizar solicitudes de transmisión y reemplazar la URL de contenido por la transmisión de DAI final. El interceptor de mensajes llamará a streamManager.requestStream(), que se encargará de configurar las pausas publicitarias, solicitar la transmisión y reemplazar la contentURL existente.

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

6. Compila la solicitud de transmisión

Para completar la integración de la DAI con CAF, deberás compilar tu solicitud de transmisión con los datos incluidos en el objeto mediaInfo del remitente.

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

... y ¡listo! Ahora puede solicitar y reproducir transmisiones de DAI con el SDK de CAF DAI de Google. Para obtener información sobre funciones de SDK más avanzadas, consulta las otras guías o descarga nuestras aplicaciones de receptor de muestra.