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 web Sender fornece suporte para intervalos de anúncio e anúncios complementares em um em um determinado fluxo de mídia.

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

Embora os intervalos possam ser especificados tanto para quem envia quanto para quem recebe, recomendamos que eles sejam especificado no Receptor da Web e Receptor do Android TV para manter a consistência do comportamento entre 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)

Usar as APIs de faixas

Uma faixa pode ser um objeto de texto (legenda ou legenda) ou um stream de áudio ou vídeo objeto. As APIs Tracks permitem que você trabalhe com esses objetos em seu aplicativo.

Um objeto Track representa uma faixa no SDK. É possível configurar uma faixa e atribuir um ID exclusivo da seguinte 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, pode ter várias legendas (cada um 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 Track objetos a um item de mídia, você atualiza seu tracks . Essa associação precisa ser feita antes que a mídia seja carregados 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 no activeTrackIds solicitação.

Você também pode ativar uma ou mais faixas associadas à mídia após o carregamento da mídia, chamando EditTracksInfoRequest(opt_activeTrackIds, opt_textTrackStyle) e transmitindo os IDs das faixas a serem ativadas no opt_activeTrackIds. Observação: ambos os parâmetros são opcionais, e você pode escolher quais faixas ou estilos ativos, para definir a seu critério. 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 recarregue a mídia.

Para remover todas as faixas de texto da mídia atual (por exemplo, desativar legendas), siga um destes procedimentos:

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

Definir o estilo de faixas de texto

TextTrackStyle é o objeto que encapsula as informações de estilo de uma faixa de texto. Depois criar ou atualizar um objeto TextTrackStyle, é possível aplicar isso ao o item de mídia em reprodução chamando editTrackInfo , da seguinte forma:

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

Você pode acompanhar o status da solicitação com o resultado dos callbacks. ou erro e atualizar o remetente de origem de acordo.

Os aplicativos devem 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.

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 maneira:

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

Controle do volume

Você pode usar o 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 de controle de volume:

O aplicativo remetente deve sincronizar com o destinatário para que a interface do remetente sempre informa o volume por receptor. Use o RemotePlayerEventType.VOLUME_LEVEL_CHANGED e RemotePlayerEventType.IS_MUTED_CHANGED para manter o volume no remetente. Consulte as atualizações de status. para mais informações.
Os apps de envio não podem definir o nível de volume em um nível específico e predefinido ou definir o nível de volume para o volume da campainha/mídia do dispositivo remetente quando que o app carrega 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

Media Messages podem ser enviadas pelo remetente para 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 que cada remetente esteja ciente das alterações no destinatário, mesmo que elas foram iniciadas por outros remetentes.

Para isso, seu aplicativo deve registrar todos os listeners necessários no RemotePlayerController Se o TextTrackStyle das alterações de mídia atuais, todos os remetentes conectados serão notificados e as propriedades correspondentes da sessão de mídia atual, como activeTrackIds e textTrackStyle do MediaInfo será enviado aos remetentes em chamadas de retorno. 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 da reprodução com um indicador de progresso no remetente é um requisito para a maioria dos aplicativos. As APIs Cast usam o protocolo Cast Media, que otimiza o consumo de largura de banda neste e em outros cenários. Assim, você não precisa precisa implementar sua própria sincronização de status. Para uma implementação adequada, indicador de progresso para reprodução de mídia usando as APIs, consulte a App de exemplo CastVídeos-chrome.

Requisitos do CORS

Para o streaming de mídia adaptável, o Google Cast exige a presença de cabeçalhos CORS, mas até mesmo fluxos de mídia mp4 simples exigirão CORS se incluírem faixas. Se você quiser ativar as trilhas para qualquer mídia, ative o CORS para a faixa streams e de mídia. Portanto, se você não tiver cabeçalhos CORS disponíveis para sua mídia mp4 simples no servidor. Depois, você adiciona um subtítulo não será possível transmitir a 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 recursos adicionais cabeçalhos que talvez você não precisasse anteriormente.

Caracteres curinga "*" não pode ser usada para o cabeçalho Access-Control-Allow-Origin. Se a página tiver conteúdo de mídia protegido, deverá usar um domínio em vez de um curinga.

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

Para retomar um CastSession existente, use requestSessionById(sessionId) pelo sessionId da sessão de que você quer participar.

O sessionId pode ser encontrado no CastSession ativo usando getSessionId() Após a ligação loadMedia().

A abordagem recomendada é:

Ligação 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 app Web Sender. Agora você pode criar um app remetente para outra plataforma (Android ou iOS) ou criar um app receptor.

Integrar transmissão