Esta página foi traduzida pela API Cloud Translation.

Adicionar recursos avançados ao app de remetente da Web

Intervalos de anúncio

O SDK do remetente da Web oferece suporte a intervalos de publicidade e anúncios complementares em um determinado fluxo de mídia.

Consulte a Visão geral dos intervalos de anúncios do Web Receiver para mais informações sobre como eles funcionam.

Embora as interrupções possam ser especificadas no remetente e no receptor, é recomendável que elas sejam especificadas no Web Receiver e no Android TV Receiver para manter um comportamento consistente em todas as plataformas.

Na Web, especifique os intervalos de anúncio em um comando de carregamento usando BreakClip e Break:

let breakClip1 = new BreakClip('bc0');
breakClip1.title = 'Clip title'
breakClip1.posterUrl = 'https://www.some.url';
breakClip1.duration = 60;
breakClip.whenSKippable = 5;

let breakClip2 = ...
let breakClip3 = ...

let break1 = new Break('b0', ['bc0', 'bc1', 'bc2'], 10);

let mediaInfo = new chrome.cast.media.MediaInfo(<contentId>, '<contentType');
...
mediaInfo.breakClips = [breakClip1, breakClip2, breakClip3];
mediaInfo.breaks = [break1];

let request = new chrome.cast.media.LoadRequest(mediaInfo);

cast.framework.CastContext.getInstance().getCurrentSession().loadMedia(request)

Como usar as APIs de faixas

Uma faixa pode ser um objeto de texto (legenda descritiva ou legendas) ou um objeto de stream de áudio ou vídeo. Com as APIs Tracks, você pode trabalhar com esses objetos no seu aplicativo.

Um objeto Track representa uma faixa no SDK. Você pode configurar uma faixa e atribuir um ID exclusivo a ela desta forma:

var englishSubtitle = new chrome.cast.media.Track(1, // track ID
  chrome.cast.media.TrackType.TEXT);
englishSubtitle.trackContentId = 'https://some-url/caption_en.vtt';
englishSubtitle.trackContentType = 'text/vtt';
englishSubtitle.subtype = chrome.cast.media.TextTrackType.SUBTITLES;
englishSubtitle.name = 'English Subtitles';
englishSubtitle.language = 'en-US';
englishSubtitle.customData = null;

var frenchSubtitle = new chrome.cast.media.Track(2, // track ID
  chrome.cast.media.TrackType.TEXT);
frenchSubtitle.trackContentId = 'https://some-url/caption_fr.vtt';
frenchSubtitle.trackContentType = 'text/vtt';
frenchSubtitle.subtype = chrome.cast.media.TextTrackType.SUBTITLES;
frenchSubtitle.name = 'French Subtitles';
frenchSubtitle.language = 'fr';
frenchSubtitle.customData = null;

var frenchAudio = new chrome.cast.media.Track(3, // track ID
  chrome.cast.media.TrackType.AUDIO);
frenchAudio.trackContentId = 'trk0001';
frenchAudio.trackContentType = 'audio/mp3';
frenchAudio.subtype = null;
frenchAudio.name = 'French Audio';
frenchAudio.language = 'fr';
frenchAudio.customData = null;

Um item de mídia pode ter várias faixas. Por exemplo, ele pode ter várias legendas (cada uma para um idioma diferente) ou vários fluxos de áudio alternativos (para idiomas diferentes).

MediaInfo é a classe que modela um item de mídia. Para associar uma coleção de objetos Track a um item de mídia, atualize a propriedade tracks dele. Essa associação precisa ser feita antes que a mídia seja carregada no receptor:

var tracks = [englishSubtitle, frenchSubtitle, frenchAudio];
var mediaInfo = new chrome.cast.media.MediaInfo(mediaURL);
mediaInfo.contentType = 'video/mp4';
mediaInfo.metadata = new chrome.cast.media.GenericMediaMetadata();
mediaInfo.customData = null;
mediaInfo.streamType = chrome.cast.media.StreamType.BUFFERED;
mediaInfo.textTrackStyle = new chrome.cast.media.TextTrackStyle();
mediaInfo.duration = null;
mediaInfo.tracks = tracks;

