Cómo depurar apps de receptores de transmisión

1. Descripción general

En este codelab, aprenderás a agregar el registrador de depuración de Cast a tu app existente del 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 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, tendrás un receptor web personalizado integrado en el registrador de depuración de Cast.

Consulta la guía del registrador de depuración de Cast para obtener detalles y 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 Cast

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

Experiencia

• Debes tener experiencia previa con Cast y comprender cómo funciona un Cast Web Receiver.
• Debes tener conocimientos previos sobre desarrollo web.
• También deberás tener experiencia como usuario de TV :)

¿Tienes problemas de red?

Si estás en una ubicación donde la red Wi-Fi no es estable, puedes conectar el dispositivo Chromecast con un adaptador de Ethernet para Chromecast o para Chromecast con Google TV.

¿Cómo usarás este instructivo?

Ler Leer y completar los ejercicios

¿Cómo calificarías tu experiencia con la compilación de aplicaciones web?

Principiante Intermedio Avanzado

¿Cómo calificarías tu experiencia cuando miras TV?

Principiante Intermedio Avanzado

2. Obtén el código de muestra

Puedes descargar el código de muestra completo a tu computadora…

Descargar código fuente

y descomprimir el archivo ZIP que se descargó.

El repositorio del codelab Cast Debug Logger contiene dos proyectos de muestra:

• app-start: El código inicial que usarás como base para compilar en este codelab
• app-done: El código completo para la aplicación de video de muestra finalizada

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

¿No tienes una cuenta de desarrollador de Cast?

Regístrate para obtener una cuenta en la Play Console del SDK de Google Cast y paga la tarifa de registro.

Debes registrar tu aplicación para poder ejecutar un receptor web personalizado, como los 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 de 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. Ejecuta la app de muestra

Mientras esperamos que nuestro nuevo Web Receiver esté listo para la prueba, veamos qué aspecto tiene una app de Web Receiver de muestra completa. La app receptora que compilaremos podrá reproducir contenido multimedia mediante la transmisión de tasa de bits adaptable.

1. En el navegador, abre la herramienta de comando y control (CaC).

2. Usa el ID de receptor CC1AD845 predeterminado y haz clic en el botón SET APP ID.
3. Haz clic en el botón para transmitir en la parte superior izquierda y selecciona tu dispositivo compatible con Google Cast.

4. Navega a la pestaña LOAD MEDIA en la parte superior.

5. Cambia el botón de selección del tipo de solicitud a LOAD.
6. Haz clic en el botón SEND REQUEST para reproducir un video de muestra.
7. El video comenzará a reproducirse en tu dispositivo compatible con Google Cast para mostrar la funcionalidad básica de la app receptora usando la app receptora predeterminada.

6. Prepara el proyecto inicial

Debemos agregar compatibilidad con Google Cast a la app inicial que descargaste. Estos son algunos términos relacionados con 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:

1. Selecciona el directorio app-start de la descarga del código de muestra.
2. Abre js/receiver.js y index.html

Ten en cuenta que, a medida que trabajas en este codelab, http-server debe incorporar los cambios que apliques. Si no es así, intenta detener y reiniciar http-server.

Diseño de la app

La app receptora inicializa la sesión de Cast y permanecerá en espera hasta que llegue una solicitud de CARGA (como el comando para reproducir un contenido multimedia) de una app emisora.

La app consta de una vista principal, definida en index.html, y un archivo 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.

receiver.js

Esta secuencia de comandos administra toda la lógica de nuestra app receptora.

¿Deseas transmitir documentación?

Disponemos de una gran cantidad de documentación para apps receptoras y emisoras de iOS, Android y Chrome.

Preguntas frecuentes

• ¿Qué es Google Cast?
• ¿Cómo me convierto en desarrollador de Google Cast?

7. Integración con la API de CastDebugLogger

El SDK de Cast Receiver proporciona otra opción para que los desarrolladores depuren fácilmente tu app receptora con la API de CastDebugLogger.

