Intégrer le SDK Cast à votre application d'envoi Web

Ce guide du développeur explique comment rendre votre application compatible avec Google Cast Application émettrice utilisant le SDK Cast

Terminologie

L'appareil mobile ou le navigateur est l'expéditeur, lequel contrôle la lecture. L'appareil Google Cast est le récepteur. C'est lui qui affiche le contenu l'écran pour la lecture.

Le SDK Web Sender se compose de deux parties: l'API Framework (cast.framework) et l'API Base (chrome.cast) En général, vous effectuez des appels sur l'API Framework, plus simple et de niveau supérieur, qui sont ensuite traités par l'API Base de niveau inférieur.

Le framework expéditeur fait référence à l'API Framework, au module et aux ressources qui fournissent un wrapper aux fonctionnalités de niveau inférieur. La L'application émettrice ou l'application Chrome Google Cast font référence à une application Web (HTML/JavaScript). exécutés dans un navigateur Chrome sur un appareil émetteur. Une application Web Receiver fait référence à une application HTML/JavaScript exécutée sur un appareil Chromecast ou Google Cast.

Le framework de l'expéditeur utilise une conception de rappel asynchrone pour informer l'expéditeur application d'événements et de transition entre différents états de l'application Cast d'un cycle.

Charger la bibliothèque

Pour que votre application mette en œuvre les fonctionnalités de Google Cast, elle doit connaître la l'emplacement du SDK de l'expéditeur Web Google Cast, comme indiqué ci-dessous. Ajoutez le Paramètre de requête d'URL loadCastFramework pour charger l'API Web Sender Framework . Toutes les pages de votre application doivent faire référence à la bibliothèque, comme suit:

<script src="https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>

Framework

Le SDK Web Sender utilise cast.framework.* espace de noms. L'espace de noms représente les éléments suivants:

  • Méthodes ou fonctions qui appellent des opérations sur l'API
  • Écouteurs d'événements pour les fonctions d'écouteur dans l'API

Le framework comprend les composants principaux suivants:

  • CastContext est un objet singleton qui fournit des informations l'état Cast actuel et déclenche des événements pour l'état Cast et la session Cast. les changements d'état.
  • CastSession gère la session et fournit l'état des informations et des événements déclencheurs, tels que des variations du volume de l'appareil, le mode silencieux et les métadonnées de l'application.
  • L'icône Cast, qui est un élément HTML personnalisé simple développe le bouton HTML. Si l'icône Cast fournie ne suffit pas, vous pouvez utiliser l'état Cast pour implémenter une icône Cast.
  • RemotePlayerController fournit la liaison de données pour simplifier l'implémentation du lecteur distant.

Consultez les la documentation de référence de l'API Google Cast Web Sender pour obtenir une description complète de l'espace de noms.

Icône Cast

Le composant de l'icône Cast de votre application est entièrement géré par le framework. Ce inclut la gestion de la visibilité ainsi que la gestion des événements de clic.

<google-cast-launcher></google-cast-launcher>

Vous pouvez également créer le bouton par programmation:

document.createElement("google-cast-launcher");

Vous pouvez appliquer un style supplémentaire, comme la taille ou le positionnement, à la l'élément si nécessaire. Utilisez l'attribut --connected-color pour choisir la couleur de l'état du récepteur Web connecté ; --disconnected-color pour l'état déconnecté.

Initialisation

Après avoir chargé l'API du framework, l'application appelle le gestionnaire window.__onGCastApiAvailable Vous devez vous assurer que l'application définit ce gestionnaire sur le window avant de charger la bibliothèque de l'expéditeur.

Dans ce gestionnaire, vous initialisez l'interaction Cast en appelant la méthode setOptions(options) méthode de CastContext

Exemple :

<script>
window['__onGCastApiAvailable'] = function(isAvailable) {
  if (isAvailable) {
    initializeCastApi();
  }
};
</script>

Ensuite, initialisez l'API comme suit:

