1. Descripción general
En este codelab, aprenderás a compilar una app receptora web personalizada que use la API de Cast Ad Breaks.
¿Qué es Google Cast?
Google Cast permite a los usuarios transmitir contenido desde un dispositivo móvil a una TV. De esa manera, los usuarios pueden usar su dispositivo móvil como control remoto de modo que se reproduzca contenido multimedia en la TV.
El SDK de Google Cast posibilita que extiendas tu app para controlar una TV o un sistema de sonido. El SDK de Cast te permite agregar los componentes de la IU necesarios según la lista de tareas de diseño de Google Cast.
Te proporcionamos la lista de tareas de diseño de Google Cast con el fin de que la experiencia del usuario de Cast resulte sencilla y predecible en todas las plataformas compatibles.
¿Qué compilaremos?
Cuando hayas completado este codelab, habrás compilado un receptor de transmisiones que aprovecha la nueva API de Break.
Qué aprenderás
- Cómo incluir pausas de VMAP y VAST en el contenido de Cast
- Cómo omitir clips de pausa
- Cómo personalizar el comportamiento de pausa predeterminado en la búsqueda
Requisitos
- El navegador más reciente de Google Chrome
- Servicio de hosting HTTPS, como Firebase Hosting o Ngrok
- Un dispositivo Google Cast, como Chromecast o Android TV, que esté configurado con acceso a Internet
- Una TV o un monitor con entrada HDMI o un Google Home Hub
Experiencia
- Deberá tener conocimientos previos sobre desarrollo web.
- Experiencia previa en la compilación de aplicaciones de recepción y remitente de Cast.
¿Cómo usarás este instructivo?
¿Cómo calificarías tu experiencia cuando compilas apps web?
2. Obtén el código de muestra
Puedes descargar el código de muestra completo a tu computadora…
y descomprimir el archivo ZIP que se descargó.
3. Implementa tu receptor de forma local
Para poder usar tu receptor web con un dispositivo de transmisión, debe estar alojado en un lugar donde tu dispositivo de transmisión pueda acceder a él. Si ya tienes un servidor disponible que sea compatible con https, omite las siguientes instrucciones y anota la URL, ya que la necesitarás en la siguiente sección.
Si no tienes un servidor disponible para usar, puedes usar Firebase Hosting o Ngrok.
Ejecuta el servidor
Una vez que hayas configurado el servicio que desees, navega a app-start e inicia tu servidor.
Toma nota de la URL del receptor alojado. Lo utilizará en la próxima sección.
4. Registra una aplicación en la Consola para desarrolladores de Cast
Debes registrar tu aplicación para poder ejecutar una app receptora personalizada, como las que se compila en este codelab, en dispositivos Chromecast. Una vez que hayas registrado tu aplicación, recibirás un ID de aplicación que tu aplicación emisora debe utilizar para realizar llamadas a la API, por ejemplo, para iniciar una aplicación receptora.
Haz clic en "Agregar aplicación nueva".
Seleccione "Receptor personalizado", que es lo que estamos creando.
Ingresa los detalles del receptor nuevo. Asegúrate de usar la URL final.
en la última sección. Toma nota del ID de aplicación asignado al receptor nuevo.
También debes registrar tu dispositivo Google Cast para que acceda a la aplicación receptora antes de publicarla. Una vez que publiques la aplicación receptora, estará disponible para todos los dispositivos Google Cast. A los fines de este codelab, se recomienda trabajar con una aplicación receptora no publicada.
Haz clic en "Agregar nuevo dispositivo".
Ingresa el número de serie impreso en la parte posterior del dispositivo de transmisión y asígnale un nombre descriptivo. También puedes encontrar el número de serie si transmites la pantalla en Chrome cuando accedes a la Consola para programadores del SDK de Google Cast
El receptor y el dispositivo tardarán entre 5 y 15 minutos en estar listos para la prueba. Después de esperar entre 5 y 15 minutos, debes reiniciar tu dispositivo de transmisión.
5. Prepara el proyecto de inicio
Antes de comenzar este codelab, te recomendamos que revises la guía para desarrolladores de anuncios, que proporciona una descripción general de la nueva funcionalidad de anuncios.
Debemos agregar compatibilidad con Google Cast a la app inicial que descargaste. A continuación, te mostramos la terminología de Google Cast que usaremos en este codelab:
- una app emisora se ejecuta en un dispositivo móvil o una laptop.
- una app receptora se ejecuta en el dispositivo Google Cast.
Ya puedes compilar sobre el proyecto inicial con tu editor de texto favorito:
- Selecciona el directorio
app-startdel código de muestra descargado. - Abre
js/receiver.jsy, luego, index.html.
Ten en cuenta que, mientras trabajas en este codelab, http-server debería detectar los cambios que realices. Si no es así, intenta finalizar y reiniciar http-server.
En el caso de nuestro remitente, usaremos la Herramienta de depuración de receptores de CAF para iniciar una sesión de transmisión. El receptor está diseñado para comenzar a reproducir una transmisión automáticamente.
Diseño de apps
La app receptora inicializa la sesión de transmisión y permanecerá en espera hasta que llegue una solicitud de CARGA (es decir, el comando para reproducir contenido multimedia).
La app consta de una vista principal, definida en index.html, y un archivo de JavaScript llamado js/receiver.js, que contiene toda la lógica para que funcione la app receptora.
index.html
Este archivo html contendrá toda la IU para nuestra app receptora. Por ahora, está prácticamente vacía.
receptor.js
Esta secuencia de comandos administrará toda la lógica para nuestra app receptora. En este momento, contiene un receptor CAF básico.
6. Agregue VMAP a su contenido
Para comenzar, abre el remitente web en Chrome. Ingresa el ID de aplicación del receptor que recibiste en Play Console del SDK de Cast y haz clic en "Configurar".
En el receptor, debemos agregar lógica para incluir anuncios en el contenido.
Copia la siguiente línea en el archivo js/receiver.js. Contiene un ejemplo de vínculo de etiqueta de VMAP de DoubleClick y algunas opciones aleatorias.
const vmapUrl = "https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator=" + Math.floor(Math.random() * Math.pow(10, 10));
En tu js/receiver.js file, busca la función playerManager.setMessageInterceptor y agrega lo siguiente antes de la última línea return request; de la función.
request.media.vmapAdsRequest = {
adTagUrl: vmapUrl,
};
Nota: El objeto asignado a vmapAdsRequest anterior es una versión abreviada de un objeto VastAdsRequest.
Guarda los cambios en js/receiver.js e inicia una sesión de transmisión en el remitente web. Para ello, haz clic con el botón derecho en cualquier parte de la página y selecciona "Transmitir". La transmisión de anuncios debería comenzar a reproducirse de inmediato.
7. Agregue VAST a su contenido
Si implementó el código de VMAP que se menciona más arriba, coméntelo. A continuación, veremos cómo implementar anuncios de VAST en el contenido.
Copia lo siguiente en tu archivo js/receiver.js. Contiene seis clips de pausa de VAST de DoubleClick y un poco de aleatorización. Estos clips de pausa se asignan a 5 pausas. También se especifica la posición de cada pausa.
const addVASTBreaksToMedia = (mediaInformation) => {
mediaInformation.breakClips = [
{
id: "bc1",
title: "bc1 (Pre-roll)",
vastAdsRequest: {
adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?slotname=/124319096/external/ad_rule_samples&sz=640x480&ciu_szs=300x250&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&url=&unviewed_position_start=1&output=xml_vast3&impl=s&env=vp&gdfp_req=1&ad_rule=0&vad_type=linear&vpos=preroll&pod=1&ppos=1&lip=true&min_ad_duration=0&max_ad_duration=30000&vrid=6256&correlator=' + Math.floor(Math.random() * Math.pow(10, 10)) + '&video_doc_id=short_onecue&cmsid=496&kfa=0&tfcd=0'
}
},
{
id: "bc2",
title: "bc2 (Mid-roll)",
vastAdsRequest: {
adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?slotname=/124319096/external/ad_rule_samples&sz=640x480&ciu_szs=300x250&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&url=&unviewed_position_start=1&output=xml_vast3&impl=s&env=vp&gdfp_req=1&ad_rule=0&cue=15000&vad_type=linear&vpos=midroll&pod=2&mridx=1&rmridx=1&ppos=1&lip=true&min_ad_duration=0&max_ad_duration=30000&vrid=6256&correlator=' + Math.floor(Math.random() * Math.pow(10, 10)) + '&video_doc_id=short_onecue&cmsid=496&kfa=0&tfcd=0'
}
},
{
id: "bc3",
title: "bc3 (Mid-roll)",
vastAdsRequest: {
adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?slotname=/124319096/external/ad_rule_samples&sz=640x480&ciu_szs=300x250&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&url=&unviewed_position_start=1&output=xml_vast3&impl=s&env=vp&gdfp_req=1&ad_rule=0&cue=15000&vad_type=linear&vpos=midroll&pod=2&mridx=1&rmridx=1&ppos=1&lip=true&min_ad_duration=0&max_ad_duration=30000&vrid=6256&correlator=' + Math.floor(Math.random() * Math.pow(10, 10)) + '&video_doc_id=short_onecue&cmsid=496&kfa=0&tfcd=0'
}
},
{
id: "bc4",
title: "bc4 (Mid-roll)",
vastAdsRequest: {
adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?slotname=/124319096/external/ad_rule_samples&sz=640x480&ciu_szs=300x250&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&url=&unviewed_position_start=1&output=xml_vast3&impl=s&env=vp&gdfp_req=1&ad_rule=0&cue=15000&vad_type=linear&vpos=midroll&pod=2&mridx=1&rmridx=1&ppos=1&lip=true&min_ad_duration=0&max_ad_duration=30000&vrid=6256&correlator=' + Math.floor(Math.random() * Math.pow(10, 10)) + '&video_doc_id=short_onecue&cmsid=496&kfa=0&tfcd=0'
}
},
{
id: "bc5",
title: "bc5 (Mid-roll)",
vastAdsRequest: {
adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?slotname=/124319096/external/ad_rule_samples&sz=640x480&ciu_szs=300x250&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&url=&unviewed_position_start=1&output=xml_vast3&impl=s&env=vp&gdfp_req=1&ad_rule=0&cue=15000&vad_type=linear&vpos=midroll&pod=2&mridx=1&rmridx=1&ppos=1&lip=true&min_ad_duration=0&max_ad_duration=30000&vrid=6256&correlator=' + Math.floor(Math.random() * Math.pow(10, 10)) + '&video_doc_id=short_onecue&cmsid=496&kfa=0&tfcd=0'
}
},
{
id: "bc6",
title: "bc6 (Post-roll)",
vastAdsRequest: {
adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?slotname=/124319096/external/ad_rule_samples&sz=640x480&ciu_szs=300x250&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&url=&unviewed_position_start=1&output=xml_vast3&impl=s&env=vp&gdfp_req=1&ad_rule=0&vad_type=linear&vpos=postroll&pod=3&ppos=1&lip=true&min_ad_duration=0&max_ad_duration=30000&vrid=6256&correlator=' + Math.floor(Math.random() * Math.pow(10, 10)) + '&video_doc_id=short_onecue&cmsid=496&kfa=0&tfcd=0'
}
}
];
mediaInformation.breaks = [
{
id: "b1",
breakClipIds: ["bc1"],
position: 0
},
{
id: "b2",
breakClipIds: ["bc2"],
position: 15
},
{
id: "b3",
breakClipIds: ["bc3","bc4"],
position: 60
},
{
id: "b4",
breakClipIds: ["bc5"],
position: 100
},
{
id: "b5",
breakClipIds: ["bc6"],
position: -1
}
];
};
Nota: La propiedad breakClipIds de una pausa es un array. Esto significa que se pueden asignar varios clips de pausa a cada pausa.
En tu js/receiver.js file, busca el interceptor de mensajes LOAD, es decir, la línea que comienza con playerManager.setMessageInterceptor, y agrega lo siguiente antes de la última línea return request; de la función.
addVASTBreaksToMedia(request.media);
Guarda los cambios en js/receiver.js e inicia una sesión de transmisión en el remitente web. Para ello, haz clic con el botón derecho en cualquier parte de la página y selecciona "Transmitir". La transmisión de anuncios debería comenzar a reproducirse de inmediato.
8. Cómo omitir pausas publicitarias
CAF tiene una nueva clase llamada BreakManager que lo ayuda a implementar reglas empresariales personalizadas para los comportamientos de los anuncios. Supongamos que deseas permitir que los clientes otorguen un período de gracia para omitir anuncios después de un período determinado.
El remitente en nuestro ejemplo no tiene controles multimedia. Agreguemos una compensación inicial de 10 segundos para que la transmisión comience a reproducirse después del anuncio previo al video, pero antes del primer rompecabezas del anuncio durante el video a los 15 segundos.
Busca el elemento playerManager.setMessageInterceptor y agrega la siguiente línea antes de return request.
request.currentTime = 10;
Guarda el archivo receiver.js y, luego, inicia una sesión de transmisión. Deberías ver que el contenido se carga a los 10 segundos y, luego, reproducir un anuncio 5 segundos después.
Ahora, agregaremos una regla para omitir el anuncio durante el video a los 15 segundos.
Necesitarás una instancia de BreakManager a fin de configurar un interceptor para la carga de pausa. Copia la siguiente línea en el archivo js/receiver.js, después de las líneas que contienen las variables context y playerManager.
const breakManager = playerManager.getBreakManager();
Ahora, configuremos un interceptor con una regla para ignorar cualquier pausa publicitaria que se produzca antes de los 30 segundos. Este interceptor funciona como el interceptor LOAD en PlayerManager, excepto que es específico para cargar BreakClips.
Copia lo siguiente en tu archivo js/receiver.js.
breakManager.setBreakClipLoadInterceptor((breakClip, breakCtx) => {
/** Below code will skip playback of break clips if the break position is less than 30 **/
let breakObj = breakCtx.break;
if(breakObj.position < 30)
return null;
else
return breakClip;
});
Nota: Aquí se muestra un valor nulo para los BreakClips que se deben omitir.
Guarda los cambios en js/receiver.js e inicia una sesión de transmisión en el remitente web. Para ello, haz clic con el botón derecho en cualquier parte de la página y selecciona "Transmitir".
La transmisión debería comenzar a reproducirse, pero se omitirá el bloque de anuncios que vimos anteriormente a los 15 segundos.
9. Cómo personalizar el comportamiento de la pausa de búsqueda
Cuando un usuario busca hacia delante, se reproduce la última pausa no reproducida entre el objeto searchFrom y el intent search para que el video comience a reproducirse desde la posición searchTo. Cuando un usuario busca la opción anterior, no se reproduce ninguna pausa. Este es el comportamiento predeterminado de las pausas.
Para personalizar las pausas que se juegan en una búsqueda, aprovechamos BreakManager. Usamos setBreakSeekInterceptor de BreakManager para especificar el comportamiento personalizado que deseamos. Cuando se realiza una operación de búsqueda, se invoca setBreakSeekInterceptor.
Pasamos una función de devolución de llamada a setBreakSeekInterceptor. La función de devolución de llamada recibe un objeto que contiene todas las pausas entre la posición searchFrom y la posición searchTo.
Ahora, configuremos un interceptor con una regla para reproducir una pausa que no se haya observado aún entre la posición searchFrom y la posición searchTo.
Copia lo siguiente en tu archivo js/receiver.js.
breakManager.setBreakSeekInterceptor(function(breakSeekData) {
/**
*
* Below code will play an unwatched break between seekFrom and seekTo position
* Note: If the position of a break is less than 30 then it will be skipped due to the setBreakClipLoadInterceptor code
*/
let breakToPlay;
for (let i = 0; i < breakSeekData.breaks.length; i++) {
if (!breakSeekData.breaks[i].isWatched) {
breakToPlay = breakSeekData.breaks[i];
}
}
if (breakToPlay){
breakSeekData.breaks = [breakToPlay];
return breakSeekData;
}
});
Nota: Si no se muestra ningún valor o valor nulo, no se reproduce ninguna pausa. Si se muestra el elemento SeeSeekData como está, se reproducirán todas las pausas entre el salto de la zona hasta el campo Buscar hasta.
Guarda los cambios en js/receiver.js e inicia una sesión de transmisión en el remitente web. Para ello, haz clic con el botón derecho en cualquier parte de la página y selecciona "Transmitir". La transmisión de anuncios debería comenzar a reproducirse de inmediato.
10. Felicitaciones
Ahora sabe cómo agregar anuncios a su aplicación receptora con el SDK de app receptora de transmisión más reciente.
Consulta la guía para desarrolladores sobre pausas publicitarias.