Compila una app receptora de transmisión básica

googlecastnew500.png

En este codelab, aprenderás a crear una app receptora compatible con Cast para reproducir contenido en un dispositivo compatible con Google Cast.

¿Qué es Google Cast?

Google Cast les permite a los usuarios transmitir en una TV el contenido de un dispositivo móvil. Así, los usuarios pueden utilizar su dispositivo móvil o el navegador Chrome para computadoras de escritorio como control remoto para reproducir contenido multimedia en la TV.

El SDK de Google Cast permite que tu app controle dispositivos compatibles con Google Cast (p. ej., una TV o un sistema de sonido). El SDK de 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 a fin de que la experiencia de los usuarios de Cast sea sencilla y predecible en todas las plataformas compatibles. Obtén más información aquí.

¿Qué compilaremos?

Cuando completes este codelab, tendrás una app HTML5 que funcionará como tu propia app receptora personalizada capaz de mostrar contenido de video en dispositivos compatibles con Cast.

Qué aprenderás

  • Cómo prepararse para desarrollar una app receptora
  • Conceptos básicos de una app receptora compatible con Cast basados en el framework de la aplicación de Cast
  • Cómo recibir un video transmitido
  • Cómo integrar el registro de depuración
  • Cómo optimizar tu app receptora para pantallas inteligentes

Requisitos

  • El navegador más reciente de Google Chrome
  • node.js, npm y los módulos http-server y ngrok
  • Un dispositivo compatible con 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 conocimientos previos sobre desarrollo web.
  • También debes tener experiencia como usuario de TV :)

¿Cómo usarás este instructivo?

Solo lo leeré. Lo leeré y realizaré los ejercicios.

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

Principiante Intermedio Avanzado

¿Cómo calificarías tu nivel de experiencia como usuario de TV?

Principiante Intermedio Avanzado

Presiona el siguiente botón para descargar el código de muestra completo en tu computadora:

Descargar código fuente

Luego, descomprime el archivo ZIP.

Para poder utilizar la app receptora con un dispositivo de transmisión, debe estar alojado en algún lugar donde el dispositivo pueda alcanzarlo. Si dispones de un servidor 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, no te preocupes. Puedes instalar node.js, el módulo de nodo http-server y ngrok.

npm install -g http-server
npm install -g ngrok

Ejecuta el servidor

Si usas http-server, ve a la consola y haz lo siguiente:

cd app-start
http-server

Deberías ver algo similar a lo que se muestra a continuación:

Starting up http-server, serving ./
Available on:
  http://127.0.0.1:8080
  http://172.19.17.192:8080
Hit CTRL-C to stop the server

Toma nota del puerto local que usaste y haz lo siguiente en una terminal nueva para exponer tu app receptora local mediante HTTPS con ngrok:

ngrok http 8080

