Google Cast para Chrome no Android

Imagine usar um app da Web no smartphone para apresentar uma apresentação de slides em um projetor de conferência, compartilhar imagens, jogar ou assistir vídeos em uma tela de TV usando o app da Web para dispositivos móveis como um controle.

A versão mais recente do Chrome para Android permite que os sites apresentem em dispositivos do Google Cast usando o SDK para Cast Web. Isso significa que agora você pode criar apps de envio do Google Cast usando o SDK da Web com o Chrome no Android ou iOS (ou no computador com a extensão) e apps que usam o SDK nativo do Cast para Android e iOS. Antes, um aplicativo remetente do Google Cast precisava da extensão do Google Cast para o Chrome. Por isso, no Android, só era possível interagir com dispositivos do Cast usando apps nativos.

Confira abaixo uma breve introdução sobre como criar um app remetente do Cast usando o SDK da Web. Confira informações mais completas no Guia de desenvolvimento do app Chrome Sender.

Todas as páginas que usam o Google Cast precisam incluir a biblioteca Cast:

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

Adicione um callback para processar a disponibilidade da API e inicializar a sessão do Cast. Adicione o gerenciador antes que a API seja carregada:

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);
}

Se você estiver usando o aplicativo padrão Styled Media Receiver e não um aplicativo Custom Receiver registrado, crie um SessionRequest assim:

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

O callback receiverListener acima é executado quando um ou mais dispositivos ficam disponíveis:

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

Inicie uma sessão do Google Cast quando o usuário clicar no ícone do Google Cast, conforme exigido pelas diretrizes de experiência do usuário:

chrome.cast.requestSession(onRequestSessionSuccess,
    onRequestSessionError);

function onRequestSessionSuccess(e) {
  session = e;
}

O usuário vai receber um seletor de dispositivos:

Caixa de diálogo de seleção de dispositivo do Google Cast.

A caixa de diálogo route details é mostrada quando a página já está conectada e chama requestSession():

Caixa de diálogo de detalhes do trajeto do Google Assistente.

Depois de ter uma sessão do Google Cast, você pode carregar mídia para o dispositivo de transmissão selecionado e adicionar um listener para eventos de reprodução de mídia:

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);
}

A variável currentMedia aqui é um objeto chrome.cast.media.Media, que pode ser usado para controlar a reprodução:

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


    // ...

Uma notificação de reprodução/pausa é mostrada quando a mídia está sendo reproduzida:

Notificação de reprodução/pausa do Google Cast.

Se nenhuma mídia estiver sendo reproduzida, a notificação terá apenas um botão de parada para interromper a transmissão:

Notificação de interrupção do Google Cast.

O callback sessionListener para chrome.cast.ApiConfig() (consulte acima) permite que seu app participe ou gerencie uma sessão do Google Cast:

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

Se o Chrome no Android permitir a transmissão de mídia do seu site, mas você quiser desativar esse recurso para que a interface de transmissão padrão não interfira na sua, use o atributo disableRemotePlayback, disponível no Chrome 49 e versões mais recentes:

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

Dispositivos de envio e recebimento alternativos

O guia do SDK do Cast para Web tem links para apps de exemplo e informações sobre recursos do Cast, como gerenciamento de sessões, faixas de texto (para legendas e outros tipos de texto) e atualizações de status.

No momento, só é possível apresentar a um aplicativo receptor do Google Cast usando o SDK da Web do Cast. No entanto, estamos trabalhando para permitir que a API Presentation seja usada sem o SDK do Cast (no computador e no Android) para apresentar qualquer página da Web a um dispositivo do Cast sem registro no Google. Ao contrário do SDK do Cast exclusivo para Chrome, o uso da API padrão permite que a página funcione com outros user agents e dispositivos compatíveis com a API.

A API Presentation, junto com a API Remote Playback, faz parte do esforço do Second Screen Working Group para permitir que as páginas da Web usem segundas telas para exibir conteúdo da Web.

Essas APIs aproveitam a variedade de dispositivos conectados à Internet, incluindo telas conectadas que executam um agente do usuário, para permitir uma variedade de aplicativos com um dispositivo de "controle" e um dispositivo de "exibição".

Vamos manter você informado sobre o progresso da implementação.

Enquanto isso, informe se você encontrar bugs ou tiver solicitações de recursos: crbug.com/new.

Saiba mais