Accéder aux appareils sur le Web

Choisissez l'API appropriée pour communiquer avec l'appareil de votre choix.

François Beaufort
François Beaufort
GitHub

L'objectif de ce guide est de vous aider à choisir la meilleure API pour communiquer avec un appareil matériel (par exemple, une webcam, un micro, etc.) sur le Web. Par "meilleure", j'entends qu'elle vous donne tout ce dont vous avez besoin avec le moins de travail possible. En d'autres termes, vous connaissez le cas d'utilisation général que vous souhaitez résoudre (par exemple, accéder à une vidéo), mais vous ne savez pas quelle API utiliser ou vous vous demandez s'il existe un autre moyen d'y parvenir.

Un problème que je rencontre souvent chez les développeurs Web est qu'ils se lancent dans des API de bas niveau sans se renseigner sur les API de niveau supérieur, qui sont plus faciles à implémenter et offrent une meilleure expérience utilisateur. Par conséquent, ce guide commence par recommander des API de niveau supérieur, mais mentionne également des API de niveau inférieur au cas où vous auriez déterminé que l'API de niveau supérieur ne répond pas à vos besoins.

🕹 Recevoir des événements d'entrée de cet appareil

Essayez d'écouter les événements Keyboard et Pointer. Si cet appareil est une manette de jeu, utilisez l'API Gamepad pour savoir quels boutons sont enfoncés et quels axes sont déplacés.

Si aucune de ces options ne vous convient, une API de bas niveau peut être la solution. Consultez Découvrir comment communiquer avec votre appareil pour commencer.

📸 Accéder aux contenus audio et vidéo de cet appareil

Utilisez MediaDevices.getUserMedia() pour obtenir des flux audio et vidéo en direct à partir de cet appareil et découvrez comment capturer du contenu audio et vidéo. Vous pouvez également contrôler le panoramique, l'inclinaison et le zoom de la caméra, ainsi que d'autres paramètres tels que la luminosité et le contraste, et même prendre des images fixes. Web Audio permet d'ajouter des effets à l'audio, de créer des visualisations audio ou d'appliquer des effets spatiaux (comme le panoramique). Découvrez également comment profiler les performances des applications Web Audio dans Chrome.

Si aucune de ces options ne vous convient, une API de bas niveau peut être la solution. Consultez Découvrir comment communiquer avec votre appareil pour commencer.

🖨 Imprimer sur cet appareil

Utilisez window.print() pour ouvrir une boîte de dialogue du navigateur permettant à l'utilisateur de sélectionner cet appareil comme destination pour imprimer le document actuel.

Si cela ne fonctionne pas, une API de bas niveau peut être la solution. Consultez Découvrir comment communiquer avec votre appareil pour commencer.

🔐 S'authentifier avec cet appareil

Utilisez WebAuthn pour créer un identifiant de clé publique fort, attesté et au niveau de l'origine avec cet appareil de sécurité matériel pour authentifier les utilisateurs. Elle est compatible avec l'utilisation d'authentificateurs U2F ou FIDO2 Bluetooth, NFC et USB (également appelés "clés de sécurité") ainsi qu'avec l'authentificateur de plate-forme, qui permet aux utilisateurs de s'authentifier avec leur empreinte ou le verrouillage de l'écran. Consultez Créer votre première application WebAuthn.

Si cet appareil est un autre type d'appareil de sécurité matériel (par exemple, un portefeuille de cryptomonnaie), une API de bas niveau peut être la solution. Pour commencer, consultez Découvrir comment communiquer avec votre appareil.

🗄 Accéder aux fichiers sur cet appareil

Utilisez l'API File System Access pour lire et enregistrer les modifications directement dans les fichiers et dossiers de l'appareil de l'utilisateur. Si elle n'est pas disponible, utilisez l'API File pour demander à l'utilisateur de sélectionner des fichiers locaux dans une boîte de dialogue du navigateur, puis lisez le contenu de ces fichiers.

Si aucune de ces options ne vous convient, une API de bas niveau peut être la solution. Consultez Découvrir comment communiquer avec votre appareil pour commencer.

🧲 Accéder aux capteurs de cet appareil

Utilisez l'API Generic Sensor pour lire les valeurs brutes des capteurs de mouvement (par exemple, l'accéléromètre ou le gyroscope) et des capteurs environnementaux (par exemple, la luminosité ambiante ou le magnétomètre). Si elle n'est pas disponible, utilisez les événements DeviceMotion et DeviceOrientation pour accéder à l'accéléromètre, au gyroscope et à la boussole intégrés aux appareils mobiles.

Si cela ne fonctionne pas, une API de bas niveau peut être la solution. Consultez Découvrir comment communiquer avec votre appareil pour commencer.

🛰 Accéder aux coordonnées GPS sur cet appareil

Utilisez l'API Geolocation pour obtenir la latitude et la longitude de la position actuelle de l'utilisateur sur cet appareil.

