Se usó la API de Cloud Translation para traducir esta página.

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 Web App emisora con el SDK de Cast

Terminología

El dispositivo móvil o navegador es el remitente, que controla la reproducción. el dispositivo Google Cast es el receptor y muestra el contenido de 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 se procesan con la API Base de nivel inferior.

El framework de remitente hace referencia a la API del framework, al módulo y a los que proporcionan un wrapper para funcionalidades de nivel inferior. El app del remitente o app de Chrome de Google Cast hace referencia a una app web (HTML/JavaScript). que se ejecuta en el navegador Chrome en un dispositivo emisor. Una app receptora web hace referencia a una app HTML/JavaScript que se ejecute en un dispositivo Chromecast o Google Cast.

El framework del remitente usa un diseño de devolución de llamada asíncrono para informar al remitente. de eventos y para hacer la transición entre varios estados de la vida de la app de Cast ciclo.

Cómo cargar la biblioteca

Para que tu app implemente las funciones de Google Cast, debe conocer la del SDK de Google Cast Web Sender, como se muestra a continuación. Agrega el Parámetro de consulta de URL loadCastFramework para cargar la API de Web Sender Framework a tus conjuntos de datos. 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 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:

La CastContext es un objeto singleton que proporciona información sobre el el estado de transmisión actual y activa eventos para el estado de transmisión y la sesión de transmisión. cambios de estado.
La CastSession objeto administra la sesión, proporciona estados información y activadores, 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 HTML simple personalizado que extiende el botón HTML. Si el botón para transmitir proporcionado no es suficiente, haz lo siguiente: puedes usar el estado de transmisión para implementar un botón para transmitir.
La RemotePlayerController proporciona la vinculación de datos para simplificar la implementación del reproductor remoto.

Revisa el Referencia de la API de Google Cast Web Sender para una descripción completa del espacio de nombres.

Botón para transmitir

El componente del botón para transmitir de tu app lo controla completamente el framework. Esta incluye la administración de visibilidad y de eventos de clic.

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

Como alternativa, puedes crear el botón de manera programática:

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

Puedes aplicar cualquier estilo adicional, como tamaño o posicionamiento, a la según sea necesario. Usa el atributo --connected-color para elegir el color para el estado del receptor web conectado --disconnected-color para el estado desconectado.

Inicialización

Después de cargar la API del framework, la app llamará al controlador. window.__onGCastApiAvailable Asegúrate de que la app establezca este controlador en window antes de cargar la biblioteca del remitente.

Dentro de este controlador, inicializa 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, inicializa 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 de la Objeto CastContext que proporciona el framework. Luego, usa setOptions(options) con un Objeto CastOptions para configurar applicationID.

Si estás usando el receptor multimedia predeterminado, que no requiere registro, usarás una constante predefinida por el SDK de Web Sender, como se muestra a continuación, en lugar de applicationID:

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

Control multimedia

Una vez que el elemento CastContext se inicializa, la app puede recuperar el estado CastSession en cualquier tiempo utilizando getCurrentSession()

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

Se puede usar CastSession para cargar contenido multimedia en el dispositivo de transmisión conectado mediante loadMedia(loadRequest) Primero, crea un MediaInfo: usando contentId y contentType, así como cualquier otra información relacionadas con el contenido. Luego, crea LoadRequest a partir de él, y configura toda la información relevante para la solicitud. Finalmente, 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á un Promise que sirven para realizar las operaciones necesarias y 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 de eventos multimedia y comandos, se manejan con el RemotePlayerController

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

El RemotePlayerController le da a la app el control total del contenido multimedia de Haz clic en REPRODUCIR, PAUSAR, DETENER y BUSCAR el contenido multimedia cargado.

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

RemotePlayer y RemotePlayerController pueden ser que se usan con frameworks de vinculación de datos, como Polymer o Angular, para implementar un reproductor remoto.

Este es un fragmento de código de 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, ocurren varios eventos que se pueden capturar al configurar de escucha para varios cast.framework.RemotePlayerEventType eventos en la objeto RemotePlayerController.

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

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 produzcan eventos como pausar, reproducir, reanudar o buscar, la app deberá actuar y se sincronizarán entre ella y la app del receptor web en la transmisión. dispositivo. Consulta las 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 sesión de transmisión, el establecimiento principal que combina los pasos para conectarse a un dispositivo, iniciar (o unirse) a una Web App receptora, conectándose a esa app e inicializando un canal de control multimedia. Ver el receptor web Guía del ciclo de vida de la aplicación para obtener más información sobre las sesiones de transmisión y el ciclo de vida del receptor web.

La clase administra las sesiones CastContext: que la app puede recuperar a través de cast.framework.CastContext.getInstance() Las sesiones individuales se representan mediante subclases de la clase Session Por ejemplo: CastSession representa sesiones con dispositivos de transmisión. Tu app puede acceder a la API activa Sesión de transmisión con CastContext.getCurrentSession()

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

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, como cuando el usuario hace clic en el botón "detener transmisión" botón de en el cuadro de diálogo Cast, puedes agregar un objeto de escucha RemotePlayerEventType.IS_CONNECTED_CHANGED tipo de evento en tu objeto de escucha. En tu objeto de escucha, comprueba si RemotePlayer es 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
    }
  });

Aunque el usuario puede controlar directamente la finalización de la transmisión a través de la transmisión del framework , el mismo emisor puede dejar de transmitir con el 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

Preservar el estado de la sesión es la base de la transferencia de transmisión, en la que los usuarios pueden transferir transmisiones de audio y video existentes entre dispositivos mediante comandos por voz, Google Home una app o una pantalla inteligente. El contenido multimedia deja de reproducirse en un dispositivo (la fuente) y continúa en otro (el destino). Cualquier dispositivo de transmisión con el firmware más reciente puede funcionar como fuente o destino en un de transmisión continua.

Para obtener el nuevo dispositivo de destino durante la transferencia de la transmisión, llama CastSession#getCastDevice() cuando el 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