Aggiungi funzionalità avanzate all'app Web Sender

Interruzioni pubblicitarie

L'SDK Web Sender fornisce supporto per interruzioni pubblicitarie e annunci companion all'interno di un un determinato stream multimediale.

Consulta le Panoramica delle interruzioni pubblicitarie di Web receiver per saperne di più informazioni sul funzionamento delle interruzioni pubblicitarie.

Anche se le interruzioni possono essere specificate sia sul mittente sia sul destinatario, è consigliabile che specificato sul WebRicevitore e Ricevitore Android TV per garantire coerenza il comportamento degli utenti sulle varie piattaforme.

Sul web, specifica le interruzioni pubblicitarie in un comando di caricamento utilizzando 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)

Utilizzo delle API delle tracce

Una traccia può essere un oggetto di testo (sottotitoli o didascalie) oppure uno stream audio o video. . Le API Track ti consentono di lavorare con questi oggetti nella tua applicazione.

Un oggetto Track rappresenta una traccia nell'SDK. Puoi configurare un canale e assegnare un ID univoco in questo modo:

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 multimediale può avere più tracce. ad esempio, può avere più sottotitoli (ognuno per una lingua diversa) o più stream audio alternativi (per lingue diverse).

MediaInfo è la classe che modella un elemento multimediale. Per associare una raccolta di Track con un elemento multimediale, ne aggiorni il tracks proprietà. Questa associazione deve essere effettuata prima che l'elemento multimediale venga caricato sul ricevitore:

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;

Puoi impostare le tracce attive nei contenuti multimediali activeTrackIds richiesta.

Puoi anche attivare una o più tracce associate ai contenuti multimediali una volta caricato l'elemento multimediale, richiamando EditTracksInfoRequest(opt_activeTrackIds, opt_textTrackStyle) e passando gli ID delle tracce da attivare in opt_activeTrackIds. Tieni presente che entrambi i parametri sono facoltativi e puoi scegliere quali tracce o stili attivi, da impostare a tua discrezione. Ad esempio, ecco come attiva il sottotitolo in francese (2) e l'audio in francese (3):

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

Per rimuovere tutte le tracce audio o video dai contenuti multimediali correnti, è sufficiente impostare mediaInfo.tracks=null (un array vuoto) e ricarica il contenuto multimediale.

Per rimuovere tutte le tracce di testo dai contenuti multimediali correnti (ad esempio, disattivando sottotitoli), esegui una delle seguenti operazioni:

  • Aggiorna var activeTrackIds = [2, 3]; (visualizzato in precedenza) in modo che include solo [3], la traccia audio.
  • Imposta mediaInfo.tracks=null. Tieni presente che non è necessario Ricarica i contenuti multimediali per disattivare i sottotitoli di testo (track.hidden). L'invio di un array activeTracksId che non contiene un abilitato in precedenza trackId disattiva la traccia di testo.

Assegnazione di uno stile alle tracce di testo

TextTrackStyle è l'oggetto che racchiude le informazioni di stile di una traccia di testo. Dopo il giorno creando o aggiornando un oggetto TextTrackStyle esistente, puoi applicarlo a sull'elemento multimediale attualmente in riproduzione chiamando il suo editTrackInfo in questo modo:

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

Puoi monitorare lo stato della richiesta con il risultato dei callback, successo o errore e aggiorna il mittente di origine di conseguenza.

Le applicazioni devono consentire agli utenti di aggiornare lo stile delle tracce di testo, utilizzando le impostazioni fornite dal sistema o dall'applicazione stessa.

Puoi applicare uno stile ai seguenti elementi dello stile della traccia di testo:

  • Colore e opacità del primo piano (testo)
  • Colore dello sfondo e opacità
  • Tipo di bordo
  • Colore bordo
  • Scala carattere
  • Famiglia di caratteri
  • Stile carattere

Ad esempio, imposta il colore del testo sul rosso con un'opacità del 75% come segue:

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

Controllo del volume

Puoi utilizzare lo RemotePlayer e RemotePlayerController per impostare il volume del ricevitore.

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