Si cela ne fonctionne pas, une API de bas niveau peut être la solution. Consultez Découvrir comment communiquer avec votre appareil pour commencer.

🔋 Vérifiez la batterie de cet appareil

Utilisez l'API Battery pour obtenir des informations sur le niveau de charge de la batterie de l'hôte et être averti lorsque le niveau de batterie ou l'état de charge changent.

Si cela ne fonctionne pas, une API de bas niveau peut être la solution. Consultez Découvrir comment communiquer avec votre appareil pour commencer.

📞 Communiquer avec cet appareil sur le réseau

Sur le réseau local, utilisez l'API Remote Playback pour diffuser du contenu audio et/ou vidéo sur un appareil de lecture à distance (par exemple, une smart TV ou une enceinte sans fil) ou utilisez l'API Presentation pour afficher une page Web sur un deuxième écran (par exemple, un écran secondaire connecté avec un câble HDMI ou une smart TV connectée sans fil).

Si cet appareil expose un serveur Web, utilisez l'API Fetch et/ou WebSockets pour récupérer des données de cet appareil en accédant aux points de terminaison appropriés. Bien que les sockets TCP et UDP ne soient pas disponibles sur le Web, consultez WebTransport pour gérer les connexions réseau interactives, bidirectionnelles et multiplexées. Notez que WebRTC peut également être utilisé pour communiquer des données en temps réel avec d'autres navigateurs à l'aide d'un protocole pair à pair.

🧱 Découvrez comment communiquer avec votre appareil

Le choix de l'API de bas niveau à utiliser dépend de la nature de votre connexion physique à l'appareil. S'il s'agit d'une connexion sans fil, consultez Web NFC pour les connexions sans fil à très courte portée, et Web Bluetooth ou Web Serial pour les appareils sans fil à proximité.

  • Avec Web NFC, lisez et écrivez sur cet appareil lorsqu'il se trouve à proximité de l'appareil de l'utilisateur (généralement entre 5 et 10 cm). Des outils tels que NFC TagInfo de NXP vous permettent de parcourir le contenu de cet appareil à des fins de rétro-ingénierie.

  • Avec Web Bluetooth, connectez-vous à cet appareil via une connexion Bluetooth à basse consommation. Il devrait être assez facile de communiquer avec lui lorsqu'il utilise des services GATT Bluetooth standardisés (comme le service de batterie), car leur comportement est bien documenté. Sinon, vous devrez trouver de la documentation sur le matériel de cet appareil ou procéder à une rétro-ingénierie. Pour ce faire, vous pouvez utiliser des outils externes tels que nRF Connect pour mobile et des outils de navigateur intégrés, comme la page interne about://bluetooth-internals dans les navigateurs basés sur Chromium. Consultez l'article Reverse-Engineering a Bluetooth Lightbulb (Rétro-ingénierie d'une ampoule Bluetooth) d'Uri Shaked. Notez que les appareils Bluetooth peuvent également utiliser les protocoles HID ou série.

  • Avec Serial over Bluetooth, communiquez avec les services RFCOMM sur les appareils Bluetooth Classic associés, comme le profil de port série (SPP) standardisé. Toutefois, pour les services personnalisés basés sur RFCOMM, vous devrez consulter la documentation du fournisseur de l'appareil pour obtenir l'UUID du service à transmettre à requestPort().

Si l'appareil est filaire, vérifiez ces API dans l'ordre suivant :

  1. Avec WebHID, il est essentiel de comprendre les rapports HID et les descripteurs de rapport via des collections pour comprendre cet appareil. Cela peut être difficile sans la documentation du fournisseur de cet appareil. Des outils tels que Wireshark peuvent vous aider à effectuer une rétro-ingénierie. Vous pouvez également utiliser l'application Web HID Explorer pour vider les informations des appareils HID dans un format lisible par l'humain.

  2. Avec Web Serial, sans documentation du fournisseur pour cet appareil et les commandes qu'il accepte, c'est difficile, mais toujours possible avec un peu de chance. La rétro-ingénierie de cet appareil peut être effectuée en capturant le trafic USB brut avec des outils tels que Wireshark. Vous pouvez également utiliser l'application Web Serial Terminal pour tester cet appareil s'il utilise un protocole lisible par l'humain.

  3. Avec WebUSB, sans documentation claire pour cet appareil et les commandes USB qu'il accepte, c'est difficile, mais toujours possible en devinant. Regardez Exploring WebUSB and its exciting potential (Découvrir WebUSB et son potentiel passionnant) de Suz Hinton. Vous pouvez également effectuer une rétro-ingénierie de cet appareil en capturant le trafic USB brut et en inspectant les descripteurs USB à l'aide d'outils externes tels que Wireshark et d'outils de navigateur intégrés tels que la page interne about://usb-internals dans les navigateurs basés sur Chromium.

Remerciements

Merci à Reilly Grant, Thomas Steiner et Kayce Basques d'avoir examiné cet article.