É possível definir as faixas ativas na solicitação de mídia activeTrackIds.

Você também pode ativar uma ou mais faixas associadas ao item de mídia depois que a mídia for carregada. Para isso, chame EditTracksInfoRequest(opt_activeTrackIds, opt_textTrackStyle) e transmita os IDs das faixas a serem ativadas em opt_activeTrackIds. Os dois parâmetros são opcionais, e você pode escolher quais deles (faixas ou estilos ativos) definir a seu critério. Por exemplo, veja como ativar a legenda em francês (2) e o áudio em francês (3):

var activeTrackIds = [2, 3];
var tracksInfoRequest = new chrome.cast.media.EditTracksInfoRequest(activeTrackIds);
media.editTracksInfo(tracksInfoRequest, successCallback, errorCallback);

Para remover todas as faixas de áudio ou vídeo da mídia atual, basta definir mediaInfo.tracks=null (uma matriz vazia) e recarregar a mídia.

Para remover todas as faixas de texto da mídia atual (por exemplo, desativando legendas), faça o seguinte:

Atualize var activeTrackIds = [2, 3]; (mostrado anteriormente) para que ele inclua apenas [3], a faixa de áudio.
Defina mediaInfo.tracks=null. Não é necessário recarregar a mídia para desativar as legendas descritivas (track.hidden). Enviar uma matriz activeTracksId que não contenha uma trackId ativada anteriormente desativa a faixa de texto.

Como definir o estilo de faixas de texto

TextTrackStyle é o objeto que encapsula as informações de estilo de uma faixa de texto. Depois de criar ou atualizar um objeto TextTrackStyle, você pode aplicá-lo ao item de mídia em reprodução atual chamando o método editTrackInfo dele, assim:

var textTrackStyle = new chrome.cast.media.TextTrackStyle();
var tracksInfoRequest = new chrome.cast.media.EditTracksInfoRequest(textTrackStyle);
media.editTracksInfo(tracksInfoRequest, successCallback, errorCallback);

É possível acompanhar o status da solicitação com o resultado dos callbacks, seja de sucesso ou erro, e atualizar o remetente de origem de acordo com isso.

Os aplicativos precisam permitir que os usuários atualizem o estilo das faixas de texto usando as configurações fornecidas pelo sistema ou pelo próprio aplicativo.

É possível estilizar os seguintes elementos de estilo de faixa de texto:

Cor e opacidade do primeiro plano (texto)
Cor e opacidade de segundo plano
Tipo de borda
Cor da borda
Ajuste da fonte
Família de fontes
Estilo da fonte

Por exemplo, defina a cor do texto como vermelho com 75% de opacidade da seguinte maneira:

var textTrackStyle = new chrome.cast.media.TextTrackStyle();
textTrackStyle.foregroundColor = '#80FF0000';

Controle do volume

É possível usar os comandos RemotePlayer e RemotePlayerController para definir o volume do receptor.

function changeVolume(newVolume) {
  player.volumeLevel = newVolume;
  playerController.setVolumeLevel();
  // Update sender UI to reflect change
}

O app remetente precisa seguir estas diretrizes para controlar o volume:

O aplicativo remetente precisa ser sincronizado com o receptor para que a interface do remetente sempre informe o volume de acordo com o receptor. Use o callback RemotePlayerEventType.VOLUME_LEVEL_CHANGED e RemotePlayerEventType.IS_MUTED_CHANGED para manter o volume no remetente. Consulte Atualizações de status para mais informações.
Os apps remetentes não podem definir o nível de volume em um nível específico e predefinido nem definir o nível de volume para o volume de mídia/toque do dispositivo remetente quando o app é carregado no receptor.

Consulte Controles de volume do remetente na Lista de verificação de design.

Enviar mensagens de mídia para o destinatário