De este modo, se configurará un túnel ngrok para tu servidor HTTP local, lo que te asignará un extremo protegido con HTTPS disponible a nivel mundial, que puedes usar en el siguiente paso (https://116ec943.eu.ngrok.io):

ngrok by @inconshreveable                                                                                                                                                                                                                                     (Ctrl+C to quit)

Session Status         online
Version                2.2.4
Web Interface          http://127.0.0.1:8080
Forwarding             http://116ec943.eu.ngrok.io -> localhost:8080
Forwarding             https://116ec943.eu.ngrok.io -> localhost:8080

Durante el codelab, debes mantener activos ngrok y http-server. Todos los cambios que realices de forma local estarán disponibles de inmediato.

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

d8b39f5d33d33db4.png

Haz clic en "Add new application"

e8c19e57b85c7d.png

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

bf364a7d382e3c58.png

Ingresa los detalles de la nueva app receptora; asegúrate de usar la URL final

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

a446325da6ebd627.png

Haz clic en "Add new Device"

a21355793a3f4cd5.png

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 de transmisión.

Google_Chrome_logo_icon.png

Mientras esperamos que nuestra nueva aplicación receptora esté lista para la prueba, veamos qué aspecto tiene una app receptora de muestra completa. La app receptora que compilaremos podrá reproducir contenido multimedia mediante la transmisión de tasa de bits adaptable (utilizaremos contenido de muestra codificado para la Transmisión adaptable y dinámica a través de HTTP [DASH]).

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

7dbd91a75140c46f.png

  1. Deberías ver nuestra herramienta de CaC.
  2. Utiliza el ID de receptor de muestra predeterminado "CC1AD845" 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 Google Cast.

a02db8244a963fd6.png

  1. Ve a la pestaña "Load Media" en la parte superior.

acd63df355a0493.png

  1. Haz clic en el botón "Load by Content" para reproducir un video de muestra.
  2. El video comenzará a reproducirse en tu dispositivo Google Cast para mostrar la funcionalidad básica de la app receptora usando la app receptora predeterminada.

A continuación, haremos que Google Cast sea compatible con 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 compatible con Google Cast.

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

  1. Selecciona el directorio android_studio_folder.pngapp-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 esto no sucede, intenta finalizar 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 (es decir, 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 contendrá la IU para nuestra app receptora. Por ahora está vacío, y lo iremos completando durante todo el codelab.

receiver.js

Esta secuencia de comandos administrará toda la lógica de nuestra app receptora. En este momento es solo un archivo vacío, pero lo convertiremos en una app receptora de transmisión totalmente funcional con solo unas pocas líneas de código en la siguiente sección.

Una app receptora de transmisión básica inicializará la sesión de transmisión al iniciarse. Esto es necesario para indicar a todas las aplicaciones emisoras conectadas que la activación de la app receptora se realizó correctamente. Además, el nuevo SDK viene preconfigurado para controlar medios de transmisión con tasa de bits adaptable (con DASH, HLS y transmisiones sin interrupciones) y archivos MP4 sin formato listos para usar. Vamos a intentarlo.

Inicialización

Agrega el siguiente código a index.html en el encabezado:

<head>
  ...

  <script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
</head>

Agrega el siguiente código a index.html <body> antes del <footer> que carga a receiver.js, para que el SDK de la app receptora tenga espacio para abrir la IU predeterminada de la receptora, que se envía con la secuencia de comandos que acabas de agregar. 

<cast-media-player></cast-media-player>

Ahora debemos inicializar el SDK en js/receiver.js, lo que implica lo siguiente:

  • adquirir una referencia a CastReceiverContext, tu punto de entrada principal a todo el SDK de la app receptora
  • almacenar una referencia a PlayerManager, el objeto que maneja la reproducción y te proporciona todos los hooks que necesitas para complementar tu propia lógica personalizada
  • inicializar el SDK llamando a start() en CastReceiverContext

Agrega lo siguiente a js/receiver.js:

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();

context.start();

A los fines de este codelab, usa la herramienta de CaC para probar tu nueva app receptora.

Ve a la herramienta de comando y control (CaC) del navegador web.

72039b93a476e35e.png

Asegúrate de sustituir tu propio ID de la app registrado anteriormente en el campo y haz clic en "Set App ID". Esto le indica a la herramienta que use la app receptora cuando se inicia la sesión de transmisión.

Transmite contenido multimedia

En lo niveles superiores, para reproducir contenido multimedia en un dispositivo de transmisión, debe suceder lo siguiente:

  1. La app emisora crea un MediaInfo JSON objeto desde el SDK de transmisión que modela un elemento multimedia.
  2. La app emisora se conecta al dispositivo de transmisión para iniciar la aplicación receptora.
  3. La app receptora carga el objeto MediaInfo a través de una solicitud LOAD para reproducir el contenido.
  4. La app receptora controla y rastrea el estado del contenido multimedia.
  5. La app emisora envía comandos de reproducción a la app receptora para controlar la reproducción en función de las interacciones del usuario con la app emisora.

En un primer intento básico, propagaremos MediaInfo con una URL de elementos reproducibles (almacenada en MediaInfo.contentUrl).

Una app emisora real utiliza un identificador multimedia específico de la app en MediaInfo.contentId. La app receptora usa el contentId como identificador para realizar llamadas adecuadas a la API del backend para resolver la URL del elemento real y definirla en MediaInfo.contentUrl.. La app receptora también se encargará de tareas, como adquirir la licencia de DRM o insertar información sobre las pausas publicitarias.

Ampliaremos la app receptora para que haga algo parecido en la siguiente sección. Por ahora haz clic en el ícono de transmisión y selecciona tu dispositivo para abrir la app receptora.

4954e949c3d3b232.png

Ve a la pestaña "Load Media" y haz clic en el botón "Load by Content". Tu app receptora debería comenzar a reproducir el contenido de muestra.

ccd8cc258d0c1522.png

Por lo tanto, el SDK de la app receptora por sí solo se encarga de lo siguiente:

  • Inicializa la sesión de transmisión
  • Controlar solicitudes LOAD entrantes de apps emisoras que contengan elementos reproducibles
  • Proporciona una IU de reproductor básica lista para mostrarse en la pantalla grande.

Te sugerimos que explores la herramienta de CaC y su código antes de pasar a la siguiente sección, en la que ampliaremos nuestra app receptora para que interactúe con una API simple de muestra a fin de completar las solicitudes LOAD entrantes de las apps emisoras.

En línea con la forma en que la mayoría de los desarrolladores interactúan con sus receptores de transmisión en las aplicaciones del mundo real, modificaremos nuestra app receptora para que procese las solicitudes LOAD que hacen referencia al contenido multimedia previsto mediante su clave de API en lugar de enviar una URL de elemento reproducible.

Las aplicaciones suelen hacerlo porque:

  • Es posible que la app emisora no conozca la URL del contenido.
  • La aplicación de transmisión está diseñada para manejar la autenticación, otras lógicas empresariales o llamadas a la API directamente en la app receptora.

Esta funcionalidad se implementa principalmente en el método PlayerManager setMessageInterceptor(). De este modo, te permite interceptar los mensajes entrantes por tipo y modificarlos antes de que lleguen al controlador de mensajes interno del SDK. En esta sección nos ocuparemos de las solicitudes de LOAD. Para ello, haremos lo siguiente:

  • Leer la solicitud LOAD entrante y su contentId personalizado
  • Realizar una llamada GET a nuestra API para buscar el elemento que se puede transmitir por su contentId
  • Modificar la solicitud LOAD con la URL de la transmisión.
  • Modificar el objeto MediaInformation para establecer los parámetros del tipo de transmisión.
  • Pasar la solicitud al SDK para la reproducción o rechazar el comando si no podemos buscar el contenido multimedia solicitado.

La API de muestra proporcionada presenta los hooks del SDK para personalizar tareas comunes de la app receptora; al mismo tiempo, utiliza una experiencia para el usuario prácticamente lista para usarse.

API de muestra

Dirige el navegador a https://storage.googleapis.com/cpe-sample-media/content.json y consulta nuestro catálogo de videos de muestra. El contenido incluye las URL de las imágenes de póster en formato PNG y también las transmisiones DASH y HLS. Las transmisiones DASH y HLS apuntan a las fuentes de audio y video demultiplexadas y almacenadas en contenedores mp4 fragmentados.

{
  "bbb": {
    "author": "The Blender Project",
    "description": "Grumpy Bunny is grumpy",
    "poster": "https://[...]/[...]/BigBuckBunny/images/screenshot1.png",
    "stream": {
      "dash": "https://[...]/[...]/BigBuckBunny/BigBuckBunny_master.mpd",
      "hls": "https://[...]/[...]/BigBuckBunny/BigBuckBunny_master.m3u8",
    "title": "Big Buck Bunny"
  },
  "fbb_ad": {
    "author": "Google Inc.",
    "description": "Introducing Chromecast. The easiest way to enjoy [...]",
    "poster": "https://[...]/[...]/ForBiggerBlazes/images/screenshot8.png",
    "stream": {
      "dash": "https://[...]/[...]/ForBiggerBlazes/ForBiggerBlazes.mpd",
      "hls": "https://[...]/[...]/ForBiggerBlazes/ForBiggerBlazes.m3u8",
    "title": "For Bigger Blazes"
  },

  [...]

}

En el siguiente paso, asignaremos la clave de cada entrada (p. ej., bbb, fbb_ad) a la URL de la transmisión después de que se llame a la app receptora con una solicitud LOAD.

Intercepta la solicitud de CARGA

En este paso crearemos un interceptor de carga con una función que realice una solicitud XHR al archivo JSON alojado. Una vez que se obtenga el archivo JSON, analizaremos el contenido y configuraremos los metadatos. En las siguientes secciones, personalizaremos los parámetros de MediaInformation para especificar el tipo de contenido.

Agrega el siguiente código a tu archivo js/receiver.js, justo antes de la llamada a context.start().

function makeRequest (method, url) {
  return new Promise(function (resolve, reject) {
    let xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.onload = function () {
      if (this.status >= 200 && this.status < 300) {
        resolve(JSON.parse(xhr.response));
      } else {
        reject({
          status: this.status,
          statusText: xhr.statusText
        });
      }
    };
    xhr.onerror = function () {
      reject({
        status: this.status,
        statusText: xhr.statusText
      });
    };
    xhr.send();
  });
}

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD,
    request => {
      return new Promise((resolve, reject) => {
        // Fetch content repository by requested contentId
        makeRequest('GET', 'https://storage.googleapis.com/cpe-sample-media/content.json').then(function (data) {
          let item = data[request.media.contentId];
          if(!item) {
            // Content could not be found in repository
            reject();
          } else {
            // Add metadata
            let metadata = new
               cast.framework.messages.GenericMediaMetadata();
            metadata.title = item.title;
            metadata.subtitle = item.author;

            request.media.metadata = metadata;

            // Resolve request
            resolve(request);
          }
        });
      });
    });

En la siguiente sección, se describe cómo configurar la propiedad media de la solicitud de carga para el contenido DASH.

Utiliza el contenido DASH de la API de muestra

Ahora que preparamos el interceptor de carga, especificaremos el tipo de contenido para la app receptora. Esta información proporcionará a la app receptora la URL de la lista de reproducción principal y el tipo de MIME de transmisión. Agrega el siguiente código al archivo js/receiver.js en la Promise() de la LOAD del interceptor:

...
playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD,
    request => {
      return new Promise((resolve, reject) => {
          ...
          } else {
            // Adjusting request to make requested content playable
            request.media.contentUrl = item.stream.dash;
            request.media.contentType = 'application/dash+xml';
            ...
          }
        });
      });
    });

