Receptor web personalizado

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.
Jump Start: El código para crear un receptor web personalizado básico es simple. Ve directamente a la sección sobre cómo registrar la app de recepción web y, luego, crea una app básica de receptor web.

El SDK de Web Receiver usa un reproductor multimedia integrado para proporcionar una experiencia de reproducción sencilla y sin interrupciones. Proporciona compatibilidad lista para usar con el Asistente de Google y funciones específicas de Cast compatibles automáticamente con todos los remitentes y dispositivos táctiles. A medida que se lancen nuevas funciones, se seguirán admitiendo sin cambios adicionales del remitente.

El receptor web personalizado es una app HTML5 personalizada que debe alojarse para mostrar tu contenido en dispositivos compatibles con Cast. Es posible que debas crear un receptor web personalizado según las necesidades de tu negocio. Si deseas obtener ayuda para decidir qué tipo de receptor usar, consulta la guía de elección de receptor web.

SDK de Google Web Receiver

La app de Web Receiver accede a la API de Web Receiver con la siguiente referencia:

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

Recomendación para los protocolos URL: Ten en cuenta que la URL anterior no especifica un protocolo http:&https: Omitir estos protocolos cuando se obtiene el recurso cast_receiver_framework.js permite que este recurso se recupere con el mismo protocolo que el servidor que aloja la app del receptor web. Esto significa que el cambio entre HTTP para el desarrollo y HTTPS para la producción es transparente y no requerirá un cambio de código. (Las apps del receptor web publicadas deben estar alojadas en servidores compatibles con TLS).

Vista previa del SDK

También está disponible una versión previa al lanzamiento del SDK de Cast Web Receiver para usar en pruebas de aplicaciones que no son de producción. Puedes encontrar más información sobre la URL de vista previa del SDK en la URL de vista previa del SDK de Google Cast para receptores web.

Ciclo de vida de la aplicación

El ciclo de vida de la app del receptor web comienza desde el momento en que el receptor web se carga en el dispositivo de transmisión y continúa hasta el momento en que se elimina la aplicación y el dispositivo de transmisión vuelve a su estado predeterminado.

Durante el ciclo de vida de una app receptora web, los mensajes se intercambian entre el receptor web y cualquier aplicación emisora emisora conectada. Una aplicación emisora enviará un mensaje inicial a un dispositivo Google Cast para solicitar que se cree una sesión con un ID de app específico. Esto inicia el ciclo de vida del receptor web, ya que el dispositivo Google Cast intentará cargar la app del receptor web. Suponiendo que no hay problemas de red, la app del receptor web se descargará desde la red mediante la URL resuelta asociada con el ID de la app. Una vez cargada, la app receptora web realizará sus operaciones de configuración e indicará que está lista para procesar mensajes de cualquier aplicación emisora conectada.

Una app Web Receiver puede destruir (finalizar su ciclo de vida actual y cerrar la aplicación) en las siguientes condiciones:

  • La app receptora web recibe un mensaje explícito del último conectador para finalizar la sesión de la aplicación.
  • La app receptora web estuvo inactiva durante un período definido sin remitentes conectados y decide finalizar la sesión de la aplicación.
  • Se inició una sesión de transmisión diferente.
  • El receptor web encuentra un error grave durante su ciclo de vida normal.

El SDK de receptor web controla todos los casos comunes de acuerdo con nuestros lineamientos de UX.

Clases principales

El marco de trabajo del SDK de Web Receiver tiene 2 clases principales:

  • cast.framework.CastReceiverContext: Administra el framework general y carga las bibliotecas necesarias. Con este objeto, puedes hacer lo siguiente:

    • Establece opciones de configuración de la aplicación
    • Administrar eventos del sistema (como el remitente conectado o desconectado)
    • Cómo crear canales personalizados
    • Iniciar comunicación de transmisión
  • cast.framework.PlayerManager: Administra la reproducción de contenido multimedia. Este controla el reproductor subyacente y el elemento multimedia según la solicitud del remitente. Con este objeto, puedes hacer lo siguiente:

    • Cómo controlar operaciones de reproducción
    • Cómo controlar las solicitudes del remitente relacionadas con la reproducción
    • Cómo controlar eventos relacionados con la reproducción

Registra la app de recepción web

Antes de desarrollar una app receptora web, deberás registrarla con la Consola para desarrolladores del SDK de Google Cast. Consulta Registro para obtener más información. Todas las apps de receptor web requieren que las aplicaciones emisoras proporcionen un ID de app con los mensajes de comando que envían al receptor web a través de la API del remitente. Cuando registres la aplicación del receptor web, recibirás el ID de la aplicación para incluirlo en las llamadas a la API del remitente.

Crea una app receptora web básica

La siguiente es la estructura principal de una app receptora web básica que no tiene personalización:

  1. Un elemento HTML cast-media-player que representa el reproductor multimedia.
  2. Un elemento HTML de secuencia de comandos para cargar el marco de trabajo del receptor web
  3. Llama a start() para iniciar la app Receptor web sin opciones.

Este es el código mínimo para una app Receptor web que usa el framework de aplicaciones de Cast sin ninguna personalización. Puedes copiar y pegar esta secuencia de comandos tal como está en tu app para crearla.

<html>
<head>
  <script type="text/javascript"
      src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js">
  </script>
</head>
<body>
  <cast-media-player></cast-media-player>
  <script>
    cast.framework.CastReceiverContext.getInstance().start();
  </script>
</body>
</html>

En este punto, un usuario puede abrir su app emisora, conectarse a su dispositivo de transmisión, navegar a contenido multimedia y presionar Reproducir, lo que le indica al receptor web que transmita el contenido multimedia a la TV para que lo mire el usuario.

Compara este receptor web básico con una app receptora personalizada.

Multimedia y reproductores

El framework de Cast proporciona un reproductor multimedia integrado, representado por el elemento HTML cast-media-player. Este reproductor multimedia admite la reproducción de protocolos de transmisión como MPEG-DASH, HLS y Smooth Streaming.

Puedes encontrar un conjunto de códecs de medios compatibles y contenedores en la sección Contenido multimedia compatible. Mediante los mensajes de transmisión, los desarrolladores pueden admitir una lista de operaciones iniciadas por el remitente, como carga, reproducción, pausa y búsqueda, en las que el SDK de Cast controla las interacciones con el medio. Para ver una lista de las operaciones compatibles, consulta la referencia de la API del remitente de la plataforma de tu app: RemoteMediaClient en el remitente de Android, GCKMediaControlChannel en el remitente de iOS y Media en el remitente web.

Uso compartido de recursos entre dominios

Google Cast es totalmente compatible con el uso compartido de recursos multiorigen (CORS). Los protocolos de transmisión, a diferencia de la mayoría de los protocolos basados en archivos, acceden al contenido de manera asíncrona mediante XMLHttpRequest. En un mundo de CORS, estas solicitudes están protegidas contra el acceso inapropiado por parte del encabezado de CORS desde el servidor donde se origina el recurso. Esto significa que el servidor de tu contenido puede decidir dónde se puede incluir. La mayoría de los navegadores modernos son totalmente compatibles con CORS. Los dispositivos iOS y Android acceden al contenido en un nivel inferior y no tienen en cuenta estos encabezados. A menudo, este es el primer problema que aparece cuando un desarrollador desea usar contenido de transmisión. Consulta Uso compartido de recursos multiorigen para obtener más detalles.