1. Présentation
Dans cet atelier de programmation, vous allez apprendre à ajouter l'enregistreur de débogage Cast à votre application personnalisée Web Receiver.
Qu'est-ce que Google Cast ?
Le SDK Google Cast permet à votre application de lire des contenus et de contrôler la lecture sur les appareils compatibles Google Cast. Il fournit les composants d'interface utilisateur nécessaires, conformément à la checklist de conception Google Cast.
La checklist de conception de Google Cast a été conçue pour garantir une expérience utilisateur simple et prévisible sur toutes les plates-formes compatibles.
Qu'allons-nous créer ?
Une fois cet atelier de programmation terminé, un récepteur Web personnalisé est intégré au journal de débogage Cast.
Pour en savoir plus et en savoir plus, consultez le guide de l'enregistreur de débogage Cast.
Points abordés
- Configurer votre environnement pour le développement de Web Receiver
- Comment intégrer le Debug Enregistreur au récepteur Cast.
Ce dont vous avez besoin
- La dernière version du navigateur Google Chrome
- Un service d'hébergement HTTPS tel que Firebase Hosting ou ngrok
- Un appareil Google Cast, comme un Chromecast ou un Android TV, configuré pour accéder à Internet
- Un téléviseur ou un moniteur doté d'une entrée HDMI
Expérience
- Vous devez avoir une expérience Cast antérieure et comprendre le fonctionnement d'un récepteur Web Cast.
- Vous devez disposer de connaissances préalables en développement Web.
- Vous devez également avoir une expérience préalable en tant que téléspectateur :)
Comment allez-vous utiliser ce tutoriel ?
Comment évalueriez-vous votre expérience de création d'applications Web ?
Comment évalueriez-vous votre expérience en tant que téléspectateur ?
2. Obtenir l'exemple de code
Vous pouvez télécharger tout l'exemple de code sur votre ordinateur…
puis décompresser le fichier ZIP téléchargé.
3. Déployer votre récepteur en local
Pour que vous puissiez utiliser votre récepteur Web avec un appareil Cast, celui-ci doit être hébergé dans un endroit où l'appareil Cast est accessible. Si vous disposez déjà d'un serveur compatible avec HTTPS, ignorez les instructions ci-dessous et notez l'URL, car vous en aurez besoin dans la section suivante.
Si vous ne disposez d'aucun serveur, vous pouvez utiliser Firebase Hosting ou ngrok.
Exécuter le serveur
Une fois le service de votre choix configuré, accédez à app-start
et démarrez votre serveur.
Notez l'URL de votre récepteur hébergé. Vous l'utiliserez dans la section suivante.
4. Enregistrer une application dans la console de développement Cast
Vous devez enregistrer votre application pour pouvoir exécuter un récepteur Web personnalisé, tel qu'il est conçu dans cet atelier de programmation, sur des appareils Chromecast. Une fois votre application enregistrée, vous recevez un identifiant d'application que votre application émettrice doit utiliser pour effectuer des appels d'API, par exemple pour lancer une application réceptrice.
Cliquez sur "Ajouter une application".
Sélectionnez "Récepteur personnalisé". C'est ce que nous sommes en train de créer.
Saisissez les informations de votre nouveau récepteur en veillant à utiliser l'URL de la dernière section. Notez l'ID application attribué à votre tout nouveau récepteur.
Vous devez également enregistrer votre appareil Google Cast afin qu'il puisse accéder à votre application réceptrice avant de le publier. Une fois publiée, votre application réceptrice sera disponible pour tous les appareils Google Cast. Pour les besoins de cet atelier de programmation, il est recommandé d'utiliser une application réceptrice non publiée.
Cliquez sur "Ajouter un appareil".
Saisissez le numéro de série indiqué au dos de votre appareil Cast et attribuez-lui un nom descriptif. Vous pouvez également trouver le numéro de série en castant votre écran dans Chrome lorsque vous accédez à la console pour développeur du SDK Google Cast.
La préparation du récepteur et de l'appareil prend entre 5 et 15 minutes. Après 5 à 15 minutes d'attente, vous devez redémarrer l'appareil Cast.
5. Exécuter l'application exemple
En attendant que notre nouveau Web Receiver soit prêt à être testé, voyons à quoi ressemble un exemple d'application Web Receiver terminée. Le récepteur que nous allons créer sera capable de lire des contenus multimédias à l'aide d'un streaming à débit adaptatif.
- Dans votre navigateur, ouvrez l'outil Command and Control (CaC).
- Utilisez l'ID de destinataire
CC1AD845
par défaut et cliquez sur le boutonSET APP ID
. - Cliquez sur l'icône Cast en haut à gauche, puis sélectionnez votre appareil compatible Google Cast.
- Accédez à l'onglet
LOAD MEDIA
en haut de la page.
- Définissez la case d'option "Type de requête" sur
LOAD
. - Cliquez sur le bouton
SEND REQUEST
pour lire un exemple de vidéo. - La vidéo est alors lue sur votre appareil compatible Google Cast pour vous montrer à quoi ressemble la fonctionnalité de base du récepteur avec le récepteur par défaut.
6. Préparer le projet de départ
Nous objectif est de rendre l'application de départ que vous avez téléchargée compatible avec Google Cast. Voici quelques termes liés à Google Cast que nous utiliserons dans cet atelier de programmation:
- Une appli de type émetteur s'exécute sur un appareil mobile ou un ordinateur portable.
- Une application récepteur s'exécute sur l'appareil Google Cast ou Android TV.
Vous êtes maintenant prêt à développer le projet de démarrage à l'aide de votre éditeur de texte préféré:
- Sélectionnez le répertoire
app-start
dans le téléchargement de l'exemple de code. - Ouvrez
js/receiver.js
etindex.html
.
Notez que tout au long de cet atelier de programmation, http-server
devrait récupérer les modifications que vous apportez. Si ce n'est pas le cas, essayez d'arrêter et de redémarrer http-server
.
Conception de l'application
L'application réceptrice initialise la session Cast et reste en veille jusqu'à ce que l'émetteur reçoive une requête LOAD (comme la commande de lecture d'un contenu multimédia).
L'application se compose d'une vue principale, définie dans index.html
, et d'un fichier JavaScript appelé js/receiver.js
, qui contient toute la logique nécessaire au fonctionnement du récepteur.
index.html
Ce fichier html contient toute l'interface utilisateur de notre application réceptrice.
receiver.js
Ce script gère toute la logique de notre application réceptrice.
Questions fréquentes
7. Intégrer à l'API CastDebugLogger
Le SDK du récepteur de cast offre aux développeurs une autre option pour déboguer facilement votre application réceptrice à l'aide de l'API CastDebugLogger.
Pour en savoir plus et en savoir plus, consultez le guide de l'enregistreur de débogage Cast.
Initialisation
Ajoutez le script suivant dans la balise <head>
de votre application réceptrice, juste après le script du SDK Web receiver, dans index.html
:
<head>
...
<script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
<!-- Cast Debug Logger -->
<script src="//www.gstatic.com/cast/sdk/libs/devtools/debug_layer/caf_receiver_logger.js"></script>
</head>
Dans js/receiver.js
, en haut du fichier et sous playerManager
, obtenez l'instance CastDebugLogger
et activez l'enregistreur dans un écouteur d'événements READY
:
const context = cast.framework.CastReceiverContext.getInstance();
const playerManager = context.getPlayerManager();
// Debug Logger
const castDebugLogger = cast.debug.CastDebugLogger.getInstance();
const LOG_TAG = 'MyAPP.LOG';
// Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
context.addEventListener(cast.framework.system.EventType.READY, () => {
if (!castDebugLogger.debugOverlayElement_) {
castDebugLogger.setEnabled(true);
}
});
Lorsque l'enregistreur de débogage est activé, une superposition de DEBUG MODE
s'affiche sur le récepteur.
Événements du lecteur de journaux
CastDebugLogger
vous permet de consigner facilement les événements du lecteur déclenchés par le SDK Cast Web Receiver et d'utiliser différents niveaux d'enregistreur pour consigner les données des événements. La configuration loggerLevelByEvents
utilise cast.framework.events.EventType
et cast.framework.events.category
pour spécifier les événements à consigner.
Ajoutez le code suivant sous l'écouteur d'événements READY
pour consigner les événements CORE
du lecteur ou la diffusion d'une modification mediaStatus
:
...
// Set verbosity level for Core events.
castDebugLogger.loggerLevelByEvents = {
'cast.framework.events.category.CORE': cast.framework.LoggerLevel.INFO,
'cast.framework.events.EventType.MEDIA_STATUS': cast.framework.LoggerLevel.DEBUG
};
Messages de journal et balises personnalisées
L'API CastDebugLogger vous permet de créer des messages de journal qui apparaissent dans différentes couleurs dans la superposition de débogage du récepteur. Utilisez les méthodes de journalisation suivantes, classées de la priorité la plus haute à la plus basse:
castDebugLogger.error(custom_tag, message);
castDebugLogger.warn(custom_tag, message);
castDebugLogger.info(custom_tag, message);
castDebugLogger.debug(custom_tag, message);
Pour chaque méthode de journalisation, le premier paramètre doit être une balise personnalisée, et le second le message de journal. Il peut s'agir de n'importe quelle chaîne que vous trouvez utile.
Pour voir les journaux en action, ajoutez-les à votre intercepteur LOAD
.
playerManager.setMessageInterceptor(cast.framework.messages.MessageType.LOAD,
loadRequestData => {
// Listed in order from highest to lowest priority.
castDebugLogger.error(LOG_TAG, 'Test error log');
castDebugLogger.warn(LOG_TAG, 'Test warn log');
castDebugLogger.info(LOG_TAG, 'Intercepting LOAD request', loadRequestData);
castDebugLogger.debug(LOG_TAG, 'Test debug log');
return loadRequestData;
}
);
Vous pouvez contrôler les messages à afficher dans le calque de débogage en définissant le niveau de journalisation dans loggerLevelByTags
pour chaque balise personnalisée. Par exemple, l'activation d'une balise personnalisée avec le niveau de journalisation cast.framework.LoggerLevel.DEBUG
affiche tous les messages ajoutés avec des messages d'erreur, d'avertissement, d'information et de débogage. Autre exemple : l'activation d'une balise personnalisée avec le niveau WARNING
n'affiche que les messages de journal d'erreur et d'avertissement.
La configuration de loggerLevelByTags
est facultative. Si aucune balise personnalisée n'est configurée pour son niveau d'enregistreur, tous les messages de journal s'affichent dans la superposition de débogage.
Ajoutez le code suivant sous l'appel loggerLevelByEvents
:
...
// Set verbosity level for custom tags.
castDebugLogger.loggerLevelByTags = {
LOG_TAG: cast.framework.LoggerLevel.DEBUG, // display all levels
};
...
8. Utiliser la superposition de débogage
Le journal de débogage Cast fournit une superposition de débogage sur le récepteur pour afficher vos messages de journal personnalisés. Utilisez showDebugLogs
pour activer/désactiver le calque de débogage et clearDebugLogs
pour effacer les messages de journal sur le calque.
Ajoutez le code suivant à l'écouteur d'événements READY
pour prévisualiser la superposition de débogage sur votre récepteur:
// Enable debug logger and show a 'DEBUG MODE' overlay at top left corner.
context.addEventListener(cast.framework.system.EventType.READY, () => {
if (!castDebugLogger.debugOverlayElement_) {
castDebugLogger.setEnabled(true);
// Show debug overlay.
castDebugLogger.showDebugLogs(true);
// Clear log messages on debug overlay.
castDebugLogger.clearDebugLogs();
}
});
9. Utiliser l'outil Command and Control (CaC)
Présentation
L'outil Command and Control (CaC) capture vos journaux et contrôle le calque de débogage.
Vous pouvez connecter votre récepteur à l'outil CaC de deux façons:
Démarrez une nouvelle connexion Cast:
- Ouvrez l'outil CaC, définissez l'ID de l'application du récepteur, puis cliquez sur l'icône Cast pour caster du contenu sur le récepteur.
- Castez une application expéditeur distincte sur le même appareil, avec le même ID d'application destinataire.
- Chargez du contenu multimédia à partir de l'application émettrice. Les messages de journal s'afficheront dans l'outil.
Pour rejoindre une session Cast existante:
- Récupérez l'ID de la session Cast en cours d'exécution à l'aide du SDK du récepteur ou du SDK de l'expéditeur. Du côté du récepteur, saisissez la commande suivante pour obtenir l'ID de session dans la console Débogueur à distance Chrome:
cast.framework.CastReceiverContext.getInstance().getApplicationData().sessionId;
Vous pouvez également obtenir l'ID de session auprès d'un expéditeur Web connecté en procédant comme suit:
cast.framework.CastContext.getInstance().getCurrentSession().getSessionId();
- Saisissez l'ID de session dans l'outil CaC, puis cliquez sur le bouton
RESUME
. - L'icône Cast doit être connectée et commencer à afficher des messages de journal sur l'outil.
À essayer
Nous allons maintenant utiliser l'outil CaC pour afficher les journaux sur votre exemple de récepteur.
- Ouvrez l'outil CaC.
- Saisissez l'ID d'application récepteur de votre application exemple, puis cliquez sur le bouton
SET APP ID
. - Cliquez sur l'icône Cast en haut à gauche, puis sélectionnez votre appareil compatible Google Cast pour ouvrir le récepteur.
- Accédez à l'onglet
LOAD MEDIA
en haut de la page.
- Définissez la case d'option "Type de requête" sur
LOAD
. - Cliquez sur le bouton
SEND REQUEST
pour lire un exemple de vidéo.
- Un exemple de vidéo devrait maintenant être en cours de lecture sur votre appareil. Les journaux des étapes précédentes devraient commencer à s'afficher dans l'onglet "Messages de journal" en bas de l'outil.
Essayez d'explorer les fonctionnalités suivantes pour examiner les journaux et contrôler le récepteur:
- Cliquez sur l'onglet
MEDIA INFO
ouMEDIA STATUS
pour afficher les informations et l'état du contenu multimédia. - Cliquez sur le bouton
SHOW OVERLAY
pour afficher une superposition de débogage sur le récepteur. - Utilisez le bouton
CLEAR CACHE AND STOP
pour actualiser l'application du récepteur et caster à nouveau.
10. Félicitations !
Vous savez maintenant comment ajouter l'enregistreur de débogage Cast à votre application Web Receiver compatible Cast à l'aide de la dernière version du SDK Cast Receiver.
Pour en savoir plus, consultez les guides du développeur Enregistreur de débogage Cast et Outil de commande et de contrôle (CaC).