Una vez que completes este paso, puedes intentar cargar con contenido DASH. Si deseas probar la carga con contenido HLS, consulta el siguiente paso.

Usa el contenido HLS de la API de muestra

La API de muestra incluye contenido HLS y DASH. Además de configurar contentType, como lo hicimos en el paso anterior, la solicitud de carga necesitará algunas propiedades adicionales para usar las URL de HLS de la API de muestra. Cuando la app receptora está configurada para reproducir transmisiones HLS, el tipo de contenedor predeterminado que se espera es la transmisión de transporte (TS). Como consecuencia, la app receptora intentará abrir las transmisiones de MP4 de muestra en formato TS solo si se modifica la propiedad contentUrl. En la solicitud de carga, se debe modificar el objeto MediaInformation con propiedades adicionales para que la app receptora sepa que el contenido es de tipo MP4 y no TS. Agrega el siguiente código a tu archivo js/receiver.js en el interceptor de carga para modificar las propiedades contentUrl y contentType. Además, agrega las propiedades HlsSegmentFormat y HlsVideoSegmentFormat.

...
playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD,
    request => {
      return new Promise((resolve, reject) => {
          ...
          } else {
            // Adjusting request to make requested content playable
            request.media.contentUrl = item.stream.hls;
            request.media.contentType = 'application/x-mpegurl';
            request.media.hlsSegmentFormat = cast.framework.messages.HlsSegmentFormat.FMP4;
            request.media.hlsVideoSegmentFormat = cast.framework.messages.HlsVideoSegmentFormat.FMP4;
            ...
          }
        });
      });
    });

