Ajouter des fonctionnalités avancées à votre application Web Sender

Coupures publicitaires

Le SDK Web Sender est compatible avec les coupures publicitaires et les annonces associées dans un flux multimédia donné.

Consultez la page Présentation des coupures publicitaires du récepteur Web pour en savoir plus sur le fonctionnement des coupures publicitaires.

Il est possible de spécifier des sauts à la fois sur l'expéditeur et sur le récepteur, mais il est recommandé de les spécifier sur le récepteur Web et le récepteur Android TV afin de maintenir un comportement cohérent entre les plates-formes.

Sur le Web, spécifiez les coupures publicitaires dans une commande de chargement à l'aide des commandes BreakClip et 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)

Utiliser les API Tracks

Une piste peut être un objet texte (sous-titre ou sous-titre), ou un objet de flux audio ou vidéo. Les API Tracks vous permettent d'utiliser ces objets dans votre application.

Un objet Track représente une piste dans le SDK. Vous pouvez configurer une piste et lui attribuer un ID unique comme suit:

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 élément multimédia peut avoir plusieurs pistes. Par exemple, il peut avoir plusieurs sous-titres (chacun pour une langue différente) ou plusieurs flux audio alternatifs (pour différentes langues).

MediaInfo est la classe qui modélise un élément multimédia. Pour associer une collection d'objets Track à un élément multimédia, vous devez mettre à jour sa propriété tracks. Cette association doit être effectuée avant que le contenu multimédia ne soit chargé sur le récepteur:

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;

Vous pouvez définir les pistes actives dans la requête média activeTrackIds.

Vous pouvez également activer un ou plusieurs canaux associés à l'élément multimédia, après le chargement du média, en appelant EditTracksInfoRequest(opt_activeTrackIds, opt_textTrackStyle) et en transmettant les ID des canaux à activer dans opt_activeTrackIds. Notez que ces deux paramètres sont facultatifs et que vous pouvez définir à votre discrétion les pistes ou les styles actifs. Par exemple, voici comment activer le sous-titre en français (2) et l'audio en français (3):

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

Pour supprimer toutes les pistes audio ou vidéo du support actuel, il vous suffit de définir mediaInfo.tracks=null (un tableau vide) et d'actualiser le support.

Pour supprimer toutes les pistes textuelles du contenu multimédia actuel (par exemple, en désactivant les sous-titres), effectuez l'une des opérations suivantes:

  • Modifiez var activeTrackIds = [2, 3]; (comme indiqué précédemment) afin qu'il n'inclue que [3], la piste audio.
  • Définissez mediaInfo.tracks=null. Notez qu'il n'est pas nécessaire d'actualiser le contenu multimédia pour désactiver les sous-titres de texte (track.hidden). L'envoi d'un tableau activeTracksId ne contenant pas de trackId précédemment activé désactive la piste de texte.

Appliquer un style à des pistes de texte

TextTrackStyle est l'objet qui encapsule les informations de style d'une piste de texte. Après avoir créé ou mis à jour un objet TextTrackStyle existant, vous pouvez l'appliquer à l'élément multimédia en cours de lecture en appelant sa méthode editTrackInfo, comme suit:

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

Vous pouvez suivre l'état de la requête et le résultat des rappels, qu'ils aient réussi ou échoué, et mettre à jour l'expéditeur d'origine en conséquence.

Les applications doivent permettre aux utilisateurs de mettre à jour le style des pistes de texte, à l'aide des paramètres fournis par le système ou par l'application elle-même.

Vous pouvez appliquer un style aux éléments de style de la piste de texte suivants:

  • Couleur et opacité au premier plan (texte)
  • Couleur et opacité de l'arrière-plan
  • Type de contour
  • Couleur du contour
  • Échelle de police
  • Famille de polices
  • Style de police

Par exemple, définissez la couleur du texte sur rouge avec 75% d'opacité comme suit:

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

Contrôle du volume

Vous pouvez utiliser RemotePlayer et RemotePlayerController pour définir le volume du récepteur.

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

