Integrar o SDK do Cast ao app de transmissão da Web

Este guia para desenvolvedores descreve como adicionar compatibilidade com o Google Cast à sua Web App do remetente usando o SDK do Cast.

Terminologia

O dispositivo móvel ou navegador é o remetente, que controla a reprodução. O dispositivo com Google Cast é o receptor, que exibe o conteúdo da tela para reprodução.

O SDK do Web Sender consiste em duas partes: a API Framework (cast.framework) e a API Base (chrome.cast) Em geral, você faz chamadas na API Framework mais simples e de nível superior, que são processadas pela API de nível inferior.

O framework do remetente se refere à API Framework, ao módulo e à recursos que oferecem um wrapper para a funcionalidade de nível inferior. A app remetente ou app Google Cast para Chrome refere-se a um app da Web (HTML/JavaScript) em um navegador Chrome em um dispositivo remetente. Um app receptor da Web se refere em um app HTML/JavaScript executado no Chromecast ou em um dispositivo com Google Cast.

O framework do remetente usa um design de callback assíncrono para informar o remetente de eventos e fazer a transição entre os vários estados da vida útil do app Cast ciclo.

Carregar a biblioteca

Para que seu app implemente os recursos do Google Cast, ele precisa conhecer local do SDK do remetente da Web do Google Cast, conforme mostrado abaixo. Adicione o método Parâmetro de consulta do URL loadCastFramework para carregar a API Web Sender Framework . Todas as páginas do app precisam se referir à biblioteca da seguinte maneira:

<script src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>

Framework

O SDK do Web Sender usa a classe cast.framework.* . O namespace representa o seguinte:

  • Métodos ou funções que invocam operações na API
  • Listeners de eventos para funções de listener na API

O framework consiste nestes componentes principais:

  • O CastContext é um objeto singleton que fornece informações sobre a estado atual do Cast e aciona eventos para esse estado e para a sessão de transmissão as mudanças de estado.
  • O CastSession gerencia a sessão, fornecendo estados e aciona eventos, como alterações no volume do dispositivo, estado silenciado e metadados do app.
  • O elemento do botão Transmitir, que é um elemento personalizado HTML simples que estende o botão HTML. Se o botão Transmitir fornecido não for suficiente, é possível usar o estado Transmitir para implementar um botão Transmitir.
  • O RemotePlayerController fornece a vinculação de dados para simplificar a implementação do player remoto.

Analise o Referência da API Google Cast Web Sender para uma descrição completa do namespace.

Botão "Transmitir"

O componente do botão Transmitir no app é processado inteiramente pelo framework. Isso inclui o gerenciamento de visibilidade, bem como a manipulação dos eventos de clique.

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

Como alternativa, você pode criar o botão de forma programática:

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

Você pode aplicar qualquer estilo adicional, como tamanho ou posicionamento, ao conforme necessário. Use o atributo --connected-color para escolher a cor para o estado do receptor da Web conectado e --disconnected-color para o estado desconectado.

Inicialização

Depois de carregar a API do framework, o app chamará o gerenciador window.__onGCastApiAvailable: Você deve garantir que o aplicativo defina esse gerenciador no window antes de carregar a biblioteca do remetente.

Nesse gerenciador, você inicializa a interação do Google Cast chamando o método setOptions(options) método de CastContext

Exemplo:

<script>
window['__onGCastApiAvailable'] = function(isAvailable) {
  if (isAvailable) {
    initializeCastApi();
  }
};
</script>

Em seguida, inicialize a API da seguinte maneira:

initializeCastApi = function() {
  cast.framework.CastContext.getInstance().setOptions({
    receiverApplicationId: applicationId,
    autoJoinPolicy: chrome.cast.AutoJoinPolicy.ORIGIN_SCOPED
  });
};

Primeiro, o app recupera a instância singleton do Objeto CastContext fornecidos pela estrutura. Em seguida, ele usa setOptions(options) usando um Objeto CastOptions para definir a applicationID.

Se você estiver usando o receptor de mídia padrão, que não requer registro, você usa uma constante predefinida pelo SDK do Web Sender, conforme mostrado abaixo, em vez de o applicationID:

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

Controle de mídia

Depois que o CastContext foi inicializado, o aplicativo pode recuperar o objeto CastSession a qualquer tempo usando getCurrentSession().

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