Realiza pruebas

Vuelve a abrir la herramienta de comando y control (CaC), y establece el ID de la app receptora como el ID de tu app. Selecciona tu dispositivo con el botón para transmitir.

Dirígete a la pestaña "Load Media". Esta vez borra el texto en el campo "Content URL" junto al botón "Load by Content", lo que obligará a que nuestra aplicación envíe una solicitud LOAD que solo contenga la referencia contentId al contenido multimedia.

3e830710c562189f.png

Si todo ha funcionado bien con tus modificaciones en la app receptora, el interceptor se debería encargar de convertir el objeto MediaInfo en algo que el SDK pueda reproducir en la pantalla.

Haz clic en el botón "Load by Content" para ver si el contenido multimedia se reproduce correctamente. Si lo deseas, puedes cambiar el ID de contenido por otro ID en el archivo content.json.

Las pantallas inteligentes son dispositivos con funcionalidad táctil que permiten que las aplicaciones receptoras admitan controles táctiles.

En esta sección se explica cómo optimizar tu aplicación receptora cuando se inicie en pantallas inteligentes y cómo personalizar los controles del reproductor.

Accede a los controles de la IU

Se puede acceder al objeto de controles de la IU para pantallas inteligentes mediante cast.framework.ui.Controls.GetInstance(). Agrega el siguiente código a tu archivo js/receiver.js antes de context.start():

