Agrega funciones avanzadas a tu app de remitente web

Pausas publicitarias

El SDK de Web Sender proporciona compatibilidad con pausas publicitarias y anuncios complementarios en un flujo de medios determinado.

Consulta la Descripción general de las pausas publicitarias del receptor web para obtener más información sobre el funcionamiento de las pausas publicitarias.

Si bien se pueden especificar pausas tanto para el remitente como para el receptor, se recomienda que se especifican en el receptor web y el receptor de Android TV para que sea coherente el comportamiento de los usuarios en las plataformas.

En la Web, especifica pausas publicitarias en un comando de carga con BreakClip y 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)

Usa las APIs de segmentos

Una pista puede ser un objeto de texto (subtítulo) o una transmisión de video o audio por Internet. . Las APIs de Tracks te permiten trabajar con estos objetos en tu aplicación.

Nota: Los atributos con estilo y Receptores de contenido multimedia predeterminado le permiten usar solo las pistas de texto con la API. Para trabajar con el audio y pistas de video, debes desarrollar un Receptor personalizado.

Un objeto Track representa una pista en el SDK. Puedes configurar un segmento y asignar un ID único a él de la siguiente manera:

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;

Un elemento multimedia puede tener varias pistas. por ejemplo, puede tener múltiples subtítulos (cada uno para un idioma diferente) o varias transmisiones de audio alternativas (para diferentes idiomas).

MediaInfo es la clase que modela un elemento multimedia. Para asociar un conjunto de Track con un elemento multimedia, actualizas su tracks propiedad. Esta asociación debe realizarse antes de que el contenido multimedia se cargado en el 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;

Puedes configurar las pistas activas en el activeTrackIds para cada solicitud.

También puedes activar uno o más segmentos asociados con el contenido multimedia después de cargar el contenido multimedia, llamando EditTracksInfoRequest(opt_activeTrackIds, opt_textTrackStyle) y pasa los IDs de los segmentos que se activarán en opt_activeTrackIds. Nota: ambos parámetros son opcionales y puedes elegir cuál, pistas o estilos activos, que puedes configurar a tu discreción. Por ejemplo, aquí te mostramos cómo activa el subtítulo en francés (2) y el audio en francés (3):

var activeTrackIds = [2, 3];
var tracksInfoRequest = new chrome.cast.media.EditTracksInfoRequest(activeTrackIds);
media.editTracksInfo(tracksInfoRequest, successCallback, errorCallback);

Para eliminar todas las pistas de audio o video del contenido multimedia actual, simplemente configura mediaInfo.tracks=null (un array vacío) y vuelve a cargar el contenido multimedia.

Para eliminar todas las pistas de texto del contenido multimedia actual (por ejemplo, desactivar subtítulos), realiza una de las siguientes acciones:

• Actualiza var activeTrackIds = [2, 3]; (que se mostró anteriormente) para que solo incluye el [3], la pista de audio.
• Establece mediaInfo.tracks=null. Ten en cuenta que no es necesario vuelve a cargar el contenido multimedia para desactivar los subtítulos de texto (track.hidden). Enviando un array activeTracksId que no contiene un trackId habilitado anteriormente inhabilita la pista de texto.

Cómo aplicar estilo a las pistas de texto

TextTrackStyle es el objeto que encapsula la información de estilo de una pista de texto. Después del creando o actualizando un objeto TextTrackStyle existente, puedes aplicarlo a el elemento multimedia que se está reproduciendo llamando a su editTrackInfo de la siguiente manera:

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

Puedes hacer un seguimiento del estado de la solicitud con el resultado de las devoluciones de llamada. éxito o error, y actualizar el remitente según corresponda.

Las aplicaciones deben permitir a los usuarios actualizar el estilo de las pistas de texto, ya sea usando la configuración proporcionada por el sistema o la propia aplicación.

Puedes aplicar ajustes de estilo a los siguientes elementos de estilo de seguimiento de texto:

• Color y opacidad en primer plano (texto)
• Color de fondo y opacidad
• Tipo de borde
• Color de borde
• Escala de fuente
• Familia de fuentes
• Estilo de fuente

Por ejemplo, establece el color del texto en rojo con un 75% de opacidad de la siguiente manera:

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

Control de volumen

Puedes usar la RemotePlayer y RemotePlayerController para configurar el volumen del receptor.

function changeVolume(newVolume) {
  player.volumeLevel = newVolume;
  playerController.setVolumeLevel();
  // Update sender UI to reflect change
}

