Adicionar recursos avançados ao app de remetente da Web

Intervalos de anúncio

O SDK do Web Sender oferece suporte a 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 destinatário, é recomendável que eles sejam especificados no Web Receiver e no Android TV Receiver para manter um comportamento consistente em todas as plataformas.

Na Web, especifique 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) ou um objeto de stream de áudio ou vídeo. As APIs Tracks permitem que você trabalhe com esses objetos no aplicativo.

Um objeto Track representa uma faixa no SDK. É possível configurar uma faixa e atribuir um ID exclusivo a ela da seguinte maneira:

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;

Você pode definir as faixas ativas na solicitação activeTrackIds de mídia.

Também é possível ativar uma ou mais faixas associadas ao item de mídia após o carregamento da mídia chamando EditTracksInfoRequest(opt_activeTrackIds, opt_textTrackStyle) e transmitindo os IDs das faixas a serem ativadas em opt_activeTrackIds. Os dois parâmetros são opcionais, e você pode escolher quais faixas ou estilos ativos definir. Por exemplo, veja como ativar o subtítulo 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), siga um destes procedimentos:

  • Atualize o var activeTrackIds = [2, 3]; (mostrado anteriormente) para que inclua somente a faixa de áudio [3].
  • Defina mediaInfo.tracks=null. Não é necessário recarregar a mídia para desativar as legendas de texto (track.hidden). Enviar uma matriz activeTracksId que não contém um trackId ativado 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 já existente, você pode 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 bem-sucedido ou com erro, e atualizar o remetente de origem de acordo.

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

Você pode estilizar os seguintes elementos de estilo da 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 forma:

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

Controle do volume

Você pode usar 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 app remetente precisa ser sincronizado com o destinatário para que a interface do remetente sempre informe o volume. Use os callbacks 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 de 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 como o volume da campainha/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 destinatário

O Media Messages pode ser enviado do remetente ao receptor. 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 destinatário, é importante que cada um esteja ciente das alterações no destinatário, mesmo que elas tenham sido iniciadas por outros remetentes.

Para isso, o 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 receptor não verifica se o novo estilo é diferente do anterior e notifica todos os remetentes conectados.

Indicador de progresso

Mostrar o local da reprodução com um indicador de progresso no remetente é um requisito para a maioria dos apps. As APIs do Google Cast usam o protocolo de mídia do Google Cast, que otimiza o consumo de largura de banda para este e outros cenários. Portanto, você não precisa implementar sua própria sincronização de status. Para implementar corretamente um indicador de progresso para reprodução de mídia usando as APIs, consulte o app de exemplo CastVídeos-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 incluem faixas. Se você quiser ativar as faixas para qualquer mídia, precisará ativar o CORS para os streams de faixas 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 vai 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 outros cabeçalhos que talvez você não tenha usado antes.

Não é possível usar o caractere 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 atualizar a página da Web

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

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

A abordagem recomendada é:

  1. Chame loadMedia() para iniciar a sessão.
  2. Armazenar o sessionId localmente
  3. Volte à 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 podem ser adicionados ao app Web Sender. Agora é possível criar um app remetente para outra plataforma (Android ou iOS) ou criar um app receptor.