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
Promesa
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();
Los operadores 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
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 tu 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.