Selecciona la solución de DAI que te interesa
DAI de servicio completo
En esta guía, se muestra cómo reproducir una transmisión de DAI con el SDK de DAI para CAF de IMA. Si que le gustaría ver o seguir con una integración de muestra completa descarga el ejemplo.
Antes de utilizar esta guía, asegúrate de familiarizarte con el Chromecast
Protocolo del receptor web del framework de aplicaciones Esta
supone un nivel básico de familiaridad con los conceptos del receptor de CAF, como
mensaje
interceptores
y
mediaInformation
y saber usar las Comandos y controles de Cast
para emular un emisor de CAF.
Para usar la DAI de IMA, debe tener una cuenta de Ad Manager 360. Si tienes un anuncio Cuenta de administrador, comunícate con tu administrador de cuentas para obtener más detalles. Información sobre cómo registrarse en Ad Manager, visita el Centro de ayuda de Ad Manager Center.
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.
Descripción general de la DAI de CAF
La implementación de la DAI con el SDK de DAI de CAF de IMA consta de dos componentes principales: se demuestra en esta guía:
StreamRequest
: Es un objeto que define una solicitud de transmisión a los servidores de publicidad de Google. Existen dos variedades principales de solicitudes de transmisión:LiveStreamRequest
: especifica una clave de activo y una clave de API opcional, así como otras parámetros opcionales.VODStreamRequest
: Especifica un ID de fuente de contenido, un ID de video y una API opcional. clave y otros parámetros opcionales.
StreamManager
: Un objeto que controla la comunicación entre la transmisión de video por Internet y la DAI de IMA como activar pings de seguimiento y reenviar eventos de transmisión al publicador.
Requisitos previos
- Una cuenta de Play Console con una dispositivo de prueba registrado.
- Un receptor web alojado App que se registrados en tu Consola para desarrolladores de Cast y que se pueden modificar para alojar el código proporcionado en esta guía.
- Una app de envío que esté configurada para usar tu app de receptor web En este ejemplo, usa la herramienta de Comando y control de Cast como el remitente.
Configurar los objetos MediaInfo del remitente
Primero, configura el campo MediaInfo de tu app emisora objeto que se debe incluir los siguientes campos:
contentId
|
Un identificador único para este elemento multimedia | |
contentUrl
|
La URL de transmisión de resguardo que se cargará si el StreamRequest de DAI falla durante cualquier Motivo | |
streamType
|
Para las transmisiones en vivo, este valor se debe configurar como "EN VIVO". Para las transmisiones de VOD, este valor se debe configurar como `BUFFERED` | |
customData
|
assetKey
|
Solo transmisiones en vivo. Identifica la transmisión en vivo que se cargará |
contentSourceId
|
Solo transmisiones de VOD. Identifica el feed de medios que contiene la transmisión solicitada. | |
videoId
|
Solo transmisiones de VOD. Identifica la transmisión solicitada en el feed de medios especificado. | |
ApiKey
|
Clave de API opcional que puede solicitarse para recuperar la URL de la transmisión desde SDK de IMA de DAI | |
senderCanSkip
|
Un valor booleano para que el receptor sepa si el dispositivo emisor tiene Capacidad de mostrar un botón de omitir, lo que habilita la compatibilidad con anuncios que se pueden omitir |
Para configurar estos valores en la herramienta de comando y control de transmisión, haz clic en el botón Cargar
Media y establece el tipo de solicitud de carga personalizado en LOAD
. Luego, reemplaza el
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": "2548831",
"videoId": "tears-of-steel",
"ApiKey": "",
"senderCanSkip": true
}
},
"credentials": "testCredentials"
}
Este objeto de solicitud de carga personalizado se puede enviar al receptor para probar el los siguientes pasos.
Cómo crear un receptor CAF básico
Sigue la Guía básica del receptor del SDK de CAF para crear un receptor web básico.
El código de tu 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>
Importa el SDK de IMA de DAI y obtén el Administrador del reproductor
Agregue una etiqueta de secuencia de comandos para importar el SDK de IMA de DAI para CAF a su receptor web. después de que la secuencia de comandos carga el CAF. El SDK de DAI de CAF es perdurable, por lo que no es necesario para establecer una versión específica. Luego, en la etiqueta de secuencia de comandos que sigue, guarda el contexto del receptor y el administrador de jugadores 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>
Inicializa IMA Stream Manager
Inicializa la transmisión del SDK de DAI de CAF! Administrador.
<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>
Crea el interceptor de mensajes de carga
El SDK de DAI de CAF utiliza el mensaje de carga de CAF
interceptor
para realizar solicitudes de transmisión y reemplazar la URL de contenido por la transmisión de DAI final.
El interceptor de mensajes llama a streamManager.requestStream(), que controla
configurar pausas publicitarias, solicitar la transmisión y reemplazar las existentes
contentURL
Solo puede haber un interceptor de mensajes de carga, por lo que, si tu app requiere su uso, del interceptor, debes incorporar funciones personalizadas en la misma devolución de llamada.
<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>
Compila la solicitud de transmisión
Para completar la integración de la DAI de CAF, debes crear tu transmisión
solicitud
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>
Ahora puede solicitar y reproducir transmisiones de DAI con el SDK de DAI de CAF de Google. Para obtener más información sobre funciones del SDK más avanzadas, consulta las otras guías o descarga nuestra muestra receptora aplicaciones.