Usa el SDK de DAI de IMA con un cliente HTML5

Reproduce transmisiones en vivo registradas con la API de Video Stitcher de Google Cloud

En esta guía, se muestra cómo usar el SDK de DAI de IMA para HTML5 para solicitar y reproducir una transmisión en vivo de un evento registrado con la API de Google Cloud Video Stitcher, y cómo insertar una pausa publicitaria durante la reproducció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 IMA Para obtener más información sobre los SDKs del cliente, consulta SDK de anuncios multimedia interactivos.

Nota: El SDK de DAI de IMA para HTML5 admite transmisiones HLS y DASH, pero para reproducir cada una se requiere un reproductor multimedia o una extensión diferente, como HLS.js o DASH.js, con implementaciones variadas.

En esta guía, se explica cómo configurar HLS.js y el SDK de IMA DAI para reproducir una transmisión HLS, con notas importantes sobre las diferencias de implementación para DASH.

Consulte el contenido de IMA App de ejemplo de DASH.js como punto de partida para implementar transmisiones de DAI DASH con IMA

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 donde se creó tu configuración activa: 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 usuario de Video Stitcher rol:

OAUTH_TOKEN

Más información sobre crear credenciales de corta duración para los servicios . 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 en vivo

El ID de configuración en vivo que especificaste cuando creaste el evento de transmisión en vivo: LIVE_CONFIG_ID

Clave del activo personalizada

La clave del recurso personalizado de Ad Manager que se generó durante el proceso de creación de una configuración de un evento de transmisión en vivo con la API de Video Stitcher: CUSTOM_ASSET_KEY

Configura un entorno de desarrollo

Punto clave: La clase VideoStitcherLiveStreamRequest de DAI de IMA admite tanto HLS como y DASH de varios períodos transmisiones continuas. Se insertaron las pausas publicitarias solo entre los períodos de DASH.

Las apps de ejemplo de IMA solo demuestran solicitudes de transmisión HLS. Aún puedes seguir usando la forma de pago DASH cuando se construye la clase VideoStitcherLiveStreamRequest. 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 DASH. transmisiones continuas.

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.

Descargue los ejemplos de DAI de IMA para HTML5 y extrae el Ejemplo simple de HLS.js en una carpeta nueva Este ejemplo es una app web que puedes alojar a nivel local con fines de prueba.

Para alojar el ejemplo de manera local, navega a la carpeta nueva y ejecuta el siguiente comando: 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 el servidor HTTP de Apache 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, haz clic en el botón reproducir del video. jugador comienza el cortometraje "Lágrimas de acero" después de un anuncio breve. Este contenido se entrega a través de una transmisión de video on demand (VOD).

Solicitar una transmisión en vivo

Para reemplazar la transmisión de VOD de muestra por tu transmisión en vivo, usa la clase VideoStitcherLiveStreamRequest que crea automáticamente una sesión de anuncios con Google Ad Manager. Puedes Usar la IU de Google Ad Manager para encontrar las sesiones de DAI generadas para la supervisión y la depuración

En la muestra existente, existen 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 VideoStitcherLiveStreamRequest.

A continuación, se presenta un ejemplo:

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

  playButton.style.display = "none";
  playButton.removeEventListener('click', initiatePlayback);
  playButton.addEventListener('click', resumePlayback);
}
...

function requestVideoStitcherStream() {
  const streamRequest = new google.ima.dai.api.VideoStitcherLiveStreamRequest();
  streamRequest.liveStreamEventId = 'LIVE_CONFIG_ID';
  streamRequest.region = 'LOCATION';
  streamRequest.projectNumber = 'PROJECT_NUMBER';
  streamRequest.oAuthToken = 'OAUTH_TOKEN';
  streamRequest.networkCode = 'NETWORK_CODE';
  streamRequest.customAssetKey = 'CUSTOM_ASSET_KEY';

  streamManager.requestStream(streamRequest);
}

Para las pruebas locales, si los archivos de transmisión en vivo se encuentran en un bucket de Cloud Storage, debes habilitar CORS para el origen http://localhost:8000.

Vuelve a cargar la página. Luego, podrás solicitar y reproducir transmisiones en vivo personalizadas.

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

Personaliza tu solicitud de transmisión agregando opciones de sesión para anular el valor predeterminado. Configuración de la API de Cloud Video Stitcher con VideoStitcherLiveStreamRequest.videoStitcherSessionOptions Si proporcionas una opción no reconocida, el servicio de La API de 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": {
    "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);

Cómo insertar una pausa publicitaria

La API de Google Cloud Video Stitcher inserta anuncios recuperados de la etiqueta de anuncio para cada pausa publicitaria. Las pausas publicitarias se indican en el manifiesto con marcadores de anuncios. Los marcadores de anuncios son que insertaste el codificador de transmisión en vivo.

• Si usas tu propia transmisión en vivo, debes insertar el marcador del anuncio. Para obtener más información sobre los marcadores de anuncios HLS y DASH admitidos, consulta la documentación de marcadores de anuncios.

• Si creaste una transmisión en vivo con la API de Google Cloud Livestream, Inserta un evento de canal de pausa publicitaria.

El anuncio se reproduce inmediatamente después de insertar la pausa publicitaria.

Limpia

Ahora que alojaste con éxito una transmisión en vivo 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 para limpiar las transmisiones en vivo y quitar los recursos y activos innecesarios.

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