Cómo depurar apps de receptores de transmisión

1. Descripción general

Logotipo de Google Cast

En este codelab, aprenderás a agregar el Registrador de depuración de transmisión a tu app receptora web personalizada existente.

¿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. 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 con el registro de depuración de transmisión.

Para obtener más detalles y más información, consulta la guía del Registrador de depuración de transmisión.

Qué aprenderás

  • Cómo configurar tu entorno para el desarrollo de un receptor web
  • Cómo integrar el registro de depuración en tu receptor de transmisiones

Requisitos

Experiencia

  • Debes tener experiencia previa para transmitir contenido y comprender cómo funciona un receptor web de transmisión.
  • Debes tener conocimientos previos sobre desarrollo web.
  • También deberás tener experiencia como usuario de TV :)

¿Cómo usarás este instructivo?

Ler Leer y completar los ejercicios

¿Cómo calificarías tu experiencia en 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…

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 en dispositivos Chromecast un receptor web personalizado, como se compiló en este codelab. 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.

Imagen de la consola para desarrolladores de Cast con el botón "Agregar aplicación nueva" destacado

Haz clic en "Agregar nueva aplicación".

Imagen de la pantalla “New Receiver Application” con la opción “Custom Receiver” destacada

Selecciona "Custom Receiver", que es lo que estamos creando.

Imagen del campo "URL de la aplicación del receptor" que se está completando en el diálogo "Nuevo receptor personalizado"

Ingresa los detalles de la nueva app receptora. Asegúrate de usar la URL de 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.

Imagen de la consola para desarrolladores del SDK de Google Cast con el botón "Agregar dispositivo nuevo" destacado

Haz clic en "Agregar nuevo dispositivo".

Imagen del diálogo "Agregar un dispositivo receptor de transmisión"

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. Ejecuta la app de muestra

Logotipo de Google Chrome

Mientras esperamos a que nuestra nueva Web Receiver esté lista para la prueba, veamos cómo se ve una app de ejemplo completa de Web Receiver. La app receptora que compilaremos podrá reproducir contenido multimedia mediante la transmisión de tasa de bits adaptable.

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

Imagen de la pestaña “Cast Connect & Logger Controls” de la herramienta de comando y control (CaC)

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

Imagen de la pestaña “Cast Connect & Logger Controls” de la herramienta de comando y control (CaC) que indica que está conectado a una app receptora

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

Imagen de la pestaña "Load Media" de la herramienta de comando y control (CaC)

  1. Cambia el botón de selección del tipo de solicitud a LOAD.
  2. Haz clic en el botón SEND REQUEST para reproducir un video de muestra.
  3. El video comenzará a reproducirse en tu dispositivo compatible con Google Cast para mostrar cómo es la funcionalidad básica de la app receptora si se usa 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 un dispositivo Google Cast o Android TV.

Ahora ya puedes compilar sobre el proyecto inicial con tu editor de texto favorito:

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

Ten en cuenta que, mientras trabajas en este codelab, http-server debería detectar los cambios que hagas. De lo contrario, intenta detener y reiniciar http-server.

Diseño de la app

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 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 nuestra 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.

Preguntas frecuentes

7. 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.

Para obtener más detalles y más información, consulta la guía del Registrador de depuración de transmisión.

Inicialización

Incluye la siguiente secuencia de comandos en la etiqueta <head> de tu app receptora inmediatamente 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 de 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 registrador de depuración está habilitado, se muestra una superposición de DEBUG MODE en la app receptora.

Imagen de un video que se reproduce con el mensaje “MODO DE DEPURACIÓN” que aparece sobre un fondo rojo en la esquina superior izquierda del marco

Eventos del reproductor de registros

Con CastDebugLogger, puedes registrar fácilmente los eventos del reproductor que activa el SDK de Cast Web Receiver y usar diferentes niveles de registrador 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 activen los eventos CORE del reproductor o se emita 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 de la app receptora 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 los 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;
  }
);

Para controlar qué mensajes aparecen en la superposición de depuración, configura el nivel de registro en loggerLevelByTags para cada etiqueta personalizada. Por ejemplo, si se habilita una etiqueta personalizada con el nivel de registro cast.framework.LoggerLevel.DEBUG, se mostrarán todos los mensajes agregados con mensajes de registro de error, advertencia, información y depuración. Otro ejemplo es que si se habilita una etiqueta personalizada con el nivel WARNING, solo se mostrarán mensajes de error y de advertencia.

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

El Registrador de depuración de transmisión proporciona una superposición de depuración en el receptor 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 de 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 tu 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();
  }
});

Imagen que muestra la superposición de depuración, una lista de mensajes del registro de depuración con un fondo translúcido en la parte superior de un fotograma de video

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.

Hay dos maneras de conectar tu receptor a la herramienta de CaC:

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

  1. Abre la herramienta de CaC, establece el ID de la app del receptor y haz clic en el botón para transmitir a fin de transmitir a la app receptora.
  2. Transmite una app emisora separada al mismo dispositivo con el mismo ID de app receptora.
  3. Cuando cargues contenido multimedia desde la app emisora, los mensajes de registro se mostrarán en la herramienta.

Sigue estos pasos para unirte a una sesión de transmisión existente:

  1. Obtén el ID de la sesión de transmisión en ejecución mediante el SDK de la app receptora o el SDK de la app Sender. Desde el receptor, ingresa lo siguiente para obtener el ID de sesión en la consola de Chrome Remote Debugger:
cast.framework.CastReceiverContext.getInstance().getApplicationData().sessionId;

O bien, puedes obtener el ID de sesión de un remitente web conectado, usa el siguiente método:

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

Imagen de la pestaña &quot;Cast Connect & Logger Controls&quot; de la herramienta Command and Control (CaC) para reanudar la sesión

  1. Ingresa el ID de sesión en la herramienta CaC y haz clic en el botón RESUME.
  2. 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 en tu receptor de muestra.

  1. Abre la herramienta CaC.

Imagen de la pestaña “Cast Connect & Logger Controls” de la herramienta de comando y control (CaC)

  1. Ingresa el ID de la app receptora de la app de ejemplo y haz clic en el botón SET APP ID.
  2. 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.

Imagen de la pestaña “Cast Connect & Logger Controls” de la herramienta de comando y control (CaC) que indica que está conectado a una app receptora

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

Imagen de la pestaña &quot;Load Media&quot; de la herramienta de comando y control (CaC)

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

Imagen de la pestaña “Cast Connect & Logger Controls” de la herramienta Command and Control (CaC) con mensajes de registro en el panel inferior

  1. Se debería estar reproduciendo un video de muestra en el dispositivo. Deberías comenzar a ver que tus registros de los pasos anteriores se mostrarán en la pestaña "Log Messages" (Mensajes de registro) en la parte inferior de la herramienta.

Explora las siguientes funciones para investigar los registros y controlar la app receptora:

  • 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 la app receptora.
  • Usa el botón CLEAR CACHE AND STOP para volver a cargar la app receptora y volver a transmitir.

10. Felicitaciones

Ya sabes cómo agregar el Registrador de depuración de transmisión a tu app Receptora web compatible con Cast usando el SDK de receptor de transmisiones más reciente.

Para obtener más información, consulta las guías para desarrolladores del Registro de depuración de transmisión y la Herramienta de comando y control (CaC).