Google Cast para Chrome en Android

Imagina poder usar una aplicación web de tu teléfono para presentar una presentación de diapositivas en un proyector para conferencias, o compartir imágenes, jugar o mirar videos en la pantalla de una TV, con la aplicación web móvil como control.

La versión más reciente de Chrome para Android permite que los sitios presenten contenido en dispositivos Google Cast a través del SDK de Cast Web. Esto significa que ahora puedes crear aplicaciones emisoras de Cast mediante el SDK web con Chrome en Android o iOS (o en una computadora de escritorio con la extensión), así como crear aplicaciones que utilicen el SDK nativo de Cast para Android y iOS. (Antes, una aplicación emisora de Google Cast necesitaba la extensión de Google Cast para Chrome, por lo que en Android solo se podía interactuar con dispositivos de transmisión desde aplicaciones nativas).

A continuación, se incluye una breve introducción a la compilación de una app emisora de Cast mediante el SDK web. Puedes encontrar más información completa en la Guía de desarrollo de aplicaciones de Chrome Sender.

Todas las páginas que usan Cast deben incluir la biblioteca de Cast:

<script
  type="text/javascript"
  src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js"
></script>

Agrega una devolución de llamada para controlar la disponibilidad de la API e inicializar la sesión de transmisión (asegúrate de agregar el controlador antes de que se cargue la API):

window['__onGCastApiAvailable'] = function (isLoaded, error) {
  if (isLoaded) {
    initializeCastApi();
  } else {
    console.log(error);
  }
};

function initializeCastApi() {
  var sessionRequest = new chrome.cast.SessionRequest(applicationID);
  var apiConfig = new chrome.cast.ApiConfig(
    sessionRequest,
    sessionListener,
    receiverListener
  );
  chrome.cast.initialize(apiConfig, onInitSuccess, onError);
}

Si usas la aplicación receptora de contenido multimedia con estilo predeterminada y no una aplicación receptora personalizada registrada y de implementación propia, puedes crear un objeto SessionRequest como el siguiente:

var sessionRequest = new chrome.cast.SessionRequest(chrome.cast.media.
  DEFAULT_MEDIA_RECEIVER_APP_ID);

La devolución de llamada receiverListener anterior se ejecuta cuando uno o más dispositivos están disponibles:

function receiverListener(e) {
  if (e === chrome.cast.ReceiverAvailability.AVAILABLE) {
    // update UI
  }
}

Inicia una sesión de transmisión cuando el usuario haga clic en el ícono de transmisión, según se estipula en los Lineamientos de la experiencia del usuario:

chrome.cast.requestSession(onRequestSessionSuccess,
    onRequestSessionError);

function onRequestSessionSuccess(e) {
  session = e;
}

El usuario verá un selector de dispositivos:

Diálogo de selección del dispositivo de transmisión

Se muestra el diálogo route details cuando la página ya está conectada y llama a requestSession():

Diálogo de detalles de la ruta de transmisión

Una vez que tienes una sesión de transmisión, puedes cargar contenido multimedia para el dispositivo de transmisión seleccionado y agregar un objeto de escucha para los eventos de reproducción de contenido multimedia:

var mediaInfo = new chrome.cast.media.MediaInfo(mediaURL);
var request = new chrome.cast.media.LoadRequest(mediaInfo);
session.loadMedia(
  request,
  onMediaDiscovered.bind(this, 'loadMedia'),
  onMediaError
);

function onMediaDiscovered(how, media) {
  currentMedia = media;
  media.addUpdateListener(onMediaStatusUpdate);
}

En este caso, la variable currentMedia es un objeto chrome.cast.media.Media que se puede usar para controlar la reproducción:

function playMedia() {
  currentMedia.play(null, success, error);
}


    // ...

Se muestra una notificación de reproducción/pausa cuando se reproduce contenido multimedia:

Notificación de transmisión/pausa.

Si no se está reproduciendo contenido, la notificación solo tiene un botón para detener la transmisión:

Notificación de detención de transmisión

La devolución de llamada sessionListener para chrome.cast.ApiConfig() (ver arriba) permite que tu app se una a una sesión de transmisión existente o la administre:

function sessionListener(e) {
  session = e;
  if (session.media.length !== 0) {
    onMediaDiscovered('onRequestSessionSuccess', session.media[0]);
  }
}

Si Chrome en Android permite transmitir contenido multimedia desde tu sitio web, pero quieres inhabilitar esta función para que la IU de transmisión predeterminada no interfiera con la tuya, usa el atributo disableRemotePlayback, disponible en Chrome 49 y versiones posteriores:

<video disableRemotePlayback src="..."></video>

Dispositivos alternativos de envío y recepción

La guía del SDK de Cast Web contiene vínculos a apps de ejemplo, así como información sobre las funciones de transmisión, como la administración de sesiones, las pistas de texto (para subtítulos y subtítulos) y las actualizaciones de estado.

En la actualidad, solo puedes presentar contenido en una aplicación receptora de transmisión mediante el SDK de Cast Web, pero hay un trabajo en curso para habilitar la API de presentación a fin de que pueda usarse sin el SDK de Cast (en computadoras de escritorio y Android) para presentar cualquier página web a un dispositivo de transmisión sin tener que registrarte en Google. A diferencia del SDK de Cast solo para Chrome, el uso de la API estándar permitirá que la página funcione con otros usuarios-agentes y dispositivos compatibles con la API.

La API de Presentación, junto con la API de reproducción remota, forman parte del esfuerzo del grupo de trabajo de segunda pantalla para permitir que las páginas web usen segundas pantallas a fin de mostrar contenido web.

Estas API aprovechan la variedad de dispositivos que se ponen en línea, incluidas las pantallas conectadas que ejecutan un usuario-agente, para habilitar una amplia variedad de aplicaciones con un dispositivo de "control" y un dispositivo de "pantalla".

Te mantendremos al tanto del progreso de la implementación.

Mientras tanto, comunícate con nosotros si detectas errores o quieres solicitar funciones, en crbug.com/new.

Más información