initializeCastApi = function() {
  cast.framework.CastContext.getInstance().setOptions({
    receiverApplicationId: applicationId,
    autoJoinPolicy: chrome.cast.AutoJoinPolicy.ORIGIN_SCOPED
  });
};

L'application commence par récupérer l'instance du singleton du Objet CastContext fournies par le framework. Il utilise ensuite setOptions(options) à l'aide d'un Objet CastOptions pour définir applicationID.

Si vous utilisez le récepteur média par défaut, qui ne nécessite pas d'inscription, vous utilisez une constante prédéfinie par le SDK Web Sender, comme indiqué ci-dessous, au lieu de le applicationID:

cast.framework.CastContext.getInstance().setOptions({
  receiverApplicationId: chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID
});

Commande multimédia

Une fois que CastContext a été initialisée, l'application peut récupérer CastSession à tout moment temps avec getCurrentSession()

var castSession = cast.framework.CastContext.getInstance().getCurrentSession();

Le CastSession peut être utilisé pour charger des contenus multimédias sur l'appareil Cast connecté à l'aide de loadMedia(loadRequest) Tout d'abord, créez un MediaInfo en utilisant contentId et contentType, ainsi que toute autre information en rapport avec le contenu. Créez ensuite un LoadRequest en définissant toutes les informations pertinentes pour la demande. Enfin, appelez loadMedia(loadRequest) sur votre CastSession.

var mediaInfo = new chrome.cast.media.MediaInfo(currentMediaURL, contentType);
var request = new chrome.cast.media.LoadRequest(mediaInfo);
castSession.loadMedia(request).then(
  function() { console.log('Load succeed'); },
  function(errorCode) { console.log('Error code: ' + errorCode); });

La méthode loadMedia renvoie une Promise qui peut être utilisé pour effectuer toutes les opérations nécessaires pour obtenir un résultat réussi. Si la promesse est rejetée, l'argument de la fonction est un chrome.cast.ErrorCode

Vous pouvez accéder aux variables d'état du lecteur RemotePlayer Toutes les interactions avec RemotePlayer, y compris les rappels d'événements multimédias et sont gérés à l'aide des commandes RemotePlayerController

var player = new cast.framework.RemotePlayer();
var playerController = new cast.framework.RemotePlayerController(player);

RemotePlayerController permet à l'application de contrôler entièrement les contenus multimédias LIRE, PAUSE, ARRÊTER et RECHERCHER pour le contenu multimédia chargé.

  • LECTURE/PAUSE: playerController.playOrPause();
  • ARRÊTER: playerController.stop();
  • RECHERCHE: playerController.seek();

RemotePlayer et RemotePlayerController peuvent être utilisé avec les frameworks de liaison de données, tels que Polymer ou Angular, pour implémenter à distance.

Voici un extrait de code pour Angular:

<button id="playPauseButton" class="playerButton"
  ng-disabled="!player.canPause"
  ng-click="controller.playOrPause()">
    {{player.isPaused ? 'Play' : 'Pause'}}
</button>
<script>
var player = new cast.framework.RemotePlayer();
var controller = new cast.framework.RemotePlayerController(player);
// Listen to any player update, and trigger angular data binding
update.controller.addEventListener(
  cast.framework.RemotePlayerEventType.ANY_CHANGE,
  function(event) {
    if (!$scope.$$phase) $scope.$apply();
  });
</script>

État du contenu multimédia

Pendant la lecture d'un contenu multimédia, différents événements se produisent. Vous pouvez les enregistrer en configurant des écouteurs pour différents cast.framework.RemotePlayerEventType des événements du RemotePlayerController.

Pour obtenir des informations sur l'état du contenu multimédia, utilisez le cast.framework.RemotePlayerEventType.MEDIA_INFO_CHANGED qui se déclenche lorsque la lecture change et lorsque CastSession.getMediaSession().media des modifications.

