Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Integra el SDK de Cast en tu app de Web Sender

En esta guía para desarrolladores, se describe cómo agregar compatibilidad con Google Cast a tu app de Web Sender con el SDK de Cast.

Terminología

El dispositivo móvil o el navegador es el emisor, que controla la reproducción; el dispositivo Google Cast es el receptor, que muestra el contenido en la pantalla para la reproducción.

El SDK de Web Sender consta de dos partes: la API de Framework (cast.framework) y la API de Base (chrome.cast) En general, realizas llamadas a la API de Framework más simple y de nivel superior, que luego procesa la API de Base de nivel inferior.

El framework del emisor hace referencia a la API de Framework, el módulo y los recursos asociados que proporcionan un wrapper en torno a la funcionalidad de nivel inferior. La app del emisor o app de Google Cast para Chrome hace referencia a una app web (HTML/JavaScript) que se ejecuta dentro de un navegador Chrome en un dispositivo emisor. Una app de Web Receiver hace referencia a una app HTML/JavaScript que se ejecuta en Chromecast o en un dispositivo Google Cast.

El framework del emisor usa un diseño de devolución de llamada asíncrono para informar a la app del emisor sobre los eventos y realizar la transición entre varios estados del ciclo de vida de la app de Cast.

Cómo cargar la biblioteca

Para que tu app implemente las funciones de Google Cast, debe conocer la ubicación del SDK de Google Cast Web Sender, como se muestra a continuación. Agrega el parámetro de consulta de URL loadCastFramework para cargar también la API de Framework de Web Sender. Todas las páginas de tu app deben hacer referencia a la biblioteca de la siguiente manera:

<script src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>

Framework

El SDK de Web Sender usa el cast.framework.* espacio de nombres. El espacio de nombres representa lo siguiente:

Métodos o funciones que invocan operaciones en la API
Objetos de escucha de eventos para funciones de escucha en la API

El framework consta de estos componentes principales:

El CastContext es un objeto singleton que proporciona información sobre el estado actual de Cast y activa eventos para los cambios de estado de Cast y de la sesión de Cast.
El CastSession objeto administra la sesión: proporciona información de estado y activa eventos, como cambios en el volumen del dispositivo, el estado de silencio y los metadatos de la app.
El elemento del botón para transmitir, que es un elemento personalizado HTML simple que extiende el botón HTML. Si el botón de Cast proporcionado no es suficiente, puedes usar el estado de Cast para implementar un botón de Cast.
El RemotePlayerController proporciona la vinculación de datos para simplificar la implementación del reproductor remoto.

Consulta la referencia de la API de Google Cast Web Sender para obtener una descripción completa del espacio de nombres.

Botón para transmitir

El framework controla por completo el componente del botón para transmitir en tu app. Esto incluye la administración de la visibilidad, así como el control de eventos de clic.

<google-cast-launcher></google-cast-launcher>

También puedes crear el botón de manera programática:

document.createElement("google-cast-launcher");

Puedes aplicar cualquier estilo adicional, como el tamaño o el posicionamiento, al elemento según sea necesario. Usa el atributo --connected-color para elegir el color del estado conectado de Web Receiver y --disconnected-color para el estado desconectado.

Inicialización

Después de cargar la API de Framework, la app llamará al controlador window.__onGCastApiAvailable. Debes asegurarte de que la app establezca este controlador en la window antes de cargar la biblioteca del emisor.

Dentro de este controlador, inicializas la interacción de Cast llamando al setOptions(options) método de CastContext.

Por ejemplo:

<script>
window['__onGCastApiAvailable'] = function(isAvailable) {
  if (isAvailable) {
    initializeCastApi();
  }
};
</script>

Luego, inicializas la API de la siguiente manera:

initializeCastApi = function() {
  cast.framework.CastContext.getInstance().setOptions({
    receiverApplicationId: applicationId,
    autoJoinPolicy: chrome.cast.AutoJoinPolicy.ORIGIN_SCOPED
  });
};

Primero, la app recupera la instancia singleton del CastContext objeto que proporciona el framework. Luego, usa setOptions(options) con un CastOptions objeto para establecer el applicationID.

Si usas el receptor de contenido multimedia predeterminado, que no requiere registro, usa una constante predefinida por el SDK de Web Sender, como se muestra a continuación, en lugar del applicationID:

cast.framework.CastContext.getInstance().setOptions({
  receiverApplicationId: chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID
});

Control multimedia

Una vez que se inicializa CastContext, la app puede recuperar el CastSession actual en cualquier momento con getCurrentSession().

var castSession = cast.framework.CastContext.getInstance().getCurrentSession();

Se puede usar CastSession para cargar contenido multimedia en el dispositivo de transmisión conectado con loadMedia(loadRequest). Primero, crea un MediaInfo, con el contentId y el contentType, así como cualquier otra información relacionada con el contenido. Luego, crea un LoadRequest a partir de él y establece toda la información pertinente para la solicitud. Por último, llama a loadMedia(loadRequest) en tu CastSession.

var mediaInfo = new chrome.cast.media.MediaInfo(currentMediaURL, contentType);
var request = new chrome.cast.media.LoadRequest(mediaInfo);
castSession.loadMedia(request).then(
  function() { console.log('Load succeed'); },
  function(errorCode) { console.log('Error code: ' + errorCode); });

El método loadMedia mostrará una promesa que se puede usar para realizar cualquier operación necesaria para obtener un resultado exitoso. Si se rechaza la promesa, el argumento de la función será un chrome.cast.ErrorCode.

Puedes acceder a las variables de estado del reproductor en RemotePlayer. Todas las interacciones con RemotePlayer, incluidas las devoluciones de llamada y los comandos de eventos multimedia, se controlan con RemotePlayerController.

