Los SDK de IMA facilitan la integración de anuncios multimedia en tus sitios web y aplicaciones. Los SDKs de IMA pueden solicitar anuncios de cualquier servidor de anuncios compatible con VAST y administrar la reproducción de anuncios en tus aplicaciones. Con los SDKs de IMA DAI, las apps realizan una solicitud de transmisión para el video del anuncio y el contenido, ya sea VOD o contenido en vivo. Luego, el SDK devuelve una transmisión de video combinada, de modo que no tengas que administrar el cambio entre el anuncio y el video de contenido en tu app.
Selecciona la solución de DAI que te interesa
Reproduce transmisiones en vivo registradas con la API de Google Cloud Video Stitcher
En esta guía, se muestra cómo usar el SDK de IMA DAI 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.
Esta guía amplía el ejemplo básico de la guía de inicio de IMA DAI.
Para obtener información sobre la integración con otras plataformas o el uso de los SDKs de IMA del cliente, consulta SDKs de Interactive Media Ads.
Para ver o seguir una integración de muestra completa, descarga el ejemplo de Cloud Video Stitcher para HLS o DASH.
Configura un proyecto de Google Cloud
Configura un proyecto de Google Cloud y cuentas de servicio para acceder al proyecto.
Crea una configuración para un evento de transmisión en vivo con tu propia transmisión en vivo de contenido o una transmisión en vivo de prueba. En esta guía, se espera una transmisión HLS.
Ingresa 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 del proyecto
- Número del proyecto de Google Cloud que usa la API de Video Stitcher:
PROJECT_NUMBER - Token de OAuth
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 credenciales de corta duración para cuentas de servicio. El token de OAuth se puede reutilizar en varias solicitudes siempre y cuando no haya vencido.
- 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 tu evento de transmisión en vivo:
LIVE_CONFIG_ID - Clave del activo personalizada
- La clave de recurso personalizado de Ad Manager que se genera durante el proceso de creación de una configuración para un evento de transmisión en vivo con la API de Video Stitcher:
CUSTOM_ASSET_KEY
Configura un entorno de desarrollo
Las aplicaciones de ejemplo del IMA solo demuestran solicitudes de transmisión HLS. Aún puedes usar transmisiones de DASH cuando construyas la clase VideoStitcherLiveStreamRequest. Cuando configures tu reproductor compatible con DASH, deberás 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 toma tres parámetros:
type: Es una cadena que debe establecerse en'ID3'para las transmisiones HLS y en'urn:google:dai:2018'para las transmisiones DASH.data: En el caso de los mensajes de eventos de DASH, esta es la cadena de datos del mensaje.timestamp: Es un número que indica la hora de inicio del mensaje de evento para las transmisiones de DASH.
Envía los metadatos tan pronto y con la frecuencia que puedan proporcionarlos 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 generaría informes incorrectos de eventos de anuncios.
Descarga los ejemplos de DAI de IMA para HTML5 y extrae la muestra Simple de HLS.js en una carpeta nueva. Este ejemplo es una app web que puedes alojar de forma 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 8000http.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 la biblioteca HLS.js.
Si todo funciona correctamente, al hacer clic en el botón de reproducción del reproductor de video, se iniciará el cortometraje "Tears of Steel" después de un breve anuncio. Este contenido se entrega a través de una transmisión de video on demand (VOD).
Cómo 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 ubicar las sesiones de DAI generadas con fines de supervisión y 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 Google Cloud Video Stitcher, debes agregar una función nueva para devolver un objeto 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 la 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.
(Opcional) Agrega opciones de sesión de transmisión
Personaliza tu solicitud de transmisión agregando opciones de sesión para anular la configuración predeterminada de la API de Cloud Video Stitcher con VideoStitcherLiveStreamRequest.videoStitcherSessionOptions.
Si proporcionas una opción no reconocida, la API de Cloud 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 representaciones 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": {
"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 corte publicitario. Las pausas publicitarias se indican en el manifiesto con marcadores de anuncios. El codificador de la transmisión en vivo inserta los marcadores de anuncios.
Si usas tu propia transmisión en vivo, debes insertar el marcador de anuncio. Para obtener más información sobre los marcadores de anuncios de 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 corte comercial.
El anuncio se reproduce inmediatamente después de que se inserta la pausa publicitaria.
Limpia
Ahora que alojaste correctamente una transmisión en vivo con la API de Google Cloud Video Stitcher y la solicitaste con el SDK de IMA de DAI para HTML5, es importante que limpies los recursos de entrega.
Sigue la guía de limpieza de transmisiones en vivo para quitar los recursos y activos 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.