Imagina poder usar una app web desde tu teléfono para presentar una presentación de diapositivas en un proyector de conferencias, o compartir imágenes, jugar o mirar videos en una pantalla de TV usando la app web móvil como controlador.
La versión más reciente de Chrome para Android permite que los sitios presenten contenido en dispositivos con Google Cast a través del SDK de la Web de Cast. Esto significa que ahora puedes crear apps de transmisión de Cast con el SDK web con Chrome en Android o iOS (o en computadoras de escritorio con la extensión), así como crear apps que usen el SDK nativo de Cast para Android y iOS. (Anteriormente, una aplicación de envío de Google Cast necesitaba la extensión de Chrome de Google Cast, por lo que en Android solo era posible interactuar con dispositivos Cast desde apps nativas).
A continuación, se incluye una breve introducción para compilar una app de transmisión de Cast con el SDK web. Puedes obtener información más detallada en la Guía de desarrollo de apps 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 y, luego, inicializa la sesión de Cast (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 predeterminada Styled Media Receiver y no una aplicación Custom Receiver registrada y personalizada, puedes crear un SessionRequest de la siguiente manera:
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 Cast cuando el usuario haga clic en el ícono de Cast, según lo exigen los Lineamientos de Experiencia del Usuario:
chrome.cast.requestSession(onRequestSessionSuccess,
onRequestSessionError);
function onRequestSessionSuccess(e) {
session = e;
}
Se le presentará al usuario un selector de dispositivos:
El diálogo route details se muestra cuando la página ya está conectada y llama a requestSession():
Una vez que tengas una sesión de Cast, podrás cargar contenido multimedia para el dispositivo Cast 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);
}
La variable currentMedia aquí 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:
Si no se está reproduciendo contenido multimedia, la notificación solo tiene un botón de detención para detener la transmisión:
La devolución de llamada sessionListener para chrome.cast.ApiConfig() (consulta más arriba) permite que tu app se una a una sesión de Cast existente o la administre:
function sessionListener(e) {
session = e;
if (session.media.length !== 0) {
onMediaDiscovered('onRequestSessionSuccess', session.media[0]);
}
}
Si Chrome para 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>
La guía del SDK web de Cast incluye vínculos a apps de ejemplo y a información sobre las funciones de Cast, como la administración de sesiones, las pistas de texto (para subtítulos y leyendas) y las actualizaciones de estado.
Actualmente, solo puedes presentar contenido a una aplicación receptora de Cast con el SDK web de Cast, pero se está trabajando para habilitar la API de Presentation para que se use sin el SDK de Cast (en computadoras de escritorio y Android) y presentar cualquier página web a un dispositivo de Cast sin registrarse en Google. A diferencia del SDK de Cast solo para Chrome, usar la API estándar permitirá que la página funcione con otros agentes de usuario y dispositivos que admitan la API.
La API de Presentation, junto con la API de Remote Playback, forma parte del esfuerzo del Second Screen Working Group para permitir que las páginas web usen pantallas secundarias para mostrar contenido web.
Estas APIs aprovechan la variedad de dispositivos que se conectan a Internet (incluidas las pantallas conectadas que ejecutan un usuario-agente) para habilitar una gran variedad de aplicaciones con un dispositivo de "control" y un dispositivo de "visualización".
Te mantendremos al tanto del progreso de la implementación.
Mientras tanto, avísanos si encuentras errores o tienes solicitudes de funciones: crbug.com/new.