1. Descripción general
En este codelab, aprenderás a compilar una app de Custom Web Receiver 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 completes este codelab, habrás creado un receptor de Cast que aprovecha las APIs de Live.
Qué aprenderás
- Cómo controlar el contenido de video en vivo en Cast
- Cómo configurar los distintos casos de uso de transmisión en vivo que admite Cast
- Cómo agregar datos del programa a tu transmisión en vivo
Requisitos
- El navegador Google Chrome más reciente
- Servicio de hosting HTTPS, como Firebase Hosting o ngrok
- Un dispositivo compatible con Google Cast, como Chromecast o Android TV, 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 el desarrollo de aplicaciones de receptor y emisor de Cast
¿Cómo usarás este instructivo?
¿Cómo calificarías tu experiencia con 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 receptor de forma local
Para poder usar tu receptor web con un dispositivo de transmisión, debe estar alojado en algún lugar donde el dispositivo pueda alcanzarlo. Si ya tienes un servidor disponible que admite 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 elegiste, navega a app-start y, luego, inicia tu servidor.
Toma nota de la URL de tu receptor alojado. La usarás en la siguiente sección.
4. Registra una aplicación en Play Console de Cast
Debes registrar tu aplicación para poder ejecutar una app receptora personalizada, como las que se compilan en este codelab, en dispositivos Chromecast. Una vez que hayas registrado la aplicación, recibirás un ID de aplicación que la aplicación emisora debe utilizar para realizar llamadas a la API, como, por ejemplo, para iniciar una aplicación receptora.
Haz clic en "Add new application".
Selecciona "Custom Receiver", que es lo que estamos creando.
Ingresa los detalles de la nueva app receptora y asegúrate de usar la URL final.
en la última sección. Toma nota del ID de aplicación asignado a tu receptor nuevo.
También debes registrar tu dispositivo Google Cast para que pueda acceder a la aplicación receptora antes de publicarla. Una vez que publiques la aplicación receptora, estará disponible para todos los dispositivos Google Cast. Para realizar este codelab, se recomienda trabajar con una aplicación receptora no publicada.
Haz clic en "Add new Device".
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 Play Console del SDK de Google Cast
La app receptora y el dispositivo tardarán entre 5 y 15 minutos en estar listos para la prueba. Luego de esperar entre 5 y 15 minutos, debes reiniciar el dispositivo Cast.
5. Cómo transmitir en vivo de forma sencilla
Antes de comenzar este codelab, puede ser útil revisar la guía para desarrolladores en vivo, que proporciona una descripción general de las APIs en vivo.
Para nuestro remitente, usaremos Cactool para iniciar una sesión de Cast. El receptor está diseñado para comenzar a reproducir automáticamente una transmisión en vivo.
El receptor se compone de tres archivos. Un archivo HTML básico llamado receiver.html que contiene la estructura principal de la app No necesitarás modificar 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 la guía de programación.
Para comenzar, abre Cactool en Chrome. Ingresa el ID de la aplicación del receptor que se te proporcionó en la Consola de desarrolladores del SDK de Cast y haz clic en Establecer.
Se debe indicar al framework de la aplicación de Cast del receptor web (CAF) que el contenido que se reproducirá es una transmisión en vivo. Para ello, modifica la aplicación con la siguiente línea de código. Agrega lo siguiente al cuerpo principal del interceptor de carga en receiver.js:
request.media.streamType = cast.framework.messages.StreamType.LIVE;
Si configuras el tipo de transmisión como LIVE, se habilita la IU en vivo de CAF. El SDK de Web Receiver saltará automáticamente al borde en vivo de la transmisión. Aún no se agregaron los datos de la guía de programación en vivo, por lo que la barra de desplazamiento representará la duración completa del rango de búsqueda de la transmisión.
Guarda los cambios en receiver.js y, luego, inicia una sesión de Cast en Cactool. Para ello, haz clic en el botón para transmitir y selecciona un dispositivo de destino para la transmisión. 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 incluye la visualización de datos de la guía de programación en las aplicaciones del receptor y del remitente. Se recomienda a los proveedores de contenido que incluyan metadatos de programación en sus aplicaciones de receptor para mejorar la experiencia del usuario final, en especial en el caso de las transmisiones en vivo de larga duración, como los canales de TV.
La CAF admite la configuración de metadatos para varios programas en una sola transmisión. Si configuras marcas de tiempo de inicio y duraciones en los objetos MediaMetadata, el receptor actualizará automáticamente los metadatos que se muestran en los emisores y la superposición según la ubicación actual del reproductor en la transmisión. A continuación, se muestra una muestra 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. El objeto ContainerMetadata contiene una lista de objetos MediaMetadata para una sola transmisión de medios. 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 de los medios. 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 la guía en el interceptor de carga:
loadGuideData();
Guarda el archivo receiver.js y, luego, inicia una sesión de Cast. Deberías ver la hora de inicio, la hora de finalización y el título del programa en la pantalla.
El receptor envía un nuevo mensaje de estado de contenido multimedia a todos los emisores cuando el cabezal de reproducción pasa a una nueva sección del contenedor para que las aplicaciones del emisor puedan actualizar su IU. Se recomienda que las aplicaciones receptoras actualicen los metadatos del contenedor en un interceptor de estado de medios para seguir proporcionando información del programa a las aplicaciones emisoras. En nuestro servicio de ejemplo, devolvemos los metadatos del programa actual, así como los metadatos de los próximos dos programas. Para actualizar los metadatos de una transmisión, crea un contenedor nuevo y llama a setContainerMetadata como en el ejemplo anterior.
7. Cómo inhabilitar la búsqueda
La mayoría de las transmisiones de video se componen de segmentos que contienen un rango de fotogramas de video. A menos que se especifique lo contrario, la CAF permitirá que los usuarios busquen dentro de estos segmentos. El Web Receiver puede especificar esto llamando a un par de APIs disponibles.
En el interceptor de carga, quita el comando de medios compatible con SEEK. Esto inhabilita la búsqueda en todas las interfaces táctiles y de dispositivos móviles emisores. 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 potenciados por el asistente, como Ok 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 de medios compatible con SEEK 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 Cast. Ya no deberías poder buscar dentro de la transmisión en vivo.
8. Felicitaciones
Ya sabes cómo crear una aplicación receptora personalizada con el SDK de Cast Receiver más reciente.
Para obtener más detalles, consulta la Guía para desarrolladores de Transmisión en vivo.