Google utilise la technologie IA pour traduire le contenu dans votre langue préférée. Les traductions générées par IA peuvent contenir des erreurs.

Ajouter des fonctionnalités avancées à votre application d'envoi Web

Coupures publicitaires

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

Pour en savoir plus sur le fonctionnement des coupures publicitaires, consultez la présentation des coupures publicitaires du récepteur Web.

Bien que les coupures puissent être spécifiées à la fois sur l'émetteur et le récepteur, il est recommandé de les spécifier sur le récepteur Web et le récepteur Android TV pour maintenir un comportement cohérent sur toutes les plates-formes.

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

Une piste peut être un objet texte (sous-titre ou légende), 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 un parcours dans le SDK. Vous pouvez configurer une piste et lui attribuer un identifiant 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 comporter plusieurs pistes. Par exemple, il peut comporter 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, mettez à jour sa propriété tracks. Cette association doit être effectuée avant le chargement du contenu multimédia 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 multimédia activeTrackIds.

Vous pouvez également activer une ou plusieurs pistes associées à l'élément multimédia après le chargement de l'élément multimédia en appelant EditTracksInfoRequest(opt_activeTrackIds, opt_textTrackStyle) et en transmettant les ID des pistes à activer dans opt_activeTrackIds. Notez que ces deux paramètres sont facultatifs et que vous pouvez choisir de définir les pistes actives ou les styles à votre discrétion. Par exemple, voici comment activer les sous-titres 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 contenu multimédia actuel, définissez simplement mediaInfo.tracks=null (un tableau vide) et actualisez le contenu multimédia.

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

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

Appliquer un style aux 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 avec le résultat des rappels (réussite ou erreur) et mettre à jour l'expéditeur d'origine en conséquence.

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

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

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

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

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

Réglage du volume

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

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

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

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

Consultez la section Commandes de volume de l'expéditeur de la checklist de conception.

Envoi de messages multimédias au récepteur

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

// 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 votre actualité

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

Pour ce faire, votre application doit enregistrer tous les écouteurs nécessaires sur RemotePlayerController. Si l'élément TextTrackStyle du contenu multimédia actuel change, tous les expéditeurs connectés sont avertis, et les propriétés correspondantes de la session multimédia actuelle, telles que activeTrackIds et textTrackStyle du champ MediaInfo, sont 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 en informe tous les expéditeurs connectés, quelle que soit la situation.

Indicateur de progression

La plupart des applications doivent afficher la position de lecture avec un indicateur de progression sur l'émetteur. Les API Cast utilisent le protocole multimédia Cast, qui optimise la consommation de bande passante pour ce scénario et d'autres. Vous n'avez donc pas besoin d'implémenter votre propre synchronisation d'état. Pour implémenter correctement un indicateur de progression pour la lecture de contenus multimédias à l'aide des API, consultez l'application exemple CastVideos-chrome.

Exigences concernant 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 pistes. Si vous souhaitez activer les pistes pour un contenu multimédia, vous devez activer CORS pour vos flux de pistes et vos flux multimédias. Par conséquent, si vous ne disposez pas d'en-têtes CORS pour votre contenu multimé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, sauf si vous mettez à jour votre serveur pour 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'aviez 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 contient du contenu multimédia protégé, elle doit utiliser un domaine au lieu d'un caractère générique.

Reprendre une session sans actualiser la page Web

Pour reprendre un CastSession existant, utilisez requestSessionById(sessionId) avec l'sessionId de la session à laquelle vous essayez de participer.

La sessionId se trouve sur le CastSession actif à l'aide de getSessionId() après l'appel de loadMedia().

L'approche recommandée est la suivante :

Appelez loadMedia() pour démarrer la session.
Stocker le sessionId localement
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

Vous avez terminé d'ajouter des fonctionnalités à votre application émettrice Web. Vous pouvez maintenant créer une application émettrice pour une autre plate-forme (Android ou iOS) ou créer une application réceptrice.

Intégrer Cast