Imagem secundária

Os desenvolvedores de transmissão podem adicionar uma imagem informativa (secundária) à interface para áudio e aplicativos de vídeo. Confira os formatos de imagem para compatibilidade.

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

A Tabela 1 mostra a experiência de um usuário quando o recurso é ativada nos tipos e controles de dispositivo aplicáveis. Detalhes da implementação e a 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 seu app receptor da Web.

Tabela 1: interface 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: a imagem secundária não é compatível com controles remotos para conteúdo de vídeo.

Áudio

Visão geral

A imagem secundária do conteúdo de áudio é definida pelos metadados da imagem conteúdo. Depois que o item de mídia é carregado, quaisquer alterações subsequentes no arquivo de metadados secondaryImage são refletidas na interface.

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

Implementação

Para definir, remover ou atualizar a imagem secundária, o secondaryImage propriedade de MusicTrackMediaMetadata precisa ser modificada. A propriedade leva um 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 terminar de carregar o conteúdo, a imagem secundária será 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 deve usar PlayerManager para conseguir o MediaInformation chamando getMediaInformation. O aplicativo precisa modificar o metadata atualizando a secondaryImage ao valor desejado. Por fim, ligando para setMediaInformation com as novas informações atualizará a interface. Esse método pode ser usado para lidar 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 desativar a imagem secundária, defina a propriedade secondaryImage como nula na .

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

Vídeo

Visão geral

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 chame 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á exibido quando um usuário acionar a exibição da sobreposição em 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');

A remoção da imagem secundária é feita ao definir o URL da imagem como null ou um 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

Isso conclui os recursos que podem ser adicionados ao seu Web Receiver. Agora é possível criar um app remetente no iOS; Android ou Web.