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 au sein d'une un flux multimédia donné.

Consultez le Présentation des coupures publicitaires Web receiver pour d'autres sur le fonctionnement des coupures publicitaires.

Bien que les coupures puissent être spécifiées à la fois au niveau de l'expéditeur et du destinataire, il est recommandé d'utiliser spécifiées sur Web Receiver et Android TV Receiver pour assurer la cohérence sur toutes les plates-formes.

Sur le Web, spécifiez les coupures publicitaires dans une commande de chargement avec 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-titres), ou un 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 un canal et attribuer un identifiant unique comme ceci:

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, elle peut avoir plusieurs des sous-titres (chacun correspondant à une langue différente) ou plusieurs autres flux audio (pour différentes langues).

MediaInfo est la classe qui modélise un élément multimédia. Pour associer une collection Track avec un élément multimédia, vous mettez à jour tracks . Cette association doit être faite avant que le support ne soit chargé au 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 le contenu multimédia activeTrackIds requête.

Vous pouvez également activer une ou plusieurs pistes associées au contenu multimédia. après le chargement du contenu multimédia, en appelant EditTracksInfoRequest(opt_activeTrackIds, opt_textTrackStyle) et en transmettant les ID des pistes à activer dans opt_activeTrackIds. Remarque : les deux paramètres sont facultatifs et vous pouvez choisir les pistes ou styles actifs, à votre guise. Par exemple, voici comment activer le sous-titre français (2) et l'audio 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 en cours, il vous suffit de configurer mediaInfo.tracks=null (un tableau vide), puis actualisez le contenu multimédia.

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

  • Modifiez var activeTrackIds = [2, 3]; (comme indiqué précédemment) pour qu'il ne comprend que [3], la piste audio.
  • Définissez mediaInfo.tracks=null. Notez qu'il n'est pas nécessaire actualisez les contenus multimédias pour désactiver les sous-titres (track.hidden). Envoyer un tableau activeTracksId qui ne contient pas de précédemment activé trackId 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 lorsque vous créez ou mettez à jour un objet TextTrackStyle existant, vous pouvez l'appliquer l'élément multimédia en cours de lecture en appelant la méthode editTrackInfo , comme ceci:

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 : de réussite ou d'erreur, et mettez à 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 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 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 par récepteur. Utilisez les RemotePlayerEventType.VOLUME_LEVEL_CHANGED et RemotePlayerEventType.IS_MUTED_CHANGED pour maintenir le volume sur l'expéditeur. Consultez les informations sur l'état. pour en savoir plus.
  • Les applications d'envoi ne doivent pas régler le volume à un niveau spécifique prédéfini ou régler le volume sur le volume de la sonnerie/du contenu multimédia de l'appareil émetteur lorsque l'application se charge sur le récepteur.

Voir Commandes de volume pour l'expéditeur de la checklist de conception.

Envoyer des messages multimédias au destinataire

Media Messages peut être envoyé de l'expéditeur à 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 votre actualité

Lorsque plusieurs expéditeurs sont connectés au même destinataire, il est important que chaque expéditeur d'être informé des modifications sur le destinataire, même si celles-ci ont été initiés par d'autres expéditeurs.

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

Indicateur de progression

Afficher le contexte de lecture avec un indicateur de progression sur l'expéditeur pour la plupart des applications. Les API Cast utilisent le protocole multimédia Cast, qui optimise l'utilisation de la bande passante dans ce cas de figure et dans d'autres pour éviter vous devez implémenter votre propre synchronisation d'état. Pour une implémentation correcte d'un indicateur de progression de la lecture des contenus multimédias à l'aide des API, consultez la Exemple d'application CastVideos-chrome

Exigences CORS

Pour le streaming multimédia adaptatif, Google Cast requiert la présence d'en-têtes CORS. mais même les simples flux MP4 nécessitent CORS s'ils incluent des pistes. Si vous si vous souhaitez activer les titres pour tous les contenus multimédias, vous devez activer CORS pour vos deux canaux et vos flux multimédias. Si aucun en-tête CORS n'est disponible, pour votre contenu MP4 simple sur votre serveur, puis ajoutez un simple sous-titre piste, vous ne pourrez pas diffuser votre contenu multimédia à moins de mettre à 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 supplémentaires dont vous n'avez peut-être pas besoin auparavant.

Caractères génériques "*" ne peut pas être utilisé pour l'en-tête Access-Control-Allow-Origin. Si la page comporte du contenu multimédia protégé, elle doit utiliser un domaine au lieu d'un 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.

Vous pouvez trouver le sessionId sur le CastSession actif à l'aide de getSessionId() après avoir appelé loadMedia().

L'approche recommandée est la suivante:

  1. Appeler loadMedia() pour démarrer la session
  2. Stocker sessionId localement
  3. Rejoignez la session en utilisant 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

Les fonctionnalités que vous pouvez ajouter à votre application d'envoi Web sont maintenant terminées. Vous pouvez désormais créer une application émettrice pour une autre plate-forme (Android ou iOS), ou créer une application réceptrice ;

Précédent
Intégrer Cast