Media Messages pode ser enviado do remetente para o destinatário. Por exemplo, para enviar uma mensagem SKIP_AD ao destinatário:

// Get a handle to the skip button element
const skipButton = document.getElementById('skip');
skipButton.addEventListener("click", function() {
  if (castSession) {
    const media = castSession.getMediaSession();
    castSession.sendMessage('urn:x-cast:com.google.cast.media', {
      type: 'SKIP_AD',
      requestId: 1,
      mediaSessionId: media.mediaSessionId
    });
  }
});

atualizações de status

Quando vários remetentes estão conectados ao mesmo receptor, é importante que cada remetente esteja ciente das mudanças no receptor, mesmo que elas tenham sido iniciadas por outros remetentes.

Para isso, seu aplicativo precisa registrar todos os listeners necessários no RemotePlayerController. Se o TextTrackStyle da mídia atual mudar, todos os remetentes conectados serão notificados e as propriedades correspondentes da sessão de mídia atual, como activeTrackIds e textTrackStyle do campo MediaInfo serão enviadas aos remetentes em callbacks. Nesse caso, o SDK do receptor não verifica se o novo estilo é diferente do anterior e notifica todos os remetentes conectados, independente disso.

Indicador de progresso

Mostrar o local de reprodução com um indicador de progresso no remetente é um requisito para a maioria dos apps. As APIs do Cast usam o protocolo de mídia do Cast, que otimiza o consumo de largura de banda para esse e outros cenários. Assim, você não precisa implementar sua própria sincronização de status. Para a implementação adequada de um indicador de progresso para reprodução de mídia usando as APIs, consulte o app de exemplo CastVideos-chrome.

Requisitos do CORS

Para streaming de mídia adaptável, o Google Cast exige a presença de cabeçalhos CORS, mas até mesmo streams de mídia mp4 simples exigem CORS se incluírem faixas. Se você quiser ativar o Tracks para qualquer mídia, precisará ativar o CORS para os fluxos de faixa e de mídia. Portanto, se você não tiver cabeçalhos CORS disponíveis para sua mídia mp4 simples no servidor e adicionar uma faixa de legenda simples, não será possível transmitir a mídia, a menos que você atualize o servidor para incluir os cabeçalhos CORS adequados.

Você precisa dos seguintes cabeçalhos: Content-Type, Accept-Encoding e Range. Os dois últimos cabeçalhos, Accept-Encoding e Range, são adicionais e talvez não tenham sido necessários antes.

Não é possível usar caracteres curinga "*" no cabeçalho Access-Control-Allow-Origin. Se a página tiver conteúdo de mídia protegida, ela precisará usar um domínio em vez de um curinga.

Como retomar uma sessão sem recarregar a página da Web

Para retomar um CastSession, use requestSessionById(sessionId) com o sessionId da sessão a que você está tentando participar.

O sessionId pode ser encontrado no CastSession ativo usando getSessionId() depois de chamar loadMedia().

A abordagem recomendada é:

Chame loadMedia() para iniciar a sessão
Armazenar o sessionId localmente
Reingresse na sessão usando requestSessionById(sessionId) quando necessário

let sessionId;

function rejoinCastSession() {
  chrome.cast.requestSessionById(sessionId);

  // Add any business logic to load new content or only resume the session
}

document.getElementById('play-button').addEventListener(("click"), function() {
  if (sessionId == null) {
    let castSession = cast.framework.CastContext.getInstance().getCurrentSession();
    if (castSession) {
      let mediaInfo = createMediaInfo();
      let request = new chrome.cast.media.LoadRequest(mediaInfo);
      castSession.loadMedia(request)

      sessionId = CastSession.getSessionId();
    } else {
      console.log("Error: Attempting to play media without a Cast Session");
    }
  } else {
    rejoinCastSession();
  }
});

Próximas etapas

Assim, concluímos os recursos que podem ser adicionados ao seu app remetente da Web. Agora você pode criar um app remetente para outra plataforma (Android ou iOS) ou criar um app receptor.

Integrar transmissão