Atelier 2 - domleg45/cls420-411-MV GitHub Wiki

Conception d'une manette virtuelle pour Google Chromecast (Remote Player Controller)

Objectifs

  • Concevoir une maquette de la télécommande dans Figma (ou équivalent).
  • Convertir la maquette en HTML5/CSS3 avec javascript (avec ou sans React).
  • Adapter votre interface avec les librairies de Google.
  • Tester son efficacité suivant ces critères: efficacité, efficience, simplicité d’apprentissage, erreurs, feedback, mémorabilité et satisfaction.

Introduction à Chromecast

Chromecast permet aux applications Web Android, iOS et Chrome de "diffuser" des contenus, tels que des vidéos, de l'audio et du partage d'écran (duplication), sur des appareils compatibles Cast tels que:

  • Chromecast
  • Téléviseur avec Chromecast Intégré (également appelé "Téléviseur avec Chromecast Intégré")
  • Enceintes avec Chromecast Intégré (également appelées "Enceintes avec Chromecast Intégré")
  • Écrans connectés (écran LCD tactile portable utilisé comme client léger)
  • Tablettes Android

Dans le modèle d'interaction Cast, le téléphone mobile, la tablette ou l'ordinateur portable sont l'expéditeur, qui sert de télécommande pour contrôler la lecture. Le téléviseur, l'écran ou la tablette sur sa station d'accueil est le récepteur qui reçoit les instructions de l'émetteur et affiche le contenu via sa connexion Internet. Toutes les actions de l'utilisateur (tapotements et balayages) peuvent avoir lieu à la fois sur l'appareil émetteur ou sur le récepteur Web.

La diffusion repose sur la coordination entre plusieurs écrans (l'UI de l'émetteur et celle du destinataire), qui doivent fonctionner ensemble. Par exemple, si vous appuyez sur le bouton d'un appareil mobile pour mettre en pause le contenu, le téléviseur doit indiquer qu'il est en pause, tandis que l'appareil mobile doit fournir un bouton de lecture pour reprendre la lecture.

Points à prendre en compte

En raison de limites liées au matériel et aux ressources, certaines restrictions s'appliquent aux applications compatibles Chromecast:

  • L'appareil Cast est un appareil à faible consommation d'énergie, soumis à des limites de mémoire, de processeur et de GPU. L'application Web Receiver doit donc être aussi légère que possible.

  • Pour les modèles d'interaction avec Chromecast et Chromecast Intégré, vous pouvez créer des onglets, des fenêtres ou des pop-ups à la fois dans - l'application Web Receiver ou l'application émettrice. Ils peuvent également accepter directement les entrées utilisateur, comme les appuis ou les balayages. Par exemple, l'application Web Receiver sur une tablette ou un écran sur sa station d'accueil peut afficher un bouton de pause et recevoir le geste d'un utilisateur. De cette manière, toutes les actions effectuées sur l'application doivent être déclenchées depuis une application réceptrice Web ou une application émettrice.

  • Cast permet de lire un seul flux multimédia simultané dans les balises et , ou de prendre en charge plusieurs pistes audio à l'aide de l'API WebAudio. Un seul élément vidéo peut être actif à la fois dans le DOM. De plus, la composition vidéo, la manipulation, les transformations, les rotations ou le zoom ne sont pas pris en charge.

Principes généraux de conception

Interface expéditeur:

  • L'expéditeur accepte les actions de l'utilisateur, et Web Receiver affiche les informations d'état. Par exemple, si le contenu est mis en pause, le téléviseur doit l'indiquer, tandis que l'appareil mobile indique qu'il est prêt à commencer la lecture (en montrant à l'utilisateur un bouton de lecture, par exemple).
  • Sur Internet, la vitesse est primordiale. Les utilisateurs doivent pouvoir localiser rapidement la commande de diffusion et voir le contenu se lancer immédiatement sur le grand écran. Lors du chargement du contenu, affichez des indicateurs de chargement animés et utilisez des transitions pour accélérer le chargement.

Étapes pour créer un expéditeur pas à pas

    1. Initialiser le Cast SDK
    1. Créer une Session
    1. Assigner le Média à la Session
    1. Ajouter un gestionnaire d'événement pour vos événements
    1. Gérer les événements: Play, Pause, Next, etc.

Référence du guide complet

https://developers.google.com/cast/docs/ux_guidelines?hl=fr

Objet média pour obtenir les états

https://developers.google.com/cast/docs/reference/web_sender/chrome.cast.media.Media?hl=fr

Exemple de codes

https://developers.google.com/cast/docs/sample_apps?hl=fr

Code source : GitHub Hébergé sur un serveur privé temporairement. Chromecast en commande (5-10).

Gabarits de tests

Les équipes

Vous devez idéalement être 2 par équipe. Il est possible d'être seul. Il est aussi possible d'être 3. Par contre, pour ceux qui sont 3, vous devrez livrer un peu plus de contenu.

Github

Il y aura un repository privé par équipe pour la gestion des sources. Faites vous commits individuellement. Faites-le avec régularité pour que l'évaluation soit plus équitable entre coéquipier.

Évaluation - 15% du total de la session

  • 10% Maquette(s), travail de préparation (documents, plans, etc.). Les fichiers doivent être dans github.
  • 15% Sur la qualité du code: Nom des fichiers, nom des variables, organisation des événements.
  • 25% Sur les rapports d'essais et des cycles d'évaluations de votre interface. Les fichiers doivent être dans github.
  • 25% Sur votre apport individuel dans l'équipe. Selon mes observations (communication, commits dans github).
  • 25% Sur le rendu final: Est-ce que l'application fait ce que devait faire selon les critères fixées au départ? Si vous dépassez les attentes, vous avez plus de chance d'amasser le maximum de points.

Date limite: 8 mars 2024

⚠️ **GitHub.com Fallback** ⚠️