1. Présentation
Dans cet atelier de programmation, vous allez apprendre à créer une application Web Receiver personnalisée qui utilise l'API Cast Live Breaks.
Qu'est-ce que Google Cast ?
Google Cast permet aux utilisateurs de caster des contenus depuis un appareil mobile sur un téléviseur. Les utilisateurs peuvent ainsi utiliser leur appareil mobile comme télécommande pour la lecture de contenus multimédias sur leur téléviseur.
Le SDK Google Cast vous permet d'étendre votre application afin de contrôler un téléviseur ou un système audio. Le SDK Cast vous permet d'ajouter les composants d'interface utilisateur nécessaires en fonction de 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 ?
À la fin de cet atelier de programmation, vous aurez créé un récepteur Cast qui exploite les API Live.
Points abordés
- Gérer le contenu vidéo en direct dans Cast
- Découvrez comment configurer les différents scénarios de diffusion en direct compatibles avec Cast.
- Ajouter des données de programme à votre diffusion en direct
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, ou un Google Home Hub
Expérience
- Vous devez disposer de connaissances préalables en développement Web.
- Ancienne expérience de création d'applications émetteurs et récepteurs Cast
Comment allez-vous utiliser ce tutoriel ?
Comment évalueriez-vous votre expérience de création d'applications Web ?
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 personnalisé, comme intégré dans cet atelier de programmation, sur les 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 que vous avez obtenue
dans 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. Caster une diffusion en direct simple
Avant de commencer cet atelier de programmation, il peut être utile de consulter le guide du développeur en direct, qui présente les API actives.
Pour l'émetteur, nous allons lancer une session Cast à l'aide du Cactool. Le destinataire est conçu pour lancer automatiquement la diffusion en direct.
Le récepteur est composé de trois fichiers. Un fichier HTML de base appelé receiver.html, qui contient la structure principale de l'application. Vous n'aurez pas besoin de modifier ce fichier. Il existe également un fichier appelé receiver.js, qui contient toute la logique du récepteur. Enfin, il existe également un metadata_service.js qui sera utilisé plus tard dans l'atelier de programmation pour simuler l'obtention des données du guide du programme.
Pour commencer, ouvrez Cactool dans Chrome. Saisissez l'ID de l'application réceptrice qui vous a été fourni dans la Developer Console du SDK Cast, puis cliquez sur Définir.
Le framework d'application de diffusion du récepteur Web (CAF) doit indiquer que le contenu à lire est une diffusion en direct. Pour ce faire, modifiez l'application avec la ligne de code suivante. Ajoutez-le au corps principal de l'intercepteur de charge dans receiver.js:
request.media.streamType = cast.framework.messages.StreamType.LIVE;
La définition du type de flux sur LIVE active l'interface utilisateur en direct de CAF. Le SDK Web Receiver passe automatiquement à la bordure en direct du flux. Les données du guide des programmes en direct n'ont pas encore été ajoutées. La barre de lecture représente donc toute la durée de la plage de recherche du flux.
Enregistrez vos modifications dans receiver.js et lancez une session Cast sur Cactool en cliquant sur l'icône Cast, puis en sélectionnant un appareil Cast cible. La diffusion en direct devrait commencer immédiatement.
6. Ajout de données dans le guide des programmes
CAF prend désormais en charge le contenu en direct pour afficher les données du guide des programmes dans les applications réceptrices et émettrices. Nous encourageons vivement les fournisseurs de contenu à inclure des métadonnées de programmation dans leurs applications réceptrices afin d'améliorer l'expérience utilisateur, en particulier pour les diffusions en direct de longue durée, comme les chaînes de télévision.
CAF permet de définir des métadonnées pour plusieurs programmes dans un seul flux. En définissant des codes temporels et des durées de début sur les objets MediaMetadata, le récepteur met automatiquement à jour les métadonnées affichées sur les expéditeurs et la superposition en fonction de la position actuelle du joueur dans le flux. Vous trouverez ci-dessous des exemples d'API et leur utilisation générale.
// A sample metadata object for a single tv show
const currentShow = new cast.framework.messages.TvShowMediaMetadata();
currentShow.episode = 15;
currentShow.seriesTitle = 'The Odyssey';
currentShow.title = 'Scylla and Charybdis';
currentShow.sectionStartAbsoluteTime = toUnixTimestamp('9:00 PM');
currentShow.sectionDuration = HOUR_IN_SECONDS;
Pour cet atelier de programmation, nous allons utiliser un exemple de service de métadonnées afin de fournir les métadonnées pour notre diffusion en direct. Pour répertorier les métadonnées du programme, créez un conteneur. ContainerMetadata contient une liste d'objets MediaMetadata pour un seul flux multimédia. Chaque objet MediaMetadata représente une seule section du conteneur. Lorsque la tête de lecture se trouve dans les limites d'une section donnée, ses métadonnées sont automatiquement copiées dans l'état du contenu multimédia. Ajoutez le code suivant au fichier receiver.js pour télécharger l'exemple de métadonnées à partir de notre service et fournir le conteneur au CAF.
/**
* Gets the current program guide data from the sample MetadataService. Once
* obtained, the guide information is added using QueueManager.
*/
async function loadGuideData() {
const data = await MetadataService.fetchLiveMetadata();
const containerMetadata = new cast.framework.messages.ContainerMetadata();
containerMetadata.sections = data;
playerManager.getQueueManager().setContainerMetadata(containerMetadata);
}
De plus, ajoutez un appel à la fonction pour charger les données de guide dans l'intercepteur de charge:
loadGuideData();
Enregistrez le fichier receiver.js et lancez une session de diffusion. L'heure de début du programme, l'heure de fin et le titre doivent tous s'afficher à l'écran.
Le destinataire envoie un nouveau message d'état du contenu multimédia à tous les expéditeurs lorsque la tête de lecture passe à une nouvelle section du conteneur, afin que les applications émettrices puissent mettre à jour leur interface utilisateur. Il est recommandé que les applications réceptrices mettent à jour les métadonnées du conteneur dans un intercepteur d'état multimédia pour continuer à transmettre les informations du programme aux applications émettrices. Dans notre exemple de service, nous renvoyons les métadonnées actuelles des programmes, ainsi que celles des deux prochains programmes. Pour mettre à jour les métadonnées d'un flux, créez un conteneur et appelez setContainerMetadata comme dans l'exemple précédent.
7. Désactivation de la recherche
La plupart des flux vidéo sont composés de segments qui contiennent une plage d'images vidéo. Sauf indication contraire, CAF autorise les utilisateurs à effectuer des recherches dans ces segments. Web Receiver peut spécifier cela en appelant quelques API disponibles.
Dans l'intercepteur de chargement, supprimez la commande multimédia compatible avec SEEK. La recherche est alors désactivée sur toutes les interfaces mobiles et tactiles de l'émetteur. Ajoutez le code suivant après les définitions des variables d'instance du SDK dans receiver.js.
// Disable seeking
playerManager.removeSupportedMediaCommands(
cast.framework.messages.Command.SEEK, true);
Pour désactiver les commandes de recherche vocale fournies par l'assistant comme Ok Google, revenir en arrière de 60 secondes, vous devez utiliser l'intercepteur de recherche. Cet intercepteur est appelé à chaque fois qu'une requête de recherche est effectuée. Si la commande multimédia compatible SEEK est désactivée, l'intercepteur rejette la requête. Ajoutez l'extrait de code suivant au fichier receiver.js:
/**
* A seek interceptor is called whenever CAF receives a request to seek to
* a different location in media. This interceptor can be used to modify that
* seek request or disable seeking completely.
*/
playerManager.setMessageInterceptor(
cast.framework.messages.MessageType.SEEK, (seekRequestData) => {
// if the SEEK supported media command is disabled, block seeking
if (!(playerManager.getSupportedMediaCommands() &
cast.framework.messages.Command.SEEK)) {
castDebugLogger.info(TAG, 'Seek blocked.');
return null;
}
return seekRequestData;
});
Enregistrez le fichier receiver.js et lancez une session de diffusion. Vous ne devriez plus pouvoir rechercher de contenu dans la diffusion en direct.
8. Félicitations !
Vous savez maintenant créer une application de réception personnalisée à l'aide de la dernière version du SDK Récepteur Cast.
Pour en savoir plus, consultez le guide du développeur sur la diffusion en direct.