O CastSession pode ser usado para carregar mídia ao dispositivo de transmissão conectado usando loadMedia(loadRequest). Primeiro, crie um MediaInfo, usando contentId e contentType, além de qualquer outra informação relacionadas ao conteúdo. Em seguida, crie um LoadRequest definindo todas as informações relevantes para a solicitação. Por fim, chame loadMedia(loadRequest) no seu 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); });

O método loadMedia vai retornar uma Promise que podem ser usadas para executar as operações necessárias para um resultado bem-sucedido. Se a promessa for rejeitada, o argumento da função será um chrome.cast.ErrorCode

É possível acessar as variáveis de estado do player em RemotePlayer Todas as interações com o RemotePlayer, incluindo callbacks de eventos de mídia e são processados com o RemotePlayerController.

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

A RemotePlayerController dá ao app controle de mídia total sobre REPRODUZIR, PAUSAR, PARE e PROCURE pela mídia carregada.

  • REPRODUZIR/PAUSAR: playerController.playOrPause();
  • PARAR: playerController.stop();
  • PROCURAR: playerController.seek();

RemotePlayer e RemotePlayerController podem ser usada com estruturas de vinculação de dados, como Polymer ou Angular, para implementar uma player remoto.

Este é um snippet de código para o 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>

Status da mídia

Durante a reprodução de mídia, ocorrem vários eventos que podem ser capturados pela configuração ouvintes para diversas cast.framework.RemotePlayerEventType eventos no RemotePlayerController.

Para obter as informações de status de mídia, use o cast.framework.RemotePlayerEventType.MEDIA_INFO_CHANGED , que é acionado quando a reprodução é alterada e quando o CastSession.getMediaSession().media mudanças.

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

Quando ocorrerem eventos como pausa, reprodução, retomada ou busca, o aplicativo precisará agir e fazem a sincronização entre ele e o app receptor da Web na rede dispositivo. Consulte as atualizações de status. para mais informações.

Como funciona o gerenciamento de sessões

O SDK do Cast apresenta o conceito de uma sessão do Google Cast, a que combina as etapas de conexão a um dispositivo, inicialização (ou entrada) de um App receptor, conectando-se a ele e inicializando um canal de controle de mídia. Consulte o receptor da Web Guia do ciclo de vida do aplicativo para mais informações sobre as sessões de transmissão e o ciclo de vida do receptor da Web.

As sessões são gerenciadas pela turma CastContext, que seu aplicativo pode recuperar por meio de cast.framework.CastContext.getInstance() As sessões individuais são representadas por subclasses da classe Session Por exemplo: CastSession representa sessões com dispositivos de transmissão. Seu app pode acessar o público-alvo ativo no momento Transmitir sessão via CastContext.getCurrentSession()

Para monitorar o estado da sessão, adicione um listener CastContext para as Tipo de evento 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 desconexão, como quando o usuário clica no botão "Parar transmissão" botão de a caixa de diálogo "Transmitir", adicione um listener para o RemotePlayerEventType.IS_CONNECTED_CHANGED tipo de evento no seu listener. No seu listener, verifique se RemotePlayer é desconectado. Se for o caso, atualize o estado do player local conforme necessário. Exemplo:

playerController.addEventListener(
  cast.framework.RemotePlayerEventType.IS_CONNECTED_CHANGED, function() {
    if (!player.isConnected) {
      console.log('RemotePlayerController: Player disconnected');
      // Update local player to disconnected state
    }
  });

Embora o usuário possa controlar diretamente o encerramento do Google Cast pelo framework do Cast o próprio remetente poderá interromper a transmissão usando o CastSession objeto.

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

Transferência de stream

A preservação do estado da sessão é a base da transferência de stream, em que Os usuários podem mover streams de áudio e vídeo entre dispositivos usando comandos de voz, o Google Home no app ou em smart displays. A mídia é interrompida em um dispositivo (a fonte) e continua em outro (a destino). Qualquer dispositivo de transmissão com o firmware mais recente pode servir como origem ou destino em um transferência de stream.

Para receber o novo dispositivo de destino durante a transferência por stream, chame CastSession#getCastDevice() quando cast.framework.SessionState.SESSION_RESUMED é chamado.

Consulte Transferência de stream no receptor da Web para mais informações.

Anterior
Configuração
Próxima
Adicionar recursos avançados