1. Descripción general
En este codelab, aprenderás a agregar el registro de depuración de Cast a tu app existente de receptor web personalizado.
¿Qué es Google Cast?
El SDK de Google Cast permite que tu app reproduzca contenido y controle la reproducción en dispositivos compatibles con Google Cast. Te proporciona 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, tendrás un receptor web personalizado integrado en Cast Debugger Logger.
Consulta la guía del registrador de depuración de Cast para obtener más información.
Qué aprenderás
- Cómo configurar tu entorno para el desarrollo de receptores web
- Cómo integrar el Registro de depuración en tu receptor de transmisiones
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
Experiencia
- Debes tener experiencia previa en Cast y comprender cómo funciona un receptor web de Cast.
- Deberá tener conocimientos previos sobre desarrollo web.
- También deberás tener experiencia como usuario de TV :)
¿Cómo usarás este instructivo?
¿Cómo calificarías tu experiencia cuando compilas apps web?
¿Cómo calificarías tu experiencia cuando miras TV?
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 un receptor web personalizado, como se compiló en este codelab, en los 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 de 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. Ejecuta la app de muestra
Mientras esperamos que nuestra nueva app Receptor web esté lista para la prueba, veamos cómo se ve una muestra de la app receptora web completa. La app receptora que compilaremos podrá reproducir contenido multimedia mediante la transmisión de tasa de bits adaptable.
- En tu navegador, abre la herramienta de comando y control (CaC).
- Usa el ID de receptor predeterminado
CC1AD845
y haz clic en el botónSET APP ID
. - Haz clic en el botón para transmitir en la parte superior izquierda y selecciona tu dispositivo compatible con Google Cast.
- Navega a la pestaña
LOAD MEDIA
en la parte superior.
- Cambia el botón de selección del tipo de solicitud a
LOAD
. - Haz clic en el botón
SEND REQUEST
para reproducir un video de muestra. - El video comenzará a reproducirse en tu dispositivo compatible con Google Cast para mostrar cómo funciona la función básica del receptor con el receptor predeterminado.
6. Prepara el proyecto inicial
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 o Android TV.
Ya puedes compilar sobre el proyecto inicial con tu editor de texto favorito:
- Selecciona el directorio
app-start
del código de muestra descargado. - Abrir
js/receiver.js
yindex.html
Ten en cuenta que, mientras trabajas en este codelab, http-server
debería detectar los cambios que realices. Si no es así, intenta detener y reiniciar http-server
.
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 (como 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 contiene toda la IU de nuestra app receptora.
receptor.js
Esta secuencia de comandos administra toda la lógica para nuestra app receptora.
Preguntas frecuentes
7. Cómo realizar la integración con la API de CastDebugLogger
El SDK de app receptora de transmisión ofrece otra opción para que los desarrolladores depuren fácilmente tu app receptora mediante la API de CastDebugLogger.
Consulta la guía del registrador de depuración de Cast para obtener más información.
Inicialización
Incluye la siguiente secuencia de comandos en la etiqueta <head>
, la app receptora, justo después de la secuencia de comandos del SDK del receptor web, en index.html
:
<head>
...
<script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
<!-- Cast Debug Logger -->
<script src="//www.gstatic.com/cast/sdk/libs/devtools/debug_layer/caf_receiver_logger.js"></script>
</head>
En js/receiver.js
, en la parte superior del archivo y debajo de playerManager
, obtén la instancia CastDebugLogger
y habilita el registrador en un objeto de escucha de eventos READY
:
const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();
// Debug Logger
const castDebugLogger = cast.debug.CastDebugLogger.getInstance();
const LOG_TAG = 'MyAPP.LOG';
// Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
context.addEventListener(cast.framework.system.EventType.READY, () => {
if (!castDebugLogger.debugOverlayElement_) {
castDebugLogger.setEnabled(true);
}
});
Cuando el registro de depuración está habilitado, se muestra una superposición de DEBUG MODE
en el receptor.
Eventos de registro del reproductor
Con CastDebugLogger
, puedes registrar fácilmente los eventos de reproductor que activa el SDK de Cast Web Receiver y usar diferentes niveles de registro para registrar los datos de eventos. La configuración de loggerLevelByEvents
toma cast.framework.events.EventType
y cast.framework.events.category
para especificar los eventos que se registrarán.
Agrega lo siguiente debajo del objeto de escucha de eventos READY
para registrar cuando se activan los eventos CORE
del reproductor o se transmite un cambio mediaStatus
:
...
// Set verbosity level for Core events.
castDebugLogger.loggerLevelByEvents = {
'cast.framework.events.category.CORE': cast.framework.LoggerLevel.INFO,
'cast.framework.events.EventType.MEDIA_STATUS': cast.framework.LoggerLevel.DEBUG
};
Mensajes de registro y etiquetas personalizadas
La API de CastDebugLogger te permite crear mensajes de registro que aparecen en la superposición de depuración del receptor con diferentes colores. Usa los siguientes métodos de registro, ordenados de mayor a menor prioridad:
castDebugLogger.error(custom_tag, message);
castDebugLogger.warn(custom_tag, message);
castDebugLogger.info(custom_tag, message);
castDebugLogger.debug(custom_tag, message);
Para cada método de registro, el primer parámetro debe ser una etiqueta personalizada y el segundo es el mensaje de registro. La etiqueta puede ser cualquier string que te resulte útil.
Para mostrar registros en acción, agrega registros a tu interceptor LOAD
.
playerManager.setMessageInterceptor(cast.framework.messages.MessageType.LOAD,
loadRequestData => {
// Listed in order from highest to lowest priority.
castDebugLogger.error(LOG_TAG, 'Test error log');
castDebugLogger.warn(LOG_TAG, 'Test warn log');
castDebugLogger.info(LOG_TAG, 'Intercepting LOAD request', loadRequestData);
castDebugLogger.debug(LOG_TAG, 'Test debug log');
return loadRequestData;
}
);
Puedes controlar qué mensajes aparecen en la superposición de depuración configurando el nivel de registro en loggerLevelByTags
para cada etiqueta personalizada. Por ejemplo, si habilitas una etiqueta personalizada con el nivel de registro cast.framework.LoggerLevel.DEBUG
, se mostrarán todos los mensajes que se agreguen con errores, advertencias, información y mensajes de registro de depuración. Otro ejemplo es que, si habilitas una etiqueta personalizada con el nivel WARNING
, solo se mostrarán mensajes de error y advertencias.
La configuración loggerLevelByTags
es opcional. Si una etiqueta personalizada no está configurada para el nivel de registro, se mostrarán todos los mensajes del registro en la superposición de depuración.
Agrega lo siguiente debajo de la llamada a loggerLevelByEvents
:
...
// Set verbosity level for custom tags.
castDebugLogger.loggerLevelByTags = {
LOG_TAG: cast.framework.LoggerLevel.DEBUG, // display all levels
};
...
8. Cómo usar la superposición de depuración
Cast Debug Logger proporciona una superposición de depuración en el receptor para mostrar los mensajes de registro personalizados. Usa showDebugLogs
para activar o desactivar la superposición de depuración y clearDebugLogs
para borrar los mensajes del registro en la superposición.
Agrega lo siguiente al objeto de escucha de eventos READY
a fin de obtener una vista previa de la superposición de depuración en tu receptor:
// Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
context.addEventListener(cast.framework.system.EventType.READY, () => {
if (!castDebugLogger.debugOverlayElement_) {
castDebugLogger.setEnabled(true);
// Show debug overlay.
castDebugLogger.showDebugLogs(true);
// Clear log messages on debug overlay.
castDebugLogger.clearDebugLogs();
}
});
9. Cómo usar la herramienta de comando y control (CaC)
Descripción general
La herramienta de comando y control (CaC) captura tus registros y controla la superposición de depuración.
Existen dos maneras de conectar tu receptor a la herramienta de CaC:
Inicia una nueva conexión de transmisión:
- Abre la herramienta de CaC, establece el ID de app del receptor y haz clic en el botón para transmitir.
- Transmite una app de sender independiente al mismo dispositivo con el mismo ID de app del receptor.
- Carga el contenido multimedia desde la app emisora y los mensajes de registro se mostrarán en la herramienta.
Únete a una sesión de transmisión existente de la siguiente manera:
- Obtén el ID de sesión de Cast en ejecución con el SDK de receptor o el de remitente. Desde la parte receptora, ingresa lo siguiente para obtener el ID de sesión en la consola del Depurador remoto de Chrome:
cast.framework.CastReceiverContext.getInstance().getApplicationData().sessionId;
También puedes obtener el ID de sesión de un remitente web conectado mediante el siguiente método:
cast.framework.CastContext.getInstance().getCurrentSession().getSessionId();
- Ingresa el ID de sesión en la herramienta de CaC y haz clic en el botón
RESUME
. - El botón para transmitir debe estar conectado y comenzar a mostrar mensajes de registro en la herramienta.
Qué puedes probar
A continuación, usaremos la herramienta de CaC para ver los registros del receptor de muestra.
- Abre la herramienta de CaC.
- Ingresa el ID de la app receptora y haz clic en el botón
SET APP ID
. - Haz clic en el botón para transmitir en la parte superior izquierda y selecciona tu dispositivo compatible con Google Cast para abrir la app receptora.
- Navega a la pestaña
LOAD MEDIA
en la parte superior.
- Cambia el botón de selección del tipo de solicitud a
LOAD
. - Haz clic en el botón
SEND REQUEST
para reproducir un video de muestra.
- Ahora, debería reproducirse un video de muestra en tu dispositivo. Deberías comenzar a ver los registros de los pasos anteriores a fin de que se muestren en la pestaña “Log Messages” en la parte inferior de la herramienta.
Explora las siguientes funciones para investigar los registros y controlar el receptor:
- Haz clic en las pestañas
MEDIA INFO
oMEDIA STATUS
para ver la información multimedia y el estado del contenido multimedia. - Haz clic en el botón
SHOW OVERLAY
para ver una superposición de depuración en el receptor. - Usa el botón
CLEAR CACHE AND STOP
para volver a cargar la app receptora y volver a transmitir.
10. Felicitaciones
Ahora sabes cómo agregar el registro de depuración de Cast a la app receptora compatible con Cast mediante el SDK de app receptora de transmisión más reciente.
Para obtener más detalles, consulta las guías para desarrolladores de Registro de depuración de Cast y de Herramienta de comando y control (CaC).