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 le dispositif matériel de votre choix.

François Beaufort

L'objectif de ce guide est de vous aider à choisir la meilleure API pour communiquer du matériel (webcam, micro, etc.) sur le Web. Par "le meilleur" C'est vrai. vous donne tout ce dont vous avez besoin avec un minimum de travail. Autrement dit, vous connaissez le cas d'utilisation général que vous souhaitez résoudre (par exemple, accéder à des vidéos), mais vous ne savent pas quelle API utiliser ou vous vous demandez s'il existe un autre moyen d'y parvenir.

Un problème que je vois souvent dans les développeurs Web est de se lancer les API de bas niveau sans connaître les API de niveau supérieur qui sont plus faciles à mettre en œuvre et fournir une meilleure expérience utilisateur. Par conséquent, ce guide commence par recommander d'abord les API de niveau supérieur, mais aussi celles de niveau inférieur au cas où nous avons déterminé que l'API de niveau supérieur ne répondait pas à vos besoins.

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

Essayez d'écouter les événements Clavier et Pointer. Si cet appareil est un jeu utilisez l'API Gamepad pour savoir sur quels boutons les utilisateurs appuient et quels axes se 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 votre transition.

📸 Accédez à des contenus audio et vidéo sur cet appareil

Utilisez MediaDevices.getUserMedia() pour obtenir des flux audio et vidéo en direct à partir de cet et découvrez comment enregistrer des contenus audio et vidéo. Vous pouvez également contrôler le les options de panoramique, d'inclinaison et de zoom de la caméra, ainsi que d'autres paramètres comme la luminosité et le contraste, et même de prendre des photos fixes. L'audio Web peut être utilisé pour ajouter des effets. au contenu audio, créer des visualisations audio ou appliquer des effets spatiaux (comme panoramique). Découvrez 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 votre transition.

🖨 Imprimer sur cet appareil

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

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

🔐 S'authentifier avec cet appareil

Utiliser WebAuthn pour créer une clé publique forte, certifiée et à l'échelle de l'origine à ce dispositif de sécurité matériel pour authentifier les utilisateurs. Compatible l'utilisation des authentificateurs Bluetooth, NFC et USB-U2F ou FIDO2, (appelées clés de sécurité), ainsi qu'un authentificateur de plate-forme qui permet aux utilisateurs s'authentifier avec leurs empreintes ou le verrouillage de l'écran. Consultez la section Créer votre première application WebAuthn.

S'il s'agit d'un autre type de dispositif de sécurité matériel (par exemple, portefeuille de cryptomonnaie), une API de bas niveau peut être la solution. Consultez Découvrir comment communiquer avec votre appareil.

🗄 Accédez aux fichiers sur cet appareil

Utilisez l'API File System Access pour lire et enregistrer les modifications directement dans les fichiers et dossiers sur 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 de navigateur, puis de lire 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 votre transition.

🧲 Accéder aux capteurs sur cet appareil

Utilisez l'API Generic Sensor pour lire les valeurs brutes des capteurs de mouvement (par exemple, accéléromètre ou gyroscope) et aux capteurs d'ambiance (lumière ambiante, magnétomètre). Si elles ne sont pas disponibles, utilisez les méthodes DeviceMotion et DeviceOrientation pour accéder à l'accéléromètre, au gyroscope et à la boussole intégrés appareils mobiles.

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

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

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

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

🔋 Vérifiez 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 charge change.

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

#### Communiquer avec cet appareil via le réseau

Sur le réseau local, utilisez l'API Remote Playback pour diffuser des contenus audio et/ou sur un appareil de lecture à distance (par exemple, une smart TV ou une enceinte sans fil) ou utiliser l'API Presentation pour afficher une page Web sur un deuxième écran (par exemple, un écran secondaire un écran connecté à l'aide d'un câble HDMI ou d'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 certaines données de cet appareil en appuyant sur les points de terminaison appropriés. Alors que le TCP et Les sockets UDP ne sont pas disponibles sur le Web, consultez WebTransport pour gérer interactives, bidirectionnelles et multiplexées. Notez que WebRTC permet également de 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

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

Grâce à la fonctionnalité NFC Web, lisez et écrivez sur cet appareil lorsqu'il se trouve à proximité de l'appareil de l'utilisateur (généralement de 5 à 10 cm ou 2 à 4 pouces). Des outils tels que NFC TagInfo NXP vous permet de parcourir le contenu de cet appareil à des fins de rétro-ingénierie objectifs.
Avec le Web Bluetooth, connectez-vous à cet appareil via une connexion Bluetooth à basse consommation . Il doit être assez facile de communiquer avec quand il utilise services Bluetooth GATT standardisés (par exemple, le service de batterie) comme leur comportemental est bien documenté. Sinon, à ce stade, vous devez soit trouver la documentation matérielle de cet appareil ou faire de la rétro-ingénierie. Vous pouvez Utilisez des outils externes comme nRF Connect pour mobile et des outils de navigateur intégrés. comme la page interne about://bluetooth-internals dans Chromium les navigateurs pour cela. Regardez La rétro-ingénierie d'une ampoule Bluetooth de Uri secoue. Notez que les appareils Bluetooth peuvent également énoncer le HID ou le numéro de série protocoles.
Avec l'option Serial over Bluetooth, communiquez avec les services RFCOMM sur les appareils associés Les appareils Bluetooth classiques tels que le profil standardisé SPP (Serial Port Profile). Pour aux services personnalisés basés sur les RFCOMM, vous devrez consulter documentation du fournisseur concernant l'UUID du service à transmettre à requestPort().

En cas de connexion filaire, consultez ces API dans cet ordre spécifique:

Grâce à WebHID, vous pouvez analyser les rapports HID et les descripteurs de rapport Les collections sont essentielles pour comprendre cet appareil. Il peut s'agir difficile sans la documentation du fournisseur pour cet appareil. Des outils tels que Wireshark peut vous aider à effectuer de la rétro-ingénierie. Vous pouvez également utiliser le HID l'application Web Explorer pour transférer les informations sur les appareils HID dans un format lisible par l'humain.
Avec Web Serial, sans documentation du fournisseur pour cet appareil et quels commandes compatibles avec cet appareil, c'est difficile mais c'est toujours possible avec de la chance les devinettes. La rétro-ingénierie sur cet appareil peut être effectuée en capturant des clés USB brutes le trafic à l'aide d'outils tels que Wireshark. Vous pouvez également utiliser le terminal série application Web pour tester cet appareil s'il utilise un protocole lisible par l'humain.
Avec WebUSB, sans documentation claire pour cet appareil ni le type de connexion USB commandes compatibles avec cet appareil, c'est difficile mais c'est toujours possible avec de la chance les devinettes. Regardez la vidéo de Suz intitulée Explorer WebUSB et son potentiel excitant Indications : Vous pouvez aussi faire de la rétro-ingénierie sur cet appareil en capturant des clés USB brutes le trafic et l'inspection des descripteurs USB à l'aide d'outils externes comme Wireshark. et des outils intégrés au navigateur, comme 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.