L'app del mittente deve rispettare le seguenti linee guida per il controllo del volume:

  • L'applicazione del mittente deve sincronizzarsi con il destinatario in modo che La UI del mittente segnala sempre il volume in base al destinatario. Utilizza la RemotePlayerEventType.VOLUME_LEVEL_CHANGED e RemotePlayerEventType.IS_MUTED_CHANGED per mantenere volume sul mittente. Consulta gli Aggiornamenti di stato per ulteriori informazioni.
  • Le app di mittenti non devono impostare il livello di volume a un livello predefinito specifico o imposta il livello del volume al volume della suoneria o dei contenuti multimediali del dispositivo del mittente quando l'app viene caricata sul ricevitore.

Consulta Controlli del volume dei mittenti nell'elenco di controllo della progettazione.

Invio di messaggi multimediali al destinatario

Media Messages può essere inviato dal mittente a destinatario. Ad esempio, per inviare un messaggio SKIP_AD al destinatario:

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

Aggiornamenti di stato

Quando più mittenti sono connessi allo stesso destinatario, è importante che ogni mittente è a conoscenza delle modifiche per il destinatario anche se tali modifiche sono state avviate da altri mittenti.

A questo scopo, l'applicazione deve registrare tutti i listener necessari nella RemotePlayerController Se TextTrackStyle delle modifiche dei contenuti multimediali correnti, tutti i mittenti collegati riceveranno una notifica e le proprietà corrispondenti della sessione multimediale corrente, come activeTrackIds e textTrackStyle del MediaInfo verrà inviato ai mittenti nei callback. In questo caso, l'SDK ricevente non verifica se il nuovo stile è diverso da quello precedente invia comunque una notifica a tutti i mittenti collegati.

Indicatore avanzamento

La visualizzazione del luogo di riproduzione con un indicatore di avanzamento sul mittente è una requisito per la maggior parte delle app. Le API Cast utilizzano il protocollo Cast media, che ottimizza il consumo di larghezza di banda per questo e altri scenari, in modo che implementare una propria sincronizzazione dello stato. Per una corretta implementazione di un indicatore di avanzamento per la riproduzione di contenuti multimediali utilizzando le API, consulta App di esempio CastVideo-chrome.

Requisiti CORS

Per lo streaming di contenuti multimediali adattivi, Google Cast richiede la presenza di intestazioni CORS, ma anche i semplici stream multimediali mp4 richiedono CORS se includono tracce. Se Se vuoi attivare Track per tutti i contenuti multimediali, devi attivare CORS per entrambi i canali e i tuoi stream multimediali. Pertanto, se non disponi di intestazioni CORS per i tuoi semplici contenuti mp4 sul server e poi aggiungi un semplice sottotitolo non potrai trasmettere in streaming i tuoi contenuti multimediali se non aggiorni il server per includere le intestazioni CORS appropriate.

Sono necessarie le seguenti intestazioni: Content-Type, Accept-Encoding e Range. Tieni presente che le ultime due intestazioni, Accept-Encoding e Range, sono aggiuntive che potresti non aver bisogno in precedenza.

Caratteri jolly "*" non può essere utilizzato per l'intestazione Access-Control-Allow-Origin. Se se la pagina include contenuti multimediali protetti, è necessario utilizzare un dominio anziché carattere jolly.

Ripresa di una sessione senza ricaricare la pagina web

Per ripristinare un elemento CastSession esistente, usa requestSessionById(sessionId) con il sessionId della sessione a cui stai tentando di accedere.

Puoi trovare il sessionId sul dispositivo CastSession attivo utilizzando getSessionId(): dopo aver chiamato loadMedia().

L'approccio consigliato è:

  1. Chiama loadMedia() per avviare la sessione
  2. Archivia sessionId localmente
  3. Ripartecipa alla sessione utilizzando requestSessionById(sessionId) quando necessario
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();
  }
});

Passaggi successivi

Con questo si concluderanno le funzionalità che puoi aggiungere all'app Web Sender. Ora puoi creare un'app mittente per un'altra piattaforma (Android o iOS) oppure creare un'app di ricezione.

Indietro
Integra Google Cast