En esta guía, se demuestra cómo reproducir una transmisión de DAI con el SDK de DAI de IMA CAF. Si deseas ver o seguir una integración de muestra completa, descarga el ejemplo.
Antes de usar esta guía, asegúrate de familiarizarte con el protocolo del receptor web del framework de aplicaciones de Chromecast. En esta guía, se da por sentado que tienes un nivel básico de familiaridad con los conceptos del receptor de CAF, como interceptores de mensajes y objetos mediaInformation, además de familiaridad con el uso de la herramienta de comando y control de Cast, para emular un remitente de CAF.
Para usar la DAI de IMA, debe tener una cuenta de Ad Manager 360. Si tiene una cuenta de Ad Manager, comuníquese con él para obtener más detalles. Para obtener información sobre cómo registrarse en Ad Manager, visite el Centro de ayuda de Ad Manager.
Descripción general de la DAI de CAF
La implementación de la DAI con el SDK de DAI de IMA CAF incluye dos componentes principales, que se muestran en esta guía:
StreamRequest: Es un objeto que define una solicitud de transmisión a los servidores de publicidad de Google. StreamRequests se dividen en dos variedades principales:LiveStreamRequest: Especifica una clave del elemento y una clave de API opcional, además de otros parámetros opcionales.VODStreamRequest: Especifica un ID de fuente del contenido, un ID de video y una clave de API opcional, además de otros parámetros opcionales.
StreamManager: Es un objeto que controla la comunicación entre la transmisión de video por Internet y el SDK de DAI de IMA, como la activación de pings de seguimiento y el reenvío de eventos de transmisión al publicador.
Requisitos previos
Antes de comenzar, necesitas lo siguiente:
- Una cuenta de Consola para desarrolladores de Cast con un dispositivo de prueba registrado
- Una app receptora web registrada en tu Google Play Console que se puede modificar para alojar el código que se proporciona en esta guía
- Una app de envío configurada para usar tu app de receptor web
1. Configura los objetos MediaInfo del remitente
Primero, configura el objeto MediaInfo de tu app emisora para que incluya los siguientes campos:
| contentId | Un identificador único para este elemento multimedia | |
| contentUrl | La URL de transmisión de resguardo que se cargará si la DAI StreamRequest falla por algún motivo | |
| streamType | En el caso de las transmisiones en vivo, este valor se debe establecer como “EN VIVO”. Para las transmisiones de VOD, este valor se debe establecer en "BUFFERED". | |
| customData | assetKey. | Solo para transmisiones en vivo. Identifica la transmisión en vivo que se cargará |
| contentSourceId | Solo para transmisiones de VOD. Identifica el feed de contenido multimedia que contiene la transmisión solicitada. | |
| videoid | Solo para transmisiones de VOD. Identifica la transmisión solicitada en el feed multimedia especificado. | |
| Clave de API | Una clave de API opcional que se puede solicitar para recuperar la URL de transmisión del SDK de DAI de IMA. | |
| senderCanSkip | Un valor booleano para informar al receptor si el dispositivo emisor tiene la capacidad de mostrar un botón de omisión, lo que habilita la compatibilidad con anuncios que se pueden omitir | |
Para configurar estos valores en el comando de transmisión y la herramienta de control, haz clic en la pestaña "Load Media" y establece el tipo de solicitud de carga personalizada en "CARGAR". Luego, reemplaza los datos JSON en el área de texto con uno de los siguientes objetos JSON:
EN VIVO
{
"media": {
"contentId": "bbb",
"contentUrl": "https://storage.googleapis.com/interactive-media-ads/media/bbb.m3u8",
"streamType": "LIVE",
"customData": {
"assetKey": "sN_IYUG8STe1ZzhIIE_ksA",
"ApiKey": "",
"senderCanSkip": true
}
},
"credentials": "testCredentials"
}
VOD
{
"media": {
"contentId": "tos",
"contentUrl": "https://storage.googleapis.com/interactive-media-ads/media/tos.m3u8",
"streamType": "BUFFERED",
"customData": {
"contentSourceId": "2528370",
"videoId": "tears-of-steel",
"ApiKey": "",
"senderCanSkip": true
}
},
"credentials": "testCredentials"
}
Este objeto de solicitud de carga personalizada se puede enviar al receptor para probar cada uno de los siguientes pasos
2. Crea un receptor de CAF básico
Siguiendo la guía del receptor básico del SDK de CAF, crea un receptor web básico.
El código del receptor debería verse de la siguiente manera:
<html>
<head>
<script type="text/javascript"
src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js">
</script>
</head>
<body>
<cast-media-player></cast-media-player>
<script>
cast.framework.CastReceiverContext.getInstance().start();
</script>
</body>
</html>
3. Importe el SDK de DAI de IMA y obtenga Player Manager
Agregue una etiqueta de secuencia de comandos a fin de importar el SDK de DAI de IMA para CAF a su receptor web, justo después de que la secuencia de comandos cargue CAF. El SDK de DAI de CAF es permanente, por lo que no es necesario establecer una versión específica. Luego, en la etiqueta de la secuencia de comandos que se muestra a continuación, almacena el contexto del receptor y el administrador del reproductor como constantes antes de iniciar el receptor.
<html>
<head>
<script type="text/javascript"
src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
<script src="//imasdk.googleapis.com/js/sdkloader/cast_dai.js"></script>
</head>
<body>
<cast-media-player></cast-media-player>
<script>
const castContext = cast.framework.CastReceiverContext.getInstance();
const playerManager = castContext.getPlayerManager();
castContext.start();
</script>
</body>
</html>
4. Inicializa IMA Stream Manager
Inicializa el Stream Manager del SDK de DAI de CAF.
<html>
<head>
<script type="text/javascript"
src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
<script src="//imasdk.googleapis.com/js/sdkloader/cast_dai.js"></script>
</head>
<body>
<cast-media-player></cast-media-player>
<script>
const castContext = cast.framework.CastReceiverContext.getInstance();
const playerManager = castContext.getPlayerManager();
const streamManager = new google.ima.cast.dai.api.StreamManager();
castContext.start();
</script>
</body>
</html>
5. Crea el interceptor de mensajes de carga
El SDK de DAI de CAF usa el interceptor de mensajes de CAF para realizar solicitudes de transmisión y reemplazar la URL de contenido por la transmisión de DAI final. El interceptor de mensajes llamará a streamManager.requestStream(), que se encargará de configurar las pausas publicitarias, solicitar la transmisión y reemplazar la URL de contenido existente.
<html>
<head>
<script type="text/javascript"
src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
<script src="//imasdk.googleapis.com/js/sdkloader/cast_dai.js"></script>
</head>
<body>
<cast-media-player></cast-media-player>
<script>
const castContext = cast.framework.CastReceiverContext.getInstance();
const playerManager = castContext.getPlayerManager();
const streamManager = new google.ima.cast.dai.api.StreamManager();
const getStreamRequest = (request) => null;
playerManager.setMessageInterceptor(
cast.framework.messages.MessageType.LOAD, (request) => {
return streamManager.requestStream(request, getStreamRequest(request))
.then((request) => {
this.broadcast('Stream request successful.');
return Promise.resolve(request);
})
.catch((error) => {
this.broadcast('Stream request failed.');
return Promise.resolve(request);
});
});
castContext.start();
</script>
</body>
</html>
6. Crea la solicitud de transmisión
Para completar la integración de DAI en CAF, deberá crear su solicitud de transmisión con los datos que se incluyeron en el objeto mediaInfo del remitente.
<html>
<head>
<script type="text/javascript"
src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
<script src="//imasdk.googleapis.com/js/sdkloader/cast_dai.js"></script>
</head>
<body>
<cast-media-player></cast-media-player>
<script>
const castContext = cast.framework.CastReceiverContext.getInstance();
const playerManager = castContext.getPlayerManager();
const streamManager = new google.ima.cast.dai.api.StreamManager();
const getStreamRequest = (request) => {
const imaRequestData = request.media.customData;
let streamRequest = null;
if (imaRequestData.assetKey) {
// Live stream
streamRequest = new google.ima.cast.dai.api.LiveStreamRequest();
streamRequest.assetKey = imaRequestData.assetKey;
} else if (imaRequestData.contentSourceId) {
// VOD stream
streamRequest = new google.ima.cast.dai.api.VODStreamRequest();
streamRequest.contentSourceId = imaRequestData.contentSourceId;
streamRequest.videoId = imaRequestData.videoId;
}
if (streamRequest && imaRequestData.ApiKey) {
streamRequest.ApiKey = imaRequestData.ApiKey;
}
if (streamRequest && imaRequestData.senderCanSkip) {
streamRequest.senderCanSkip = imaRequestData.senderCanSkip;
}
return streamRequest;
};
playerManager.setMessageInterceptor(
cast.framework.messages.MessageType.LOAD, (request) => {
return streamManager.requestStream(request, getStreamRequest(request))
.then((request) => {
return Promise.resolve(request);
})
.catch((error) => {
this.broadcast('Stream request failed.');
return Promise.resolve(request);
});
});
castContext.start();
</script>
</body>
</html>
¡Y listo! Ahora puede solicitar y reproducir transmisiones de DAI con el SDK de DAI de Google para CAF. Para obtener más información sobre las funciones avanzadas del SDK, consulta las otras guías o descarga nuestras aplicaciones receptoras de muestra.