1. Descripción general
En este codelab, aprenderás a compilar una app receptora web personalizada que use la API de Cast Live 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. Este SDK te permite agregar los componentes de 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 una app receptora de transmisión que aprovecha las APIs de Live.
Qué aprenderás
- Cómo administrar el contenido de video en vivo en Cast
- Cómo configurar las diversas situaciones de transmisión en vivo compatibles con Cast
- Cómo agregar datos de programas a tu transmisión en vivo
Requisitos
- El navegador más reciente de Google Chrome
- Servicio de hosting de 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
- Debes tener conocimientos previos sobre desarrollo web.
- Experiencia previa en la compilación de aplicaciones de envío y recepción de Cast.
¿Cómo usarás este instructivo?
¿Cómo calificarías tu experiencia en la compilación de aplicaciones 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 app receptora de forma local
Para poder usar tu receptor web con un dispositivo de transmisión, este debe estar alojado en un lugar donde el dispositivo pueda alcanzarlo. Si ya tienes un servidor disponible que admita 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, puedes usar Firebase Hosting o ngrok.
Ejecuta el servidor
Una vez que hayas configurado el servicio que deseas, navega hasta app-start y, luego, inicia tu servidor.
Toma nota de la URL de tu receptor alojado. Lo utilizarás 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 se integra en este codelab, en dispositivos Chromecast. Una vez que hayas registrado tu aplicación, recibirás un ID de aplicación que la aplicación emisora debe usar para realizar llamadas a la API, por ejemplo, para iniciar una aplicación receptora.
Haz clic en "Agregar nueva aplicación".
Selecciona "Custom Receiver", que es lo que estamos creando.
Ingresa los detalles de la nueva app receptora; asegúrate de usar la URL final
en la última sección. Toma nota del ID de aplicación asignado a tu app receptora nueva.
También debes registrar tu dispositivo Google Cast para que pueda acceder a la aplicación receptora antes de publicarla. Una vez que publiques tu aplicación receptora, estará disponible para todos los dispositivos Google Cast. Para 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 de tu 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 desarrolladores del SDK de Google Cast.
El receptor y el dispositivo demorará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. Transmite una transmisión en vivo sencilla
Antes de comenzar este codelab, te recomendamos consultar la guía para desarrolladores en vivo, que proporciona una descripción general de las APIs activas.
La persona que envía el contenido usaremos el Cactool para iniciar una sesión de transmisión. La app receptora está diseñada para comenzar a reproducir una transmisión en vivo automáticamente.
El receptor se compone de tres archivos. Un archivo HTML básico llamado receiver.html, que contiene la estructura principal de la app No es necesario que modifiques este archivo. También hay un archivo llamado receiver.js, que contiene toda la lógica del receptor. Por último, también hay un metadata_service.js que se usará más adelante en el codelab para simular la obtención de datos de guías de programas.
Para empezar, abre Cactool en Chrome. Ingresa el ID de aplicación del receptor que se te proporcionó en la Consola para desarrolladores del SDK de Cast y haz clic en Configurar.
Se debe indicar al framework de aplicaciones de transmisión (CAF) del receptor web que el contenido que se reproducirá es una transmisión en vivo. Para hacerlo, modifica la aplicación con la siguiente línea de código. Agrégala al cuerpo principal del interceptor de carga en receiver.js:
request.media.streamType = cast.framework.messages.StreamType.LIVE;
Configurar el tipo de transmisión en LIVE habilita la IU en vivo de CAF. El SDK de Web Receiver saltará automáticamente al perímetro en vivo de la transmisión. Todavía no se han agregado los datos de la guía de programación en vivo, por lo que la barra de arrastre representará la longitud total del intervalo de búsqueda de la transmisión.
Guarda los cambios en receiver.js y, luego, inicia una sesión de transmisión en Cactool. Para ello, haz clic en el botón para transmitir y selecciona un dispositivo de transmisión de destino. La transmisión en vivo debería comenzar a reproducirse de inmediato.
6. Cómo agregar datos de la guía de programas
La compatibilidad de CAF con el contenido en vivo ahora admite la visualización de datos de guías de programas en aplicaciones receptoras y emisoras. Recomendamos a los proveedores de contenido que incluyan metadatos de programación en las aplicaciones receptoras para una mejor experiencia del usuario final, especialmente para las transmisiones en vivo de larga duración, como los canales de TV.
El CAF admite la configuración de metadatos para varios programas en una sola transmisión. Cuando se establecen marcas de tiempo y duraciones de inicio en los objetos MediaMetadata, el receptor actualiza automáticamente los metadatos que se muestran en los remitentes y la superposición en función de la ubicación actual del reproductor en la transmisión. A continuación, se ofrece un ejemplo de las APIs y su uso general.
// A sample metadata object for a single tv show
const currentShow = new cast.framework.messages.TvShowMediaMetadata();
currentShow.episode = 15;
currentShow.seriesTitle = 'The Odyssey';
currentShow.title = 'Scylla and Charybdis';
currentShow.sectionStartAbsoluteTime = toUnixTimestamp('9:00 PM');
currentShow.sectionDuration = HOUR_IN_SECONDS;
En este codelab, usaremos un servicio de metadatos de muestra para proporcionar los metadatos de nuestra transmisión en vivo. Para crear una lista de metadatos del programa, crea un contenedor. ContainerMetadata contiene una lista de objetos MediaMetadata para una sola transmisión multimedia. Cada objeto MediaMetadata representa una sola sección en el contenedor. Cuando el cabezal de reproducción se encuentra dentro de los límites de una sección determinada, sus metadatos se copian automáticamente en el estado del contenido multimedia. Agrega el siguiente código al archivo receiver.js para descargar los metadatos de muestra de nuestro servicio y proporcionar el contenedor a CAF.
/**
* Gets the current program guide data from the sample MetadataService. Once
* obtained, the guide information is added using QueueManager.
*/
async function loadGuideData() {
const data = await MetadataService.fetchLiveMetadata();
const containerMetadata = new cast.framework.messages.ContainerMetadata();
containerMetadata.sections = data;
playerManager.getQueueManager().setContainerMetadata(containerMetadata);
}
Además, agrega una llamada a la función para cargar los datos de guía en el interceptor de carga:
loadGuideData();
Guarda el archivo receiver.js y, luego, inicia una sesión de transmisión. Deberías ver la hora de inicio, la hora de finalización y el título del programa en la pantalla.
Se envía un nuevo mensaje de estado del contenido multimedia desde el receptor a todos los emisores cuando el cabezal de reproducción transiciona a una nueva sección en el contenedor, de modo que las aplicaciones emisoras puedan actualizar su IU. Se recomienda que las aplicaciones receptoras actualicen los metadatos del contenedor en un interceptor de estado de contenido multimedia para continuar enviando información del programa a las aplicaciones emisoras. En nuestro servicio de muestra, mostramos los metadatos del programa actual, así como los metadatos de los dos programas siguientes. Para actualizar los metadatos de una transmisión, crea un contenedor nuevo y llama a setContainerMetadata, como en el ejemplo anterior.
7. Inhabilitando búsqueda
La mayoría de las transmisiones de video por Internet se componen de segmentos que contienen un rango de fotogramas de video. A menos que se especifique lo contrario, el CAF permitirá a los usuarios realizar búsquedas dentro de estos segmentos. El receptor web puede especificar esto llamando a algunas APIs disponibles.
En el interceptor de carga, quita el comando multimedia compatible con FIND. Esta acción inhabilita la búsqueda en todas las interfaces táctiles y de emisor de dispositivos móviles. Agrega el siguiente código después de las definiciones de las variables de instancia del SDK en receiver.js.
// Disable seeking
playerManager.removeSupportedMediaCommands(
cast.framework.messages.Command.SEEK, true);
Para inhabilitar los comandos de búsqueda por voz con la tecnología de un asistente como Hey Google, retrocede 60 segundos, se debe usar el interceptor de búsqueda. Se llama a este interceptor cada vez que se realiza una solicitud de búsqueda. Si el comando BUSCAR contenido multimedia admitido está inhabilitado, el interceptor rechazará la solicitud de búsqueda. Agrega el siguiente fragmento de código al archivo receiver.js:
/**
* A seek interceptor is called whenever CAF receives a request to seek to
* a different location in media. This interceptor can be used to modify that
* seek request or disable seeking completely.
*/
playerManager.setMessageInterceptor(
cast.framework.messages.MessageType.SEEK, (seekRequestData) => {
// if the SEEK supported media command is disabled, block seeking
if (!(playerManager.getSupportedMediaCommands() &
cast.framework.messages.Command.SEEK)) {
castDebugLogger.info(TAG, 'Seek blocked.');
return null;
}
return seekRequestData;
});
Guarda el archivo receiver.js y, luego, inicia una sesión de transmisión. Ya no deberías poder realizar búsquedas en la transmisión en vivo.
8. Felicitaciones
Ahora sabes cómo crear una aplicación receptora personalizada con el SDK de app receptora de transmisión más reciente.
Para obtener más detalles, consulta la guía para desarrolladores sobre transmisiones en vivo.