Consulta la guía del registrador de depuración de Cast para obtener detalles y más información.

★ Nota:

Para usar la API CastDebugLogger, debes registrar tu dispositivo de transmisión en la Play Console del SDK de Google Cast y usar una versión de firmware del dispositivo 1.44 o posterior.

Inicialización

Incluye la siguiente secuencia de comandos en la etiqueta <head> de tu app de receptor justo después de la secuencia de comandos del SDK de Web Receiver, 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);
  }
});

Advertencia: Asegúrate de establecer setEnabled como falso para una app receptora de producción.

Cuando el registro de depuración está habilitado, se muestra una superposición de DEBUG MODE en la app receptora.

Eventos de registro del reproductor

Con CastDebugLogger, puedes registrar fácilmente eventos del reproductor que se activan mediante el SDK del receptor web de Cast y usar diferentes niveles de registro para acceder a los datos del evento. La configuración 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 activen los eventos CORE del reproductor o se transmita 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, el mensaje de registro. La etiqueta puede ser cualquier cadena 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 junto con los mensajes de registro de errores, advertencias, información y depuración. Otro ejemplo es que habilitar una etiqueta personalizada con el nivel WARNING solo mostraría mensajes de registro de errores y advertencias.

La configuración loggerLevelByTags es opcional. Si no se configuró una etiqueta personalizada para su 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 para depurar

El registro de depuración de transmisión (Cast Debug Logger) proporciona una superposición de depuración en la app receptora para mostrar tus 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 para obtener una vista previa de la superposición de depuración en la app receptora:

// 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. Usa la herramienta de comando y control (CaC)

Descripción general

La herramienta de comando y control (CaC) captura tus registros y controla la capa de depuración.

Existen dos formas de conectar tu receptor a la herramienta de CaC:

Cómo iniciar una conexión de Cast nueva:

1. Abre la herramienta de CaC, establece el ID de la app receptora y haz clic en el botón de transmisión para transmitir al receptor.
2. Transmite una app de remitente independiente al mismo dispositivo con el mismo ID de la app del receptor.
3. Se cargará el contenido multimedia de la app del remitente y se mostrarán los mensajes de registro en la herramienta.

Para unirte a una sesión de Cast existente, haz lo siguiente:

1. Obtén el ID de la sesión de Cast en ejecución con el SDK del receptor o el SDK del remitente. En el receptor, 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 con el siguiente método:

cast.framework.CastContext.getInstance().getCurrentSession().getSessionId();

2. Ingresa el ID de sesión en la herramienta de CaC y haz clic en el botón RESUME.
3. El botón para transmitir debería 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 de tu receptor de muestra.

1. Abre la herramienta de CaC.

2. Ingresa el ID de la app del receptor de tu app de ejemplo y haz clic en el botón SET APP ID.
3. Haz clic en el botón para transmitir en la parte superior izquierda y selecciona tu dispositivo compatible con Google Cast para abrir el receptor.

4. Navega a la pestaña LOAD MEDIA en la parte superior.

5. Cambia el botón de selección del tipo de solicitud a LOAD.
6. Haz clic en el botón SEND REQUEST para reproducir un video de muestra.

7. Ahora debería reproducirse un video de muestra en tu dispositivo. Deberías comenzar a ver los registros de los pasos anteriores en la pestaña "Log Messages" en la parte inferior de la herramienta.

Intenta explorar las siguientes funciones para investigar los registros y controlar el receptor:

• Haz clic en la pestaña MEDIA INFO o MEDIA STATUS para ver la información 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 del receptor y transmitir de nuevo.

10. Felicitaciones

Ahora sabes cómo agregar el registrador de depuración de Cast a tu app de Web Receiver compatible con Cast usando el SDK de Cast Receiver más reciente.

Para obtener más detalles, consulta las guías para desarrolladores de Cast Debug Logger y la herramienta de comando y control (CaC).

¿Quieres más contenido de Cast?

Consulta los otros codelabs de Cast y nuestras apps de ejemplo en GitHub.