Appareils avec interface humaine sur le Web: quelques exemples rapides

Connexion à des appareils inhabituels via votre application

Joe Medley
Joe Medley
Matt Reynolds
Matt Reynolds

Qu'est-ce que l'API WebHID ?

De nombreux périphériques d'interface humaine (HID) sont trop récents, trop anciens ou trop rares pour être accessibles par les pilotes de périphériques des systèmes. L'API WebHID résout ce problème en permettant d'implémenter une logique spécifique à l'appareil en JavaScript.

Cas d'utilisation suggérés pour l'API WebHID

Un HID reçoit des entrées ou fournit une sortie aux humains. Les claviers, les dispositifs de pointage (souris, écrans tactiles, etc.) et les manettes de jeu sont des exemples de périphériques. Le protocole HID permet d'accéder à ces appareils sur des ordinateurs de bureau à l'aide de pilotes de système d'exploitation. La plate-forme Web prend en charge les HID grâce à ces pilotes.

L'impossibilité d'accéder à des périphériques HID peu courants est particulièrement pénible en ce qui concerne la prise en charge des manettes de jeu. Les manettes de jeu conçues pour les PC utilisent souvent HID pour les entrées (boutons, joysticks, déclencheurs) et les sorties (LED, rumble). Toutefois, les entrées et les sorties des manettes de jeu ne sont pas bien standardisées, et les navigateurs Web nécessitent souvent une logique personnalisée pour des appareils spécifiques. Cette approche n'est pas durable et se traduit par une compatibilité médiocre avec la longue traîne d'appareils plus anciens et peu courants. Il oblige également le navigateur à dépendre des bizarreries présentes dans le comportement de certains appareils.

Démonstrations

Si vous souhaitez en savoir plus sur le fonctionnement de l'un de ces exemples, sachez que leur code source est disponible sur GitHub. La vidéo explicative inclut un exemple de code épuré.

Rétroéclairage du clavier MacBook Pro

Le principal obstacle à ces démonstrations est le manque d'accès à l'appareil. Heureusement, si vous avez un MacBook Pro avec TouchBar, vous n'avez rien à acheter. Cette démonstration vous permet d'utiliser l'API directement depuis votre ordinateur portable. Il montre également comment WebHID peut être utilisé pour déverrouiller la fonctionnalité des appareils intégrés, et pas seulement des périphériques.

Auteur:FWeinb
Démonstration/Source:Rétroéclairage du clavier

Manettes de jeu

Manette sans fil PlayStation 4

La prochaine étape est quelque chose que moins d'entre vous sont susceptibles d'avoir. DualShock 4 de Sony est une manette sans fil pour les consoles de jeu PlayStation 4.

La démo DualShock 4 utilise WebHID pour recevoir les rapports d'entrée bruts de DualShock 4 et fournit une API de haut niveau permettant d'accéder au gyroscope, à l'accéléromètre, au pavé tactile, aux boutons et aux joysticks de la manette. Il est également compatible avec le rumble et la définition de la couleur d'une LED RVB située dans la manette.

Auteur:TheBITLINK
Démonstration:Démonstration de DualShock 4 (source)

Manettes Joy-Con Nintendo Switch

Jouez au jeu hors connexion 🦖 sur Chrome en sautant avec une manette Nintendo Switch Joy-Con dans votre poche. Cette démonstration est fournie par Joy-Con WebHID, un pilote WebHID pour les manettes Joy-Con de Nintendo Switch.

Auteur:Thomas Steiner
Démonstration: Chrome Dino WebHID (source de démonstration, source du pilote)

Bande BlinkStick

La bande BlinkStick est composée de huit LED RVB conformes à la norme HID. La démonstration permet à l'utilisateur de choisir parmi plusieurs clignotements tels que le clignotement, le clignotement et le scanner Larson (alias Cylon).

Auteur:Robat Williams
Démonstration: blinkstick-strip (source)

À quoi sert cette démonstration ? (Attendez.) Il clignote. Trois démos utilisent le voyant de notification USB blink(1).

blink(1) est simple et bien documenté, ce qui en fait une excellente option pour commencer à utiliser HID.

Auteur:Tod E. Kurt
Démonstrations: blink(1) (source)

Remerciements

Merci à Pete LePage et Kayce Basques pour leur avis sur cet article.

Photo par Ugur Akdemir, publiée sur Unsplash