O Google usa tecnologia de IA na tradução de conteúdos para seu idioma de preferência. As traduções com IA podem ter erros.

Adicionar recursos avançados ao app de remetente da Web

Intervalos de anúncio

O SDK do Web Sender é compatível com intervalos de anúncio e anúncios complementares em um determinado stream de mídia.

Consulte a Visão geral dos intervalos de anúncio do receptor da Web para mais informações sobre como os intervalos de anúncio funcionam.

Embora os intervalos possam ser especificados no remetente e no receptor, é recomendável que eles sejam especificados no receptor da Web e no receptor do Android TV 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 ou legenda descritiva) ou um objeto de stream de áudio ou vídeo. As APIs Tracks permitem que você trabalhe com esses objetos no seu aplicativo.

Um objeto Track representa uma faixa no SDK. É possível 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 streams 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.

Também é possível ativar uma ou mais faixas associadas ao item de mídia, depois que a mídia for carregada, chamando EditTracksInfoRequest(opt_activeTrackIds, opt_textTrackStyle) e transmitindo os IDs das faixas a serem ativadas em opt_activeTrackIds. Observação, os dois parâmetros são opcionais, e você pode escolher quais faixas de monitoramento de atividade ou estilos ativos definir, conforme achar melhor. 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, desativar legendas), siga um destes procedimentos:

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

Como definir o estilo das 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, é possível aplicá-lo ao item de mídia em reprodução chamando o método editTrackInfo, desta forma:

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 sucesso ou erro, e atualizar o remetente de origem de acordo.

Os aplicativos precisam permitir que os usuários atualizem o estilo das faixas de texto, seja 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
Escala 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

Use 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 volume em um nível específico e predefinido nem definir o volume do toque/mídia do dispositivo remetente quando o app é carregado no receptor.

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

Como enviar mensagens de mídia para o receptor

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

// 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.

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 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 de 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 as faixas para qualquer mídia, ative 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 fazer streaming da mídia, a menos que você atualize o servidor para incluir os cabeçalhos CORS apropriados.

Você precisa dos seguintes cabeçalhos: Content-Type,Accept-Encoding e Range. Os dois últimos cabeçalhos, Accept-Encoding e Range, são cabeçalhos adicionais que talvez você não tenha precisado anteriormente.

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

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

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

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
Volte para a 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

Isso conclui os recursos que você pode adicionar ao seu app Web remetente. Agora, você pode criar um app remetente para outra plataforma (Android ou iOS) ou criar um app receptor.

Integrar transmissão