...

// Optimizing for smart displays
const touchControls = cast.framework.ui.Controls.getInstance();

context.start();

Si no usas el elemento <cast-media-player>, deberás configurar touchScreenOptimizedApp en CastReceiverOptions. En este codelab usamos el elemento <cast-media-player>.

context.start({ touchScreenOptimizedApp: true });

Los botones de control predeterminados se asignan a cada ranura en función de MetadataType y MediaStatus.supportedMediaCommands.

Controles de video

En el caso de MetadataType.MOVIE, MetadataType.TV_SHOW y MetadataType.GENERIC, el objeto de controles de la IU para pantallas inteligentes se mostrará como en el siguiente ejemplo.

5f5a3d567813cf10.png

  1. --playback-logo-image
  2. MediaMetadata.subtitle
  3. MediaMetadata.title
  4. MediaStatus.currentTime
  5. MediaInformation.duration
  6. ControlsSlot.SLOT_SECONDARY_1: ControlsButton.QUEUE_PREV
  7. ControlsSlot.SLOT_PRIMARY_1: ControlsButton.SEEK_BACKWARD_30
  8. PLAY/PAUSE
  9. ControlsSlot.SLOT_PRIMARY_2: ControlsButton.SEEK_FORWARD_30
  10. ControlsSlot.SLOT_SECONDARY_2: ControlsButton.QUEUE_NEXT

Controles de audio

En el caso de MetadataType.MUSIC_TRACK, el objeto de controles de la IU para pantallas inteligentes se mostrará de la siguiente manera:

e93d4557f324e8c0.png

  1. --playback-logo-image
  2. MusicTrackMediaMetadata.albumName
  3. MusicTrackMediaMetadata.title
  4. MusicTrackMediaMetadata.albumArtist
  5. MusicTrackMediaMetadata.images[0]
  6. MediaStatus.currentTime
  7. MediaInformation.duration
  8. ControlsSlot.SLOT_SECONDARY_1: ControlsButton.NO_BUTTON
  9. ControlsSlot.SLOT_PRIMARY_1: ControlsButton.QUEUE_PREV
  10. PLAY/PAUSE
  11. ControlsSlot.SLOT_PRIMARY_2: ControlsButton.QUEUE_NEXT
  12. ControlsSlot.SLOT_SECONDARY_2: ControlsButton.NO_BUTTON

Actualiza los comandos de contenido multimedia compatibles

El objeto de controles de la IU también determina si se muestra un ControlsButton o no, en función de MediaStatus.supportedMediaCommands.

Cuando el valor de supportedMediaCommands sea igual a ALL_BASIC_MEDIA, se mostrará el diseño de control predeterminado de la siguiente manera:

5b97ada8d239239c.png

Cuando el valor de supportedMediaCommands sea igual a ALL_BASIC_MEDIA | QUEUE_PREV | QUEUE_NEXT, se mostrará el diseño de control predeterminado, como se indica a continuación:

2d8267d4d8b68e87.png

Cuando el valor de supportedMediaCommands sea igual a PAUSE | QUEUE_PREV | QUEUE_NEXT, se mostrará el diseño de control predeterminado de la siguiente manera:

39c9afe44c4fa8dc.png

Cuando haya pistas de texto disponibles, el botón de subtítulos aparecerá siempre en SLOT_1.

771952ab29e2eb21.png

