Cómo comenzar a usar el SDK de IMA de DAI

Los SDK de IMA facilitan la integración de anuncios multimedia en sus sitios web y aplicaciones. Los SDK de IMA pueden solicitar anuncios de cualquier servidor de anuncios compatible con VAST y administra la reproducción de anuncios en tus apps. Con los SDK de IMA de DAI, las aplicaciones solicitud de transmisión para anuncios y videos de contenido, ya sea VOD o contenido en vivo. Luego, el SDK muestra un una transmisión de video por Internet combinada, de modo que no tenga que administrar el cambio entre el video del anuncio y el de contenido dentro de la app.

Selecciona la solución de DAI que te interesa

Servicio completo Publicación de grupos de anuncios API de Cloud Union en vivo VOD de la API de Cloud Union

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 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

Configura un proyecto de Google Cloud y configura cuentas de servicio para acceder al proyecto.

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

Ubicación

La región de Google Cloud donde se creó la configuración de VOD: 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 cuentas de OAuth de corta duración tokens. 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 de VOD

El ID de configuración de VOD para la transmisión de VOD: VOD_CONFIG_ID

Obtén más información sobre cómo crear el ID de configuración de VOD en el lab Unión de imágenes en la nube para crear un Guía de configuración de VOD.

Configura un entorno de desarrollo

Punto clave: La clase VideoStitcherVodStreamRequest 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 VideoStitcherVodStreamRequest. 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 hls_js/simple archivo ZIP de muestra en una carpeta nueva. Este ejemplo es una que puedes alojar de manera local para realizar pruebas.

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. comienza el cortometraje "Lágrimas de acero", con pausas publicitarias cada 30 segundos.

Solicita una transmisión de VOD

Para reemplazar la transmisión de muestra con tu transmisión de VOD unida con el anuncio, usa el VideoStitcherVodStreamRequest para crear 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, debes hacer lo siguiente: Agrega una función nueva para mostrar un VideoStitcherVodStreamRequest. .

Por 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 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 VideoStitcherVodStreamRequest.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.

...

// 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 donde iniciaste el servidor web de Python 3, usa el comando ctrl+C para finalizar el servidor local