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
Promessa
que pode ser usada 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.