Cette page a été traduite par l'API Cloud Translation.

Accéder aux appareils sur le Web

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

François Beaufort

L'objectif de ce guide est de vous aider à choisir la meilleure API pour communiquer avec un appareil matériel (caméra Web, micro, etc.) sur le Web. Par "meilleur", j'entends qu'il vous fournit 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 une autre méthode pour y parvenir.

Un problème que je vois souvent chez les développeurs Web est qu'ils se lancent dans des API de bas niveau sans apprendre 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 d'abord les API de niveau supérieur, mais mentionne également les 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 Clavier et Pointeur. S'il s'agit d'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 fonctionne, une API de bas niveau peut être la solution. Pour commencer, consultez Communiquer avec votre appareil.

📸 Accès 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 enregistrer de l'audio et de la vidéo. Vous pouvez également contrôler le panoramique, l'inclinaison et le zoom de la caméra, ainsi que d'autres paramètres de l'appareil photo, comme la luminosité et le contraste, et même prendre des photos. 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 fonctionne, une API de bas niveau peut être la solution. Pour commencer, consultez Communiquer avec votre appareil.

🖨 Imprimer sur cet appareil

Utilisez window.print() pour ouvrir une boîte de dialogue de 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. Pour commencer, consultez Communiquer avec votre appareil.

🔐 S'authentifier avec cet appareil

Utilisez WebAuthn pour créer des identifiants de clé publique sécurisés, attestés et au niveau de l'origine avec cet appareil de sécurité matériel afin d'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 de dispositif de sécurité matérielle (par exemple, un portefeuille de cryptomonnaies), une API de bas niveau peut être la solution. Pour commencer, consultez Découvrez comment communiquer avec votre appareil.

🗄 Accéder aux fichiers de cet appareil

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

Si aucune de ces options ne fonctionne, une API de bas niveau peut être la solution. Pour commencer, consultez Communiquer avec votre appareil.

🧲 Accéder aux capteurs de cet appareil

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

Si cela ne fonctionne pas pour vous, une API de bas niveau peut être la solution. Pour commencer, consultez Communiquer avec votre appareil.

🛰 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 pour vous, une API de bas niveau peut être la solution. Pour commencer, consultez Communiquer avec votre appareil.

🔋 Vérifier la batterie de cet appareil

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

Si cela ne fonctionne pas pour vous, une API de bas niveau peut être la solution. Pour commencer, consultez Communiquer avec votre appareil.

📞 Communiquer avec cet appareil via le réseau

Sur le réseau local, utilisez l'API Remote Playback pour diffuser de l'audio et/ou de la vidéo sur un appareil de lecture à distance (par exemple, une smart TV ou une enceinte sans fil) ou 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 à partir 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 peer-to-peer.

🧱 Découvrez comment communiquer avec votre appareil.

Le choix de l'API basse couche à utiliser est déterminé par la nature de votre connexion physique à l'appareil. S'il est 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 le 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 by NXP vous permettent de parcourir le contenu de cet appareil à des fins d'ingénierie inverse.
Avec le Bluetooth Web, 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 (tels que le service de batterie), car leur comportement est bien documenté. Si ce n'est pas le cas, vous devez à ce stade 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 tels que la page interne about://bluetooth-internals dans les navigateurs basés sur Chromium. Consultez Reverse-Engineering a Bluetooth Lightbulb (Ingénierie inverse 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 devez consulter la documentation du fournisseur de l'appareil pour connaître l'UUID du service à transmettre à requestPort().

Si vous utilisez une connexion filaire, consultez ces API dans l'ordre suivant:

Avec WebHID, comprendre les rapports HID et les descripteurs de rapports via des collections est essentiel pour comprendre cet appareil. Cela peut être difficile sans la documentation du fournisseur de cet appareil. Des outils tels que Wireshark peuvent vous aider à le rétroconcevoir. Vous pouvez également utiliser l'application Web HID Explorer pour extraire les informations sur les appareils HID dans un format lisible par l'homme.
Avec Web Serial, sans documentation du fournisseur pour cet appareil et les commandes qu'il prend en charge, il est difficile, mais toujours possible, de deviner. Vous pouvez effectuer l'ingénierie inverse de cet appareil en capturant le trafic USB brut à l'aide d'outils tels que Wireshark. Vous pouvez également utiliser l'application Web Terminal série pour tester cet appareil s'il utilise un protocole lisible par l'homme.
Avec WebUSB, sans documentation claire sur cet appareil et les commandes USB qu'il prend en charge, c'est difficile, mais toujours possible avec une bonne estimation. Regardez la vidéo Explorer 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 relu cet article.

Photo de Darya Tryfanava sur Unsplash.