Use el SDK de IMA de DAI con un cliente HTML5

Reproduce transmisiones en vivo 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 en vivo de un evento registrado en la herramienta de unión de videos de Google Cloud API 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 uno se requiere una un reproductor multimedia o una extensión diferentes, HLS.js o DASH.js, con valores variables de Google Cloud.

En esta guía, se explica cómo configurar HLS.js y el SDK de IMA de DAI para reproducir una transmisión HLS con notas importantes sobre las diferencias de implementación de 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 con 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 y cuando no haya vencido.

Código de red

Este es 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 aplicaciones de ejemplo de IMA solo realizan demostraciones de solicitudes de transmisión de HLS. Aún puedes seguir usando la forma de pago DASH cuando se construye la clase VideoStitcherLiveStreamRequest. Cuándo Cuando configuras un reproductor compatible con DASH, debes establecer un objeto de escucha los eventos de progreso del reproductor de video que pueden proporcionar los metadatos del video a StreamManager.processMetadata(). Esta función tiene tres parámetros:

1. type: Es una cadena que se debe configurar como 'ID3' para transmisiones HLS y 'urn:google:dai:2018' para 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 tan pronto y con la frecuencia que los eventos de tu reproductor puedan proporcionar. Si si faltan metadatos o no son correctos, el SDK de IMA de DAI podría no activar eventos de anuncios lo que genera que los eventos de anuncios se informen de forma inadecuada.

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 HLS.js biblioteca.

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 es mediante una transmisión de video on demand (VOD).

Solicitar una transmisión en vivo

Para reemplazar la transmisión de VOD de muestra con tu transmisión en vivo, usa el 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 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 Video Stitcher de Google Cloud, necesitas para agregar una nueva función que devuelva un VideoStitcherLiveStreamRequest .

Por 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 bucket, debes habilitar CORS para el origen http://localhost:8000.

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

Agrega opciones de sesiones 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 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.

...

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 para obtener más información sobre los marcadores de anuncios HLS y DASH admitidos, consulte la documentación sobre 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 que se inserta la pausa publicitaria.

Limpia

Ahora que ya organizaste correctamente una transmisión en vivo 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 transmisión en vivo para quitar los recursos y recursos 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