Para cambiar dinámicamente el valor de supportedMediaCommands después de iniciar el contexto de una app receptora, puedes llamar a PlayerManager.setSupportedMediaCommands para anular el valor. Además, puedes agregar un comando nuevo con addSupportedMediaCommands o quitar uno existente con removeSupportedMediaCommands.

Personaliza los botones de control

Puedes personalizar los controles mediante PlayerDataBinder. Agrega el siguiente código a tu archivo js/receiver.js debajo de touchControls para establecer la primera ranura de tus controles:

...

// Optimizing for smart displays
const touchControls = cast.framework.ui.Controls.getInstance();
const playerData = new cast.framework.ui.PlayerData();
const playerDataBinder = new cast.framework.ui.PlayerDataBinder(playerData);

playerDataBinder.addEventListener(
  cast.framework.ui.PlayerDataEventType.MEDIA_CHANGED,
  (e) => {
    if (!e.value) return;

    // Clear default buttons and re-assign
    touchControls.clearDefaultSlotAssignments();
    touchControls.assignButton(
      cast.framework.ui.ControlsSlot.SLOT_PRIMARY_1,
      cast.framework.ui.ControlsButton.SEEK_BACKWARD_30
    );
  });

context.start();

La exploración multimedia es una función del receptor de CAF que permite que los usuarios exploren contenido adicional en dispositivos táctiles. Para implementar esta función, usarás PlayerDataBinder para configurar la IU de BrowseContent. Luego, puedes propagarlo con BrowseItems según el contenido que desees mostrar.

BrowseContent

A continuación, se muestra un ejemplo de la IU BrowseContent y sus propiedades:

e40623e1907d983.png

  1. BrowseContent.title
  2. BrowseContent.items

Relación de aspecto

Use targetAspectRatio property para seleccionar la mejor relación de aspecto para tus elementos de imagen. El SDK de app receptora de CAF admite tres proporciones: SQUARE_1_TO_1, PORTRAIT_2_TO_3, LANDSCAPE_16_TO_9.

Explora elementos

Usa BrowseItem para mostrar el título, los subtítulos, la duración y la imagen de cada elemento:

838a0db6c9224710.png

  1. BrowseItem.image
  2. BrowseItem.duration
  3. BrowseItem.title
  4. BrowseItem.subtitle

Configura los datos de la exploración multimedia

Puedes proporcionar una lista de contenido multimedia para la navegación llamando a setBrowseContent. Agrega el siguiente código al archivo js/receiver.js debajo de playerDataBinder y al objeto de escucha de eventos MEDIA_CHANGED para establecer los elementos de navegación con el título "A continuación".

// Optimizing for smart displays
const touchControls = cast.framework.ui.Controls.getInstance();
const playerData = new cast.framework.ui.PlayerData();
const playerDataBinder = new cast.framework.ui.PlayerDataBinder(playerData);

...

let browseItems = getBrowseItems();

function getBrowseItems() {
  let browseItems = [];
  makeRequest('GET', 'https://storage.googleapis.com/cpe-sample-media/content.json')
  .then(function (data) {
    for (let key in data) {
      let item = new cast.framework.ui.BrowseItem();
      item.entity = key;
      item.title = data[key].title;
      item.subtitle = data[key].description;
      item.image = new cast.framework.messages.Image(data[key].poster);
      item.imageType = cast.framework.ui.BrowseImageType.MOVIE;
      browseItems.push(item);
    }
  });
  return browseItems;
}

let browseContent = new cast.framework.ui.BrowseContent();
browseContent.title = 'Up Next';
browseContent.items = browseItems;
browseContent.targetAspectRatio = cast.framework.ui.BrowseImageAspectRatio.LANDSCAPE_16_TO_9;

playerDataBinder.addEventListener(
  cast.framework.ui.PlayerDataEventType.MEDIA_CHANGED,
  (e) => {
    if (!e.value) return;

    ....

    // Media browse
    touchControls.setBrowseContent(browseContent);
  });

Al hacer clic en un elemento de navegación multimedia, se activará el interceptor LOAD. Agrega el siguiente código a tu interceptor LOAD para asignar request.media.contentId a request.media.entity desde el elemento de navegación multimedia:

playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD,
    request => {
      ...

      // Map contentId to entity
      if (request.media && request.media.entity) {
        request.media.contentId = request.media.entity;
      }

      return new Promise((resolve, reject) => {
            ...
        });
    });

También puedes configurar el objeto BrowseContent en null para quitar la IU de exploración multimedia.

El SDK de app receptora de transmisión ofrece otra opción para que los desarrolladores depuren fácilmente apps receptoras mediante la API CastDebugLogger y una herramienta de comandos y control (CaC) complementaria para capturar registros.

Inicialización

Para incorporar la API, agrega el código fuente CastDebugLogger en el archivo index.html. La fuente se debe declarar en la etiqueta <head> después de la declaración del SDK de la app receptora de transmisión.

<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, agrega el siguiente código para recuperar la instancia CastDebugLogger y habilitar el registro:

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.
castDebugLogger.setEnabled(true);

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

d9cb99e7742fc240.png

Eventos de registro del reproductor

Con CastDebugLogger puedes registrar fácilmente eventos del reproductor que se activan mediante el SDK de la app receptora de CAF y usar diferentes niveles de registro para acceder a los datos del evento. La configuración loggerLevelByEvents usa cast.framework.events.EventType y cast.framework.events.category para especificar qué eventos se registrarán.

Agrega el siguiente código debajo de la declaración castDebugLogger para registrar cuando se active un evento CORE del reproductor o se transmita un cambio mediaStatus:

// Debug Logger
const castDebugLogger = cast.debug.CastDebugLogger.getInstance();

// Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
castDebugLogger.setEnabled(true);

// 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 CastDebugLogger (registro de depuración) te permite crear mensajes de registro que aparecen en la superposición de depuración de la app receptora con diferentes colores. Los siguientes métodos de registro están disponibles, 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 acceso, el primer parámetro es una etiqueta personalizada. Puede ser cualquier string de identificación que consideres significativa. El CastDebugLogger usa etiquetas para filtrar los registros. El uso de las etiquetas se explica en detalle más adelante. El segundo parámetro es el mensaje de registro.

Para mostrar registros en acción, agrega registros a tu interceptor LOAD.

playerManager.setMessageInterceptor(
  cast.framework.messages.MessageType.LOAD,
  request => {
    castDebugLogger.info(LOG_TAG, 'Intercepting LOAD request');

    // Map contentId to entity
    if (request.media && request.media.entity) {
      request.media.contentId = request.media.entity;
    }

    return new Promise((resolve, reject) => {
      // Fetch content repository by requested contentId
      makeRequest('GET', 'https://storage.googleapis.com/cpe-sample-media/content.json')
        .then(function (data) {
          let item = data[request.media.contentId];
          if(!item) {
            // Content could not be found in repository
            castDebugLogger.error(LOG_TAG, 'Content not found');
            reject();
          } else {
            // Adjusting request to make requested content playable
            request.media.contentUrl = item.stream.dash;
            request.media.contentType = 'application/dash+xml';
            castDebugLogger.warn(LOG_TAG, 'Playable URL:', request.media.contentUrl);

            // Add metadata
            let metadata = new cast.framework.messages.MovieMediaMetadata();
            metadata.metadataType = cast.framework.messages.MetadataType.MOVIE;
            metadata.title = item.title;
            metadata.subtitle = item.author;

            request.media.metadata = metadata;

            // Resolve request
            resolve(request);
          }
      });
    });
  });

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. Habilitar una etiqueta personalizada con el nivel WARNING solo mostrará mensajes de error 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 el siguiente código debajo del registro de eventos CORE:

// 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
}

// Set verbosity level for custom tags.
castDebugLogger.loggerLevelByTags = {
    [LOG_TAG]: cast.framework.LoggerLevel.DEBUG,
};

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 en el dispositivo de transmisión. 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 el siguiente código 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.
castDebugLogger.setEnabled(true);

// Show debug overlay
castDebugLogger.showDebugLogs(true);

// Clear log messages on debug overlay
// castDebugLogger.clearDebugLogs();

356c6ac94318539c.png

Ya sabes cómo crear una aplicación receptora y personalizada con el SDK de app receptora de transmisión más reciente. Puedes encontrar más apps de muestra en GitHub en github.com/googlecast.