Para habilitar la API Video Stitcher en tu proyecto, ponte en contacto con tu representante de cuentas o con el equipo de Ventas para obtener más información.

Esta página se ha traducido con Cloud Translation API.

Usar el SDK de inserción dinámica de anuncios de IMA con un cliente HTML5

Reproducir emisiones en directo registradas con la API Google Cloud Video Stitcher

En esta guía se muestra cómo usar el SDK de IMA DAI para HTML5 con el fin de solicitar y reproducir una emisión en directo de un evento registrado con la API Video Stitcher de Google Cloud, así como insertar un bloque de anuncios durante la reproducción.

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

Para obtener información sobre cómo integrar otras plataformas o usar los SDKs de IMA del lado del cliente, consulte SDKs de anuncios multimedia interactivos.

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

Configura un proyecto de Google Cloud.

Introduzca 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 activa: LOCATION

Número de proyecto

Número de proyecto de Google Cloud que usa la API Video Stitcher: PROJECT_NUMBER

Token de OAuth

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

OAUTH_TOKEN

Consulta más información sobre cómo crear credenciales de cuentas de servicio de duración reducida. El token de OAuth se puede reutilizar 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 la emisión en directo: El ID de configuración de la emisión en directo que especificaste al crear el evento: LIVE_CONFIG_ID
Clave de recurso personalizada: La clave de recurso personalizada de Ad Manager que se genera durante el proceso de creación de una configuración para un evento de emisión en directo con la API Video Stitcher: CUSTOM_ASSET_KEY

Configurar un entorno de desarrollo

Las aplicaciones de ejemplo de IMA solo muestran solicitudes de emisiones HLS. Puedes seguir usando las secuencias DASH al crear la clase VideoStitcherLiveStreamRequest. Cuando configures tu reproductor compatible con DASH, tendrás que configurar un receptor para los eventos de progreso del reproductor de vídeo que pueda proporcionar los metadatos del vídeo a StreamManager.processMetadata(). Esta función usa tres parámetros:

type: una cadena que debe definirse como 'ID3' para las emisiones HLS y 'urn:google:dai:2018' para las emisiones DASH.
data: en el caso de los mensajes de eventos de DASH, se trata de la cadena de datos del mensaje.
timestamp: número que indica la hora de inicio del mensaje de evento de las secuencias DASH.

Envía los metadatos tan pronto y con la frecuencia que permitan 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 provocaría que se informara de forma incorrecta sobre ellos.

Descargue los ejemplos de inserción dinámica de anuncios de IMA para HTML5 y extraiga el ejemplo sencillo de HLS.js en una carpeta nueva. Este ejemplo es una aplicación web que puedes alojar de forma local para hacer pruebas.

Para alojar el ejemplo de forma local, ve a la nueva carpeta 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 el servidor HTTP de Apache o Node.js.

Abre un navegador web y ve a localhost:8000 para ver un reproductor de vídeo. 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 vídeo, se iniciará el cortometraje "Tears of Steel" después de un breve anuncio. Este contenido se proporciona mediante una emisión de vídeo bajo demanda (VOD).

Solicitar una emisión en directo

Para sustituir la transmisión VOD de ejemplo por tu transmisión en directo, usa la clase VideoStitcherLiveStreamRequest que crea automáticamente una sesión de anuncios con Google Ad Manager. Puede usar la interfaz de usuario de Google Ad Manager para localizar las sesiones de inserción dinámica de anuncios generadas con fines de monitorización y depuración.

En el ejemplo, hay funciones para solicitar una emisión de VOD o una emisión en directo. Para que funcione con la API Google Cloud Video Stitcher, debes añadir una función para devolver un objeto VideoStitcherLiveStreamRequest.

Veamos 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 la emisión en directo se encuentran en un segmento de Cloud Storage, debes habilitar CORS para el origen http://localhost:8000.

Vuelve a cargar la página. Después, podrás solicitar y reproducir emisiones en directo personalizadas.

(Opcional) Añadir opciones de sesión de streaming

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

Por ejemplo, puedes anular las opciones del manifiesto con el siguiente fragmento de código, que solicita dos manifiestos de emisión con representaciones ordenadas 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": {
    "bitrateOrder": "ascending"
  }
};

streamManager.requestStream(streamRequest);

Insertar una pausa publicitaria

La API Google Cloud Video Stitcher inserta anuncios obtenidos de la etiqueta publicitaria de cada pausa publicitaria. Las pausas publicitarias se indican en el manifiesto mediante marcadores de anuncio. El codificador de emisiones en directo inserta los marcadores de anuncios.

Si usas tu propia emisión en directo, debes insertar el marcador de anuncio. Para obtener más información sobre los marcadores de anuncios HLS y DASH admitidos, consulte la documentación sobre marcadores de anuncios.
Si has creado una emisión en directo con la API Livestream de Google Cloud, inserta un evento de canal de pausa publicitaria.

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

Limpieza

Ahora que has alojado correctamente una emisión en directo con la API Video Stitcher de Google Cloud y la has solicitado con el SDK de DAI de IMA para HTML5, es importante que elimines los recursos de servicio.

Sigue la guía para limpiar las emisiones en directo para quitar los recursos y los activos que no necesites.

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

Chromecast

iOS