var player = new cast.framework.RemotePlayer();
var playerController = new cast.framework.RemotePlayerController(player);

RemotePlayerController le otorga a la app el control total de los comandos REPRODUCIR, PAUSAR, DETENER y BUSCAR para el contenido multimedia cargado.

REPRODUCIR/PAUSAR: playerController.playOrPause();
DETENER: playerController.stop();
BUSCAR: playerController.seek();

Se pueden usar RemotePlayer y RemotePlayerController con frameworks de vinculación de datos, como Polymer o Angular, para implementar un reproductor remoto.

A continuación, se incluye un fragmento de código para Angular:

<button id="playPauseButton" class="playerButton"
  ng-disabled="!player.canPause"
  ng-click="controller.playOrPause()">
    {{player.isPaused ? 'Play' : 'Pause'}}
</button>
<script>
var player = new cast.framework.RemotePlayer();
var controller = new cast.framework.RemotePlayerController(player);
// Listen to any player update, and trigger angular data binding
update.controller.addEventListener(
  cast.framework.RemotePlayerEventType.ANY_CHANGE,
  function(event) {
    if (!$scope.$$phase) $scope.$apply();
  });
</script>

Estado del contenido multimedia

Durante la reproducción de contenido multimedia, se producen varios eventos que se pueden capturar configurando objetos de escucha para varios cast.framework.RemotePlayerEventType eventos en el RemotePlayerControllerobjeto.

Para obtener la información de estado del contenido multimedia, usa el cast.framework.RemotePlayerEventType.MEDIA_INFO_CHANGED evento, que se activa cuando cambia la reproducción y cuando cambia el CastSession.getMediaSession().media.

playerController.addEventListener(
  cast.framework.RemotePlayerEventType.MEDIA_INFO_CHANGED, function() {
    // Use the current session to get an up to date media status.
    let session = cast.framework.CastContext.getInstance().getCurrentSession();

    if (!session) {
        return;
    }

    // Contains information about the playing media including currentTime.
    let mediaStatus = session.getMediaSession();
    if (!mediaStatus) {
        return;
    }

    // mediaStatus also contains the mediaInfo containing metadata and other
    // information about the in progress content.
    let mediaInfo = mediaStatus.media;
  });

Cuando se producen eventos como pausa, reproducción, reanudación o búsqueda, la app deberá actuar sobre ellos y sincronizarse entre sí y la app de Web Receiver en el dispositivo Cast. Consulta Actualizaciones de estado para obtener más información.

Cómo funciona la administración de sesiones

El SDK de Cast presenta el concepto de una sesión de Cast, cuyo establecimiento combina los pasos para conectarse a un dispositivo, iniciar (o unirse a) una app de Web Receiver, conectarse a esa app y, luego, inicializar un canal de control de contenido multimedia. Consulta la guía del ciclo de vida de la aplicación de Web Receiver para obtener más información sobre las sesiones de Cast y el ciclo de vida de Web Receiver.

La clase CastContext administra las sesiones, que tu app puede recuperar a través de cast.framework.CastContext.getInstance(). Las sesiones individuales están representadas por subclases de la clase Session. Por ejemplo, CastSession representa sesiones con dispositivos Cast. Tu app puede acceder a la sesión de Cast activa actualmente a través de CastContext.getCurrentSession().

Para supervisar el estado de la sesión, agrega un objeto de escucha a la CastContext para el CastContextEventType.SESSION_STATE_CHANGED tipo de evento.

var context = cast.framework.CastContext.getInstance();
context.addEventListener(
  cast.framework.CastContextEventType.SESSION_STATE_CHANGED,
  function(event) {
    switch (event.sessionState) {
      case cast.framework.SessionState.SESSION_STARTED:
      case cast.framework.SessionState.SESSION_RESUMED:
        break;
      case cast.framework.SessionState.SESSION_ENDED:
        console.log('CastContext: CastSession disconnected');
        // Update locally as necessary
        break;
    }
  })

Para la desconexión, por ejemplo, cuando el usuario hace clic en el botón "Detener la transmisión" de el diálogo de Cast, puedes agregar un objeto de escucha para el RemotePlayerEventType.IS_CONNECTED_CHANGED tipo de evento en tu objeto de escucha. En tu objeto de escucha, verifica si RemotePlayer está desconectado. Si es así, actualiza el estado del reproductor local según sea necesario. Por ejemplo:

playerController.addEventListener(
  cast.framework.RemotePlayerEventType.IS_CONNECTED_CHANGED, function() {
    if (!player.isConnected) {
      console.log('RemotePlayerController: Player disconnected');
      // Update local player to disconnected state
    }
  });

Si bien el usuario puede controlar directamente la finalización de Cast a través del botón de Cast del framework, el emisor puede detener la transmisión con el objeto actual.CastSession

function stopCasting() {
  var castSession = cast.framework.CastContext.getInstance().getCurrentSession();
  // End the session and pass 'true' to indicate
  // that Web Receiver app should be stopped.
  castSession.endSession(true);
}

Transferencia de transmisión

La preservación del estado de la sesión es la base de la transferencia de transmisión, en la que los usuarios pueden mover transmisiones de audio y video existentes entre dispositivos con comandos de voz, la app de Google Home o pantallas inteligentes. El contenido multimedia deja de reproducirse en un dispositivo (el origen) y continúa en otro (el destino). Cualquier dispositivo de transmisión con el firmware más reciente puede servir como origen o destino en una transferencia de transmisión.

Para obtener el nuevo dispositivo de destino durante la transferencia de transmisión, llama a CastSession#getCastDevice() cuando se llame al cast.framework.SessionState.SESSION_RESUMED evento.

Consulta Transferencia de transmisión en Web Receiver para obtener más información.

Configuración

Agregar funciones avanzadas