1. Descripción general
En este codelab, aprenderás a compilar una app receptora personalizada de Web 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. 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 funcionalidad de transmisión en vivo.
Qué aprenderás
- Cómo manejar 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 del programa a tu transmisión en vivo
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. Cómo transmitir una transmisión en vivo sencilla
Antes de comenzar este codelab, te recomendamos que revises la guía para desarrolladores en vivo, que proporciona una descripción general de la nueva función en vivo.
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 en vivo automáticamente.
El receptor se compone de dos archivos. Un archivo HTML básico llamado receiver.html que inicializa el contexto de transmisión y un marcador de posición para el reproductor multimedia de Cast No es necesario modificar este archivo. También hay un archivo llamado receiver.js, que contendrá toda nuestra lógica para el receptor.
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 indicarle al framework de aplicaciones de Cast (CAF) que la transmisión está en vivo. Afortunadamente, esto requiere solo una línea de código. Agrega la siguiente línea de código al interceptor de carga en receiver.js:
request.media.streamType = cast.framework.messages.StreamType.LIVE;
Establecer el tipo de transmisión en LIVE habilita la IU en vivo del CAF. En esta situación, esto significa que, cuando se une la transmisión, el CAF salta automáticamente al límite en vivo. Aún no establecimos datos de la guía de programas, por lo que la barra de limpieza representará la longitud completa del intervalo que se puede buscar de una transmisión.
Guarda los cambios en 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 en vivo debería comenzar a reproducirse de inmediato.
6. Cómo agregar datos de la guía de programas
La nueva compatibilidad de CAF con el contenido en vivo ahora incluye la visualización de datos de guías de programas en aplicaciones receptores y emisores. Se recomienda encarecidamente que los proveedores de contenido incluyan metadatos de programación en sus aplicaciones receptoras a fin de ofrecer una mejor experiencia del usuario final, especialmente para las transmisiones en vivo de larga duración como los canales de TV.
Ahora puedes proporcionar a CAF los metadatos de varios programas en una sola transmisión. Cuando se establecen marcas de tiempo y duraciones en los objetos MediaMetadata, el receptor actualiza automáticamente los metadatos que se muestran en los remitentes y receptores según la ubicación actual del reproductor en la transmisión.
// 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, primero debemos crear un contenedor. Un contenedor contiene una lista de objetos MediaMetadata para una sola transmisión de contenido 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 al estado de 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 our Google Cloud Function
* @return {cast.framework.messages.MediaMetadata[]} Latest program guide data
*/
function loadGuideData() {
return fetch(LIVE_MEDIA_METADATA_SERVICE_URI)
.then((response) => response.json())
.then(function(data) {
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. Aparecerán en la pantalla la hora de inicio, la hora de finalización y el título del programa.
Se enviará un nuevo mensaje de estado de contenido multimedia desde el receptor a todos los remitentes cuando el cabezal de reproducción pase a una nueva sección del contenedor. Por lo tanto, podría tener sentido actualizar los metadatos del contenedor en un interceptor de estado multimedia para que siempre puedas tener información actualizada del programa. En nuestro servicio de muestra, se muestran los metadatos del programa actual y 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 la búsqueda
La mayoría de las transmisiones de video se componen de segmentos que contienen una variedad de fotogramas de video. A menos que se especifique lo contrario, CAF permitirá a los usuarios realizar búsquedas dentro de estos segmentos. Para inhabilitar la búsqueda, debemos agregar dos fragmentos de código a nuestro receptor.
En el interceptor de carga, quita el comando multimedia compatible con SEEK. Esto inhabilita la búsqueda en todas las interfaces táctiles y de remitentes de dispositivos móviles.
playerManager.removeSupportedMediaCommands(cast.framework.messages.Command.SEEK, true);
A continuación, debemos inhabilitar los comandos por voz para evitar que los usuarios omitan la transmisión, por ejemplo, “Hey Google, omitir 60 segundos”. Para inhabilitar la búsqueda por voz, agregaremos un interceptor de búsqueda. Se llamará a este interceptor cada vez que se realice una solicitud de búsqueda. Si se inhabilita el comando multimedia compatible con SEEK, el interceptor rechazará la solicitud. Agrega el siguiente fragmento de código al archivo receiver.js:
/**
* Seek 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.
* @param {cast.framework.messages.MessageType.SEEK} The message to intercept.
*/
playerManager.setMessageInterceptor(
cast.framework.messages.MessageType.SEEK,
(seekData) => {
// 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 seekData;
}
);
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 sabe cómo crear una aplicación receptora y personalizada con el SDK de app receptora de transmisión más reciente.
Si deseas obtener más información, consulta la guía para desarrolladores sobre Transmisión en vivo.