Los SDKs de IMA facilitan la integración de anuncios multimedia en tus sitios web y apps. Los SDKs de IMA pueden solicitar anuncios de cualquier servidor de anuncios que cumpla con VAST y administrar la reproducción de anuncios en tus apps. Con los SDKs de DAI de IMA, las apps realizan una solicitud de transmisión de anuncios y videos de contenido, ya sea VOD o contenido en vivo. Luego, el SDK muestra una transmisión de video combinada para que no tengas que administrar el cambio entre el video de anuncios y el de contenido dentro de tu app.
Selecciona la solución de DAI que te interesa
Reproducir transmisiones en vivo registradas con la API de Google Cloud Video Stitcher
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 guía de introducción a la DAI de IMA.
Para obtener información sobre la integración con otras plataformas o el uso de los SDKs del cliente de IMA, consulta SDKs de anuncios multimedia interactivos.
Para ver o seguir una integración de muestra completa, descarga el ejemplo de compaginador de videos de Cloud 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 de contenido o una transmisión 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
- 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 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 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 personalizado
- La clave de activo 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 apps de ejemplo de IMA solo demuestran solicitudes de transmisión HLS. Puedes seguir usando transmisiones DASH cuando construyes 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 se debe establecer 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 DASH, esta es la cadena de datos del mensaje.timestamp: Es un número que corresponde a la hora de inicio del mensaje del evento para las transmisiones DASH.
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.
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 hosting 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 8000
http.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, cuando hagas clic en el botón Reproducir 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 localizar las sesiones de DAI generadas y realizar la supervisión y la 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 mostrar 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 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)
Para personalizar tu solicitud de transmisión, agrega 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 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. 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 HLS y DASH compatibles, 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 en la que iniciaste el servidor web de Python 3, usa el comando ctrl+C para finalizar el servidor local.