playerController.addEventListener(
  cast.framework.RemotePlayerEventType.MEDIA_INFO_CHANGED, function() {
    // Use the current session to get an up to date media status.
    let session = cast.framework.CastContext.getInstance().getCurrentSession();

    if (!session) {
        return;
    }

    // Contains information about the playing media including currentTime.
    let mediaStatus = session.getMediaSession();
    if (!mediaStatus) {
        return;
    }

    // mediaStatus also contains the mediaInfo containing metadata and other
    // information about the in progress content.
    let mediaInfo = mediaStatus.media;
  });

Lorsque des événements tels que la pause, la lecture, la reprise ou la recherche se produisent, l'application doit agir et se synchronisent entre elle et l'application Web Receiver sur l'appareil Cast. appareil. Consultez les informations sur l'état. pour en savoir plus.

Fonctionnement de la gestion des sessions

Le SDK Cast introduit le concept de session Cast, établissement qui combine les étapes de connexion à un appareil, de lancement (ou de connexion) à un Web l'application réceptrice, la connexion à cette application et l'initialisation d'un canal de commande multimédia. Voir le récepteur Web Guide sur le cycle de vie des applications pour en savoir plus sur les sessions Cast et le cycle de vie du récepteur Web.

Les sessions sont gérées par la classe CastContext que votre application peut récupérer cast.framework.CastContext.getInstance() Les sessions individuelles sont représentées par des sous-classes de la classe Session Par exemple : CastSession représente les sessions avec des appareils Cast. Votre application peut accéder aux paramètres Caster la session via CastContext.getCurrentSession()

Pour surveiller l'état de la session, ajoutez un écouteur au paramètre CastContext pour la CastContextEventType.SESSION_STATE_CHANGED type d'événement.

var context = cast.framework.CastContext.getInstance();
context.addEventListener(
  cast.framework.CastContextEventType.SESSION_STATE_CHANGED,
  function(event) {
    switch (event.sessionState) {
      case cast.framework.SessionState.SESSION_STARTED:
      case cast.framework.SessionState.SESSION_RESUMED:
        break;
      case cast.framework.SessionState.SESSION_ENDED:
        console.log('CastContext: CastSession disconnected');
        // Update locally as necessary
        break;
    }
  })

Pour une déconnexion, par exemple lorsque l'utilisateur clique sur le bouton "Arrêter la diffusion" bouton de dans la boîte de dialogue "Caster", vous pouvez ajouter un écouteur RemotePlayerEventType.IS_CONNECTED_CHANGED dans votre écouteur. Dans votre écouteur, vérifiez si RemotePlayer correspond à déconnectés. Si c'est le cas, mettez à jour l'état du lecteur local si nécessaire. Exemple :

playerController.addEventListener(
  cast.framework.RemotePlayerEventType.IS_CONNECTED_CHANGED, function() {
    if (!player.isConnected) {
      console.log('RemotePlayerController: Player disconnected');
      // Update local player to disconnected state
    }
  });

L'utilisateur peut contrôler directement l'arrêt Cast via le framework Cast. l'émetteur peut arrêter la diffusion en utilisant CastSession .

function stopCasting() {
  var castSession = cast.framework.CastContext.getInstance().getCurrentSession();
  // End the session and pass 'true' to indicate
  // that Web Receiver app should be stopped.
  castSession.endSession(true);
}

Transfert de diffusion

La préservation de l'état de la session est la base du transfert de flux, où les utilisateurs peuvent déplacer des flux audio et vidéo existants d'un appareil à un autre à l'aide de commandes vocales, de Google Home des applications ou des écrans connectés. La lecture du contenu multimédia s'arrête sur un appareil (la source) et continue sur un autre (le destination). N'importe quel appareil Cast équipé du dernier micrologiciel peut servir de source ou de destination dans un le transfert de diffusion.

Pour récupérer le nouvel appareil de destination pendant le transfert de diffusion, appelez CastSession#getCastDevice() lorsque cast.framework.SessionState.SESSION_RESUMED est appelé.

Voir Transfert de diffusion sur Web Receiver pour en savoir plus.

Précédent
Configuration
Suivant
Ajouter des fonctionnalités avancées