Google Cast para Chrome no Android

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

A versão mais recente do Chrome no Android permite que os sites façam apresentações em dispositivos com Google Cast usando o SDK do Cast Web. Isso significa que agora é possível criar apps de transmissão do Cast usando o SDK da Web com o Chrome no Android ou iOS (ou em computadores com a extensão), além de criar apps que usam o SDK do Cast nativo para Android e iOS. Anteriormente, um app de transmissão do Google Cast precisava da extensão do Chrome para o Google Cast. Por isso, no Android só era possível interagir com dispositivos de transmissão a partir de apps nativos.

Veja abaixo uma breve introdução à criação de um app de transmissão do Google Cast usando o SDK da Web. Veja informações mais abrangentes no Guia de desenvolvimento do aplicativo Chrome Sender.

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

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

Adicione um callback para lidar com a disponibilidade da API e inicializar a sessão do Google Cast. Adicione o gerenciador antes do carregamento da 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);
}

Se estiver usando o aplicativo Receptor de mídia estilizado padrão e não um aplicativo Receptor personalizado registrado, você poderá criar um SessionRequest como este:

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 de transmissão quando o usuário clicar nesse ícone, conforme exigido pelas diretrizes de experiência do usuário:

chrome.cast.requestSession(onRequestSessionSuccess,
    onRequestSessionError);

function onRequestSessionSuccess(e) {
  session = e;
}

O usuário verá um seletor de dispositivo:

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

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

Caixa de diálogo &quot;Transmitir detalhes da rota&quot;.

Após criar uma sessão de transmissão, é possível 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 durante a reprodução de mídia:

Transmitir notificação de reprodução/pausa.

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

Transmitir notificação de interrupção.

O callback sessionListener para chrome.cast.ApiConfig() (veja acima) permite que seu app participe ou gerencie uma sessão de transmissão existente:

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 no seu, use o atributo disableRemotePlayback, disponível no Chrome 49 e superior:

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

Dispositivos receptores e remetentes alternativos

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

No momento, só é possível apresentar um aplicativo receptor do Google Cast usando o SDK da Web do Google Cast. No entanto, ainda há trabalho em andamento para permitir que a API Apresentação seja usada sem o SDK do Google Cast (em computadores e Android) para apresentar qualquer página da Web a um dispositivo de transmissão 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 Apresentação, junto com a API Remote Playback, faz parte do esforço do Grupo de trabalho da segunda tela para permitir que as páginas da Web usem segundas telas para exibir conteúdo da Web.

Essas APIs aproveitam a variedade de dispositivos que ficam on-line, incluindo telas conectadas que executam um user agent, para ativar uma grande variedade de aplicativos com um dispositivo de "controle" e um dispositivo de "tela".

Manteremos você informado sobre o progresso da implementação.

Enquanto isso, entre em contato se você encontrar bugs ou precisar solicitar recursos: crbug.com/new.

Saiba mais