Imagen secundaria

Los desarrolladores de Cast pueden agregar una imagen informativa (secundaria) a la IU para las aplicaciones de audio y video. Consulta los formatos de imagen admitidos para verificar la compatibilidad.

La imagen secundaria aparece en la parte superior derecha de la pantalla y se puede usar para mostrar un gráfico con información adicional sobre el contenido que se está reproduciendo en ese momento, como el formato del contenido, el indicativo de la estación de radio o la clasificación del programa de TV. La imagen secundaria permanecerá en la pantalla siempre que la función esté habilitada para el contenido actual y el reproductor no se encuentre en estado inactivo.

En la Tabla 1, se muestra la experiencia del usuario cuando la función está habilitada en los tipos de dispositivos y controles aplicables. Los detalles de implementación e integración difieren un poco entre las apps de audio y video. Consulta las secciones a continuación para integrar esta función en tu app de Web Receiver.

Tabla 1: IU de la imagen secundaria por contenido y tipo de dispositivo

Tipo de dispositivo	Contenido de audio	Contenido de anuncios de video
Chromecast
Chromecast con Google TV
Pantalla inteligente
Control remoto de pantalla inteligente		Nota: Las imágenes secundarias no son compatibles con los controles remotos para el contenido de video.

Audio

Descripción general

La imagen secundaria para el contenido de audio se controla mediante los metadatos del contenido cargado. Una vez que se carga el elemento multimedia, cualquier cambio posterior en la propiedad secondaryImage de los metadatos se refleja en la IU.

Si se usa una pantalla inteligente como control remoto para el audio, la imagen secundaria también aparecerá en la IU de la pantalla cuando se configure.

Nota: Recomendamos que los desarrolladores de Cast utilicen la IU de audio predeterminada que se proporciona a través del elemento <cast-media-player> del receptor web. Usar la IU predeterminada proporciona una experiencia del usuario coherente en Chromecast, pantallas inteligentes y Chromecast con Google TV, con una sobrecarga mínima. La función de imagen secundaria no es compatible con las apps que usan una IU personalizada. Esto no se aplica a los controles remotos, ya que siempre mostrarán la imagen secundaria cuando se configuren.

Implementación

Para configurar, quitar o actualizar la imagen secundaria, se debe modificar la propiedad secondaryImage de MusicTrackMediaMetadata. La propiedad toma un objeto Image propagado con la URL que describe dónde se aloja la imagen secundaria.

En el siguiente ejemplo, la imagen secundaria se configura en el interceptor load. Cuando el reproductor termina de cargar el contenido, se muestra la imagen secundaria.

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 actualizar la imagen secundaria durante la reproducción, la aplicación debe usar PlayerManager y obtener el MediaInformation llamando a getMediaInformation. Luego, la aplicación debe modificar el metadata actualizando la propiedad secondaryImage al valor deseado. Por último, si llamas a setMediaInformation con la nueva información, se actualizará la IU. Este método se puede usar para manejar cambios en los metadatos que se proporcionan a través de actualizaciones, como los eventos EMSG o ID3 durante la reproducción.

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 quitar la imagen secundaria, establece la propiedad secondaryImage como nula en el objeto de metadatos.

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

Video

Descripción general

Para el contenido de video, la imagen secundaria se configura y quita con UiManager. La imagen secundaria se muestra con los controles de video superpuestos.

Implementación

Para establecer la imagen secundaria, la aplicación debe obtener una instancia de UiManager y llamar a setSecondaryImage. Requiere dos parámetros: SecondaryImagePosition y la URL de la imagen. La imagen secundaria se puede configurar en cualquier momento, pero solo se mostrará cuando un usuario active la superposición para que se muestre en primer 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 quitar la imagen secundaria, configura la URL de la imagen como null o una string vacía.

// 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óximos pasos

Con esto concluye las funciones que puedes agregar a tu receptor web. Ahora puedes compilar una app emisora en iOS, Android o la Web.