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 IMA CAF de DAI. Si quieres ver o seguir una integración de muestra completa, descarga el ejemplo.

Antes de usar esta guía, asegúrate de familiarizarte con el protocolo del receptor web del marco de trabajo 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, y el uso de la herramienta Cast Command y Control para emular un emisor de CAF.

Para usar la DAI de IMA, debes tener una cuenta de Ad Manager 360. Si tiene una cuenta de Ad Manager, comuníquese con su administrador de cuentas para obtener más detalles. Si desea obtener información para registrarse en Ad Manager, visite el Centro de ayuda de Ad Manager.

Descripción general de la DAI de CAF

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

StreamRequest: Es un objeto que define una solicitud de transmisión a los servidores de publicidad de Google. Las StreamRequests se dividen 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:

Tener una cuenta de Play Console de Cast con un dispositivo de prueba registrado
Una app receptora web alojada que esté registrada en tu Developer 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 tu app receptora web. A los fines de 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 la transmisión de resguardo que se debe cargar si falla el StreamRequest de DAI por algún motivo
streamType		Para las transmisiones en vivo, este valor se debe establecer en "LIVE". Para las transmisiones de VOD, este valor se debe establecer en “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 medios que contiene la transmisión solicitada.
	videoId	Solo transmisiones de VOD. Identifica la transmisión solicitada en el feed multimedia especificado.
	ApiKey	Es una clave de API opcional que se puede solicitar para recuperar la URL de transmisión desde el SDK de DAI de IMA.
	senderCanSkip	Un valor booleano que informa al receptor si el dispositivo emisor puede mostrar un botón de omisión, lo que habilita la compatibilidad con anuncios que se pueden omitir

Para configurar estos valores en la herramienta de control y comando para transmitir, haz clic en la pestaña "Load Media" y establece el tipo de solicitud de carga personalizada en "LOAD". Luego, 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. Cómo crear un receptor de CAF básico

Sigue la Guía básica para receptores del SDK de CAF para crear 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 DAI de IMA 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 de que la secuencia de comandos cargue CAF. El SDK de DAI de CAF es permanente, por lo que no es necesario configurar una versión específica. Luego, en la etiqueta script a continuación, almacena el contexto del receptor y el administrador del reproductor como constantes antes de iniciar el receptor.

<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 IMA Stream Manager

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 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 CAF DAI, deberás compilar tu solicitud de transmisión con los datos que se incluyeron 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 del SDK más avanzadas, consulta las otras guías o descarga nuestras aplicaciones de app receptoras de muestra.