L'application émettrice doit respecter les consignes suivantes pour contrôler le volume:

  • L'application émetteur doit se synchroniser avec le récepteur pour que l'interface utilisateur de l'expéditeur indique toujours le volume par récepteur. Utilisez les rappels RemotePlayerEventType.VOLUME_LEVEL_CHANGED et RemotePlayerEventType.IS_MUTED_CHANGED pour conserver le volume sur l'expéditeur. Pour en savoir plus, consultez Mises à jour de l'état.
  • Les applications émetteurs ne doivent pas régler le volume à un niveau prédéfini spécifique, ni régler le volume sur la sonnerie ou le volume multimédia de l'appareil de l'expéditeur lors du chargement de l'application sur le récepteur.

Consultez les contrôles du volume d'expéditeurs dans la checklist de conception.

Envoyer des messages multimédias au destinataire

Media Messages peut être envoyé de l'expéditeur au destinataire. Par exemple, pour envoyer un message SKIP_AD au destinataire:

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

Informations sur l'état

Lorsque plusieurs expéditeurs sont connectés au même destinataire, il est important que chaque expéditeur soit informé des modifications apportées au récepteur, même si ces modifications proviennent d'autres expéditeurs.

À cette fin, votre application doit enregistrer tous les écouteurs nécessaires sur RemotePlayerController. Si le TextTrackStyle du média actuel change, tous les expéditeurs connectés seront avertis et les propriétés correspondantes de la session multimédia actuelle, telles que activeTrackIds et textTrackStyle du champ MediaInfo, seront envoyées aux expéditeurs dans les rappels. Dans ce cas, le SDK du récepteur ne vérifie pas si le nouveau style est différent du précédent et notifie tous les expéditeurs connectés.

Indicateur de progression

L'affichage du lieu de lecture avec un indicateur de progression sur l'expéditeur est obligatoire pour la plupart des applications. Les API Cast utilisent le protocole de diffusion multimédia, qui optimise la consommation de bande passante pour ce scénario et d'autres. Vous n'avez donc pas besoin de mettre en œuvre votre propre synchronisation d'état. Pour mettre en œuvre correctement un indicateur de progression de la lecture de contenus multimédias à l'aide des API, consultez l'exemple d'application CastVideos-chrome.

Exigences CORS

Pour le streaming multimédia adaptatif, Google Cast nécessite la présence d'en-têtes CORS, mais même les flux multimédias mp4 simples nécessitent CORS s'ils incluent des titres. Si vous souhaitez activer le suivi pour n'importe quel média, vous devez activer CORS pour vos flux de piste et vos flux multimédias. Par conséquent, si aucun en-tête CORS n'est disponible pour votre média mp4 simple sur votre serveur, et que vous ajoutez ensuite une piste de sous-titres simple, vous ne pourrez pas diffuser votre contenu multimédia en streaming, sauf si vous mettez à jour votre serveur afin d'inclure les en-têtes CORS appropriés.

Vous avez besoin des en-têtes suivants : Content-Type, Accept-Encoding et Range. Notez que les deux derniers en-têtes, Accept-Encoding et Range, sont des en-têtes supplémentaires dont vous n'avez peut-être pas besoin auparavant.

Les caractères génériques "*" ne peuvent pas être utilisés pour l'en-tête Access-Control-Allow-Origin. Si la page comporte du contenu multimédia protégé, elle doit utiliser un domaine plutôt qu'un caractère générique.

Reprendre une session sans actualiser la page Web

Pour réactiver un CastSession existant, utilisez requestSessionById(sessionId) avec le sessionId de la session à laquelle vous essayez de participer.

sessionId est disponible sur le CastSession actif à l'aide de getSessionId() après l'appel de loadMedia().

L'approche recommandée est la suivante:

  1. Appelez loadMedia() pour démarrer la session.
  2. Stocker sessionId en local
  3. Rejoignez la session à l'aide de requestSessionById(sessionId) si nécessaire
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();
  }
});

Étapes suivantes

Voilà qui conclut ce que vous pouvez ajouter à votre application Web Sender. Vous pouvez désormais créer une application d'envoi pour une autre plate-forme (Android ou iOS) ou une application réceptrice.