Imagem secundária

Os desenvolvedores do Google Cast podem adicionar uma imagem informativa (secundária) à IU para aplicativos de áudio e vídeo. Veja os formatos de imagem compatíveis para verificar a compatibilidade.

A imagem secundária aparece no canto superior direito da tela e pode ser usada para mostrar um gráfico com mais informações sobre o conteúdo em reprodução, como o formato do conteúdo, o sinal de chamada da estação de rádio ou a classificação do programa de TV. A imagem secundária persiste na tela desde que o recurso esteja ativado para o conteúdo atual e o player não esteja em estado inativo.

A Tabela 1 mostra a experiência de um usuário quando o recurso é ativado nos tipos e controles de dispositivos aplicáveis. Os detalhes da implementação e da integração são um pouco diferentes entre os apps de áudio e vídeo. Consulte as seções abaixo para integrar esse recurso ao app receptor da Web.

Tabela 1: IU de imagem secundária por conteúdo e tipo de dispositivo

Tipo de dispositivo	Conteúdo de áudio	Conteúdo em vídeo
Chromecast
Chromecast com Google TV
Smart display
Controle remoto do smart display		Observação: imagens secundárias não são compatíveis com controles remotos para conteúdo de vídeo.

Áudio

Informações gerais

A imagem secundária do conteúdo de áudio é impulsionada pelos metadados do conteúdo carregado. Depois que o item de mídia for carregado, todas as mudanças subsequentes na propriedade secondaryImage dos metadados vão ser refletidas na interface.

Se um smart display for usado como controle remoto para áudio, a imagem secundária também vai aparecer na interface do smart display quando definida.

Observação: recomendamos que os desenvolvedores do Google Cast usem a interface de áudio padrão fornecida pelo elemento <cast-media-player> do receptor da Web. Usar a interface padrão proporciona uma experiência do usuário consistente no Chromecast, em smart displays e no Chromecast com Google TV, com sobrecarga mínima. O recurso de imagem secundária não é compatível com apps que usam interface personalizada. Isso não se aplica a controles remotos, porque eles sempre exibem a imagem secundária quando definidos.

Implementação

Para definir, remover ou atualizar a imagem secundária, a propriedade secondaryImage de MusicTrackMediaMetadata precisa ser modificada. A propriedade usa um objeto Image preenchido com o URL que descreve onde a imagem secundária está hospedada.

No exemplo abaixo, a imagem secundária é definida no interceptador load. Quando o player termina de carregar o conteúdo, a imagem secundária é exibida.

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();
playerManager.setMessageInterceptor(
    cast.framework.messages.MessageType.LOAD, loadRequestData => {
      loadRequestData.media.metadata =
          new cast.framework.messages.MusicTrackMediaMetadata();

      // Set image on secondaryImage field of metadata object
      loadRequestData.media.metadata.secondaryImage =
          new cast.framework.messages.Image('https://www.image.png');

      return loadRequestData;
    });

Para atualizar a imagem secundária durante a reprodução, o aplicativo precisa usar PlayerManager para receber o MediaInformation chamando getMediaInformation. O aplicativo precisa modificar o metadata atualizando a propriedade secondaryImage para o valor desejado. Por fim, chamar setMediaInformation com as novas informações atualiza a IU. Esse método pode ser usado para processar mudanças nos metadados fornecidos por atualizações como eventos EMSG ou ID3 durante a reprodução.

const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();
playerManager.addEventListener(cast.framework.events.EventType.EMSG, () => {
  let mediaInformation = playerManager.getMediaInformation();
  mediaInformation.metadata.secondaryImage =
      new cast.framework.messages.Image('http://anotherimage.png');
  playerManager.setMediaInformation(mediaInformation);
});

Para cancelar a definição da imagem secundária, defina a propriedade secondaryImage como nula no objeto de metadados.

// To unset the secondary image, set secondaryImage to null.
let mediaInformation = playerManager.getMediaInformation();
mediaInformation.metadata.secondaryImage = null;
playerManager.setMediaInformation(mediaInformation);

Video

Informações gerais

Para conteúdo em vídeo, a imagem secundária é definida e removida usando UiManager. A imagem secundária é mostrada com a sobreposição de controles de vídeo.

Implementação

Para definir a imagem secundária, o aplicativo precisa receber uma instância de UiManager e chamar setSecondaryImage. Ele usa dois parâmetros: o SecondaryImagePosition e o URL da imagem. A definição da imagem secundária pode ser feita a qualquer momento, mas só será exibida quando um usuário acionar a sobreposição para primeiro plano.

/**
 * Sets the image url for the secondary image overlay. Replaces any image that
 * was previously set.
 */
castUiManager.setSecondaryImage(
    cast.framework.ui.SecondaryImagePosition.TOP_RIGHT_VIDEO_OVERLAY,
    'http://www.image.png');

Para remover a imagem secundária, defina o URL da imagem como null ou uma string vazia.

// To  clear out the image, set the url to null or an empty string.
const castUiManager = cast.framework.ui.UiManager.getInstance();
castUiManager.setSecondaryImage(
    cast.framework.ui.SecondaryImagePosition.TOP_RIGHT_VIDEO_OVERLAY, null);

Próximas etapas

Chegamos ao fim dos recursos que você pode adicionar ao Web Receiver. Agora é possível criar um app remetente no iOS, Android ou Web.