Usa el SDK de DAI de IMA con un cliente HTML5

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 DAI para HTML5 para 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 guía de introducción a la DAI de IMA.

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.

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

Configura un proyecto de Google Cloud

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

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

El 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 volver a usar en varias solicitudes, siempre que no haya caducado.

Código de red

El código de red de Ad Manager para solicitar anuncios: NETWORK_CODE

ID de configuración de VOD

El 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 para crear una configuración de VOD con la combinación de Cloud.

Configura un entorno de desarrollo

Las apps de ejemplo de IMA solo demuestran solicitudes de transmisión HLS. Puedes seguir usando transmisiones DASH cuando construyes la clase VideoStitcherVodStreamRequest. Cuando configures tu reproductor compatible con DASH, debes 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 se debe establecer 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 DASH, esta es la cadena de datos del mensaje.

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

Envía los metadatos lo antes posible y con la frecuencia que puedan proporcionar tus eventos de jugador. Si faltan metadatos o no son correctos, es posible que el SDK de IMA DAI no active los eventos de anuncios, lo que provocará que se informen de forma incorrecta.

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 Reproducir del reproductor de video, se iniciará el cortometraje "Tears of Steel", con pausas publicitarias cada 30 segundos.

Cómo solicitar una transmisión de VOD

Para reemplazar la transmisión de muestra por tu transmisión de VOD con anuncios integrados, 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 localizar las sesiones de DAI generadas y realizar la supervisión y la 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 mostrar un objeto VideoStitcherVodStreamRequest.

A continuación, se presenta un 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.

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

Para personalizar tu solicitud de transmisión, agrega 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 renderizaciones 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);

Libera espacio

Ahora que alojaste correctamente una transmisión de VOD con la API de Google Cloud Video Stitcher y la solicitaste con el SDK de IMA DAI para HTML5, es importante limpiar 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.

Anterior
Chromecast
Siguiente
iOS