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
Engagement
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 d'applications ou d'é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.