La app emisora debe cumplir con los siguientes lineamientos para controlar el volumen:

• La aplicación emisora debe sincronizarse con el receptor para que la la IU del remitente siempre informa el volumen por receptor. Usa el RemotePlayerEventType.VOLUME_LEVEL_CHANGED y Es la devolución de llamada RemotePlayerEventType.IS_MUTED_CHANGED para mantener la volumen en el remitente. Consulta las Actualizaciones de estado. para obtener más información.
• Las apps de remitente no deben establecer el nivel de volumen en un nivel específico y predefinido o establecer el nivel de volumen en el volumen del timbre o de los medios del dispositivo emisor cuando de que la app se cargue en la app receptora.

Consulta Controles de volumen del remitente en la Lista de tareas de diseño.

Cómo enviar mensajes multimedia al receptor

El remitente puede enviar Media Messages a receptor. Por ejemplo, para enviar un mensaje SKIP_AD al receptor, haz lo siguiente:

// 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
    });
  }
});

Actualizaciones de estado

Cuando se conectan varios remitentes al mismo receptor, es importante cada remitente para estar al tanto de los cambios en el receptor, incluso si esos cambios se iniciaron desde otros remitentes.

Nota: Esto es importante para todas las apps, no solo para las que admiten explícitamente varios remitentes, ya que algunos dispositivos de transmisión tienen entradas de control (controles remotos, que se comporten como remitentes virtuales, lo que afecta el estado en el receptor.

Para ello, tu aplicación debe registrar todos los objetos de escucha necesarios en el RemotePlayerController Si el botón TextTrackStyle de los cambios multimedia actuales, se notificará a todos los remitentes conectados y las propiedades correspondientes de la sesión multimedia actual, como activeTrackIds y textTrackStyle de las MediaInfo se enviarán a los remitentes en devoluciones de llamada. En este caso, el SDK del receptor no verifica si el diseño nuevo es diferente del anterior y notifica a todos los remitentes conectados independientemente.

Nota: La lista de pistas asociadas con el contenido cargado actualmente no se puede cambiar el contenido multimedia. Si es necesario, debes actualizar la información de los segmentos en el MediaInfo objeto y vuelve a cargar el contenido multimedia.

Indicador de progreso

Mostrar la ubicación de reproducción con un indicador de progreso en el remitente es una para la mayoría de las apps. Las APIs de Cast usan el protocolo de medios de Cast, que optimiza el consumo de ancho de banda para esta y otras situaciones, por lo que no debes debes implementar tu propia sincronización de estado. Para una implementación adecuada de un indicador de progreso para la reproducción de contenido multimedia usando las APIs, consulta la CastVideos-chrome de la app de ejemplo.

Requisitos de CORS

Para la transmisión multimedia adaptable, Google Cast requiere la presencia de encabezados CORS, pero incluso las transmisiones de medios mp4 simples requieren CORS si incluyen pistas. Si Si quieres habilitar las pistas para cualquier contenido multimedia, debes habilitar CORS para ambas pistas. y tus transmisiones de medios. Entonces, si no tienes encabezados de CORS disponibles, para tus archivos multimedia mp4 simples en tu servidor, y agregas un subtítulo simple no podrás transmitir tu contenido multimedia, a menos que actualices tu servidor para incluir los encabezados de CORS adecuados.

Necesitas los siguientes encabezados: Content-Type, Accept-Encoding y Range. Ten en cuenta que los últimos dos encabezados, Accept-Encoding y Range, son encabezados que quizás no necesitaste anteriormente.

Comodines "*" no se puede usar para el encabezado Access-Control-Allow-Origin. Si la página tiene contenido multimedia protegido, debe utilizar un dominio en lugar de un .

Reanudar una sesión sin volver a cargar la página web

Para reanudar un CastSession existente, usa requestSessionById(sessionId) con el sessionId de la sesión a la que intentas unirte.

Puedes encontrar el sessionId en el CastSession activo con getSessionId() después de llamar loadMedia().

El enfoque recomendado es el siguiente:

1. Llamada loadMedia() para iniciar la sesión
2. Almacena sessionId de forma local
3. Vuelve a unirte a la sesión con requestSessionById(sessionId) cuando sea necesario

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

Aquí concluye las funciones que puedes agregar a tu app de Web Sender. Ahora puedes compilar una app emisora para otra plataforma (Android o iOS) compilar una app receptora.