Configura el SDK de IMA para la DAI

Selecciona la plataforma: HTML5 Android iOS tvOS Cast Roku

Los SDK de IMA facilitan la integración de anuncios multimedia en tus sitios web y aplicaciones. Los SDKs de IMA pueden solicitar anuncios de cualquier servidor de anuncios compatible con VAST y administrar la reproducción de anuncios en tus aplicaciones. Con los SDKs de IMA DAI, las apps realizan una solicitud de transmisión para el video del anuncio y el contenido, ya sea VOD o contenido en vivo. Luego, el SDK devuelve una transmisión de video combinada, de modo que no tengas que administrar el cambio entre el anuncio y el video de contenido en tu app.

Selecciona la solución de DAI que te interesa

Reproduce 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 DAI para HTML5 para solicitar y reproducir una sesión de transmisión de VOD de Google Cloud.

Esta guía amplía el ejemplo básico de la guía de inicio de la DAI de IMA.

Para obtener información sobre la integración con otras plataformas o el uso de los SDKs de IMA del cliente, consulta SDKs de Interactive Media Ads.

Para ver o seguir una integración de muestra completa, descarga el ejemplo de Cloud Video Stitcher para HLS o DASH.

Configura un proyecto de Google Cloud

Configura un proyecto de Google Cloud y cuentas de servicio para acceder al proyecto.

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

Ubicación
La región de Google Cloud en la que se creó tu configuración de VOD: LOCATION
Número del proyecto
Número del proyecto de Google Cloud que usa la API de Video Stitcher: PROJECT_NUMBER
Token de OAuth

Token de OAuth de corta duración de una cuenta de servicio con el rol de usuario de Video Stitcher: 

OAUTH_TOKEN

Obtén más información para crear tokens de OAuth de corta duración. El token de OAuth se puede reutilizar en varias solicitudes siempre y cuando no haya vencido.

Código de red

Código de red de Ad Manager para solicitar anuncios: NETWORK_CODE

ID de configuración de VOD

ID de configuración de VOD para la transmisión de VOD: VOD_CONFIG_ID

Obtén más información para crear el ID de configuración de VOD en la guía de creación de una configuración de VOD de Cloud Stitching.

Configura un entorno de desarrollo

Las aplicaciones de ejemplo del IMA solo demuestran solicitudes de transmisión HLS. Aún puedes usar transmisiones de DASH cuando construyas la clase VideoStitcherVodStreamRequest. Cuando configures tu reproductor compatible con DASH, deberás configurar un objeto de escucha para los eventos de progreso del reproductor de video que pueda proporcionar los metadatos del video a StreamManager.processMetadata(). Esta función toma tres parámetros:

  1. type: Es una cadena que debe establecerse en 'ID3' para las transmisiones HLS y en 'urn:google:dai:2018' para las transmisiones DASH.

  2. data: En el caso de los mensajes de eventos de DASH, esta es la cadena de datos del mensaje.

  3. timestamp: Es un número que indica la hora de inicio del mensaje de evento para las transmisiones de DASH.

Envía los metadatos tan pronto y con la frecuencia que puedan proporcionarlos tus eventos de reproductor. Si faltan metadatos o no son correctos, es posible que el SDK de IMA DAI no active eventos de anuncios, lo que generaría informes incorrectos de eventos de anuncios.

Descarga los ejemplos de IMA DAI para HTML5 y extrae el archivo ZIP de muestra hls_js/simple en una carpeta nueva. Este ejemplo es una app web que puedes alojar de forma local para realizar pruebas.

Para alojar el ejemplo de forma local, navega a la carpeta nueva y ejecuta el siguiente comando de Python para iniciar un servidor web:

python3 -m http.server 8000

http.server solo está disponible en Python 3.x. Puedes usar cualquier otro servidor web, como Apache HTTP Server o Node JS.

Abre un navegador web y navega a localhost:8000 para ver un reproductor de video. Tu navegador debe ser compatible con la biblioteca HLS.js.

Si todo funciona correctamente, al hacer clic en el botón de reproducción del reproductor de video, se iniciará el cortometraje "Tears of Steel", con pausas publicitarias cada 30 segundos.

Solicita una transmisión de VOD

Para reemplazar la transmisión de muestra por tu transmisión de VOD con anuncios intercalados, usa la clase VideoStitcherVodStreamRequest para crear automáticamente una sesión de anuncios con Google Ad Manager. Puedes usar la IU de Google Ad Manager para ubicar las sesiones de DAI generadas con fines de supervisión y depuración.

En la muestra existente, hay funciones para solicitar una transmisión de VOD o una transmisión en vivo. Para que funcione con la API de Google Cloud Video Stitcher, debes agregar una función nueva para devolver un objeto VideoStitcherVodStreamRequest.

Por ejemplo:

// StreamManager which will be used to request DAI 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() {
  requestVodVideoStitcherStream();

  playButton.style.display = "none";
  playButton.removeEventListener('click', initiatePlayback);
  playButton.addEventListener('click', resumePlayback);
}
...
function requestVodVideoStitcherStream() {
  const streamRequest = new google.ima.dai.api.VideoStitcherVodStreamRequest();
  streamRequest.vodConfigId = 'VOD_CONFIG_ID';
  streamRequest.region = 'LOCATION';
  streamRequest.projectNumber = 'PROJECT_NUMBER';
  streamRequest.oAuthToken = 'OAUTH_TOKEN';
  streamRequest.networkCode = 'NETWORK_CODE';

  streamManager.requestStream(streamRequest);
}

Vuelve a cargar la página. Luego, puedes solicitar y reproducir la transmisión de VOD personalizada.

(Opcional) Agrega opciones de sesión de transmisión

Personaliza tu solicitud de transmisión agregando opciones de sesión para anular la configuración predeterminada de la API de Cloud Video Stitcher con VideoStitcherVodStreamRequest.videoStitcherSessionOptions. Si proporcionas una opción no reconocida, la API de Cloud Video Stitcher responderá con un error HTTP 400. Consulta la guía de solución de problemas para obtener asistencia.

Por ejemplo, puedes anular las opciones de manifiesto con el siguiente fragmento de código, que solicita dos manifiestos de transmisión con representaciones ordenadas de la tasa de bits más baja a la más alta.

...

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

streamManager.requestStream(streamRequest);

Limpia

Ahora que alojaste correctamente una transmisión de VOD con la API de Google Cloud Video Stitcher y la solicitaste con el SDK de DAI de IMA para HTML5, es importante que limpies los recursos de publicación.

Sigue la guía de limpieza de VOD para quitar los recursos y activos innecesarios.

Por último, en la ventana de la terminal en la que iniciaste el servidor web de Python 3, usa el comando ctrl+C para finalizar el servidor local.