Use el SDK de IMA de DAI con un cliente HTML5

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

Esta guía muestra cómo usar el SDK de IMA de DAI para HTML5 para solicitar y reproducir un Transmisión de VOD de Google Cloud sesión.

En esta guía, se amplía el ejemplo básico de la sección Cómo comenzar guía para 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.

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

Este es 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 aplicaciones de ejemplo de IMA solo realizan demostraciones de solicitudes de transmisión de 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 tiene 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: Para los mensajes de eventos de DASH, 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 si faltan metadatos o no son correctos, es posible que el SDK de IMA de DAI no active eventos de anuncios lo que genera que los eventos de anuncios se informen de forma inadecuada.

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 que puedes alojar de manera 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 HLS.js biblioteca.

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 Video Stitcher de Google Cloud, debes hacer lo siguiente: Agrega una función nueva para mostrar un 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 el guía de solución de problemas para recibir asistencia.

Por ejemplo, puedes anular el opciones del manifiesto con el siguiente fragmento de código, que solicita dos manifiestos de transmisión con formatos ordenados de menor a mayor tasa de bits.

...

// The following session options are examples. Use session options
// that are compatible with your video stream.
streamRequest.videoStitcherSessionOptions = {
  "manifestOptions": {
    "includeRenditions": [
      {"bitrateBps": 3000, "codecs": "hvc1.1.4.L126.B0, mp4a.40.2"},
      {"bitrateBps": 2000, "codecs": "avc1.64001f, mp4a.40.2"},
    ],
    "bitrateOrder": "ascending"
  }
};

streamManager.requestStream(streamRequest);

Limpia

Ahora que alojaste correctamente una transmisión de VOD con la API de Video Stitcher de Google Cloud y la solicitud con el SDK de IMA de DAI para HTML5, es importante que limpies todas las publicaciones de Google Cloud.

Sigue el Limpieza de VOD para quitar los recursos y recursos 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