Zugriff auf Hardwaregeräte im Web

Wählen Sie die entsprechende API für die Kommunikation mit einem Hardwaregerät Ihrer Wahl aus.

François Beaufort
François Beaufort

Dieser Leitfaden soll Sie bei der Auswahl der besten API für die Kommunikation mit einem wie eine Webcam oder ein Mikrofon. Von „beste“ Ich meine es ernst alles, was Sie brauchen, mit minimalem Arbeitsaufwand. Mit anderen Worten: Sie kennen den allgemeinen Anwendungsfall, den Sie lösen möchten (z.B. Zugriff auf Videos), aber Sie kennen wissen nicht, welche API sie verwenden sollen, oder fragen sich, ob es eine andere Möglichkeit gibt.

Webentwickler stoßen häufig auf Probleme, ohne sich mit den übergeordneten APIs vertraut zu machen, um eine bessere Nutzererfahrung zu bieten. Daher empfehlen wir in diesem Leitfaden übergeordneten APIs zuerst, aber es werden auch untergeordnete APIs erwähnt, falls Sie festgestellt, dass die übergeordnete API Ihre Anforderungen nicht erfüllt.

🕹 Eingabeereignisse von diesem Gerät empfangen

Warten Sie auf Ereignisse vom Typ Keyboard und Pointer. Wenn es sich bei diesem Gerät um ein Spiel handelt Controller, verwenden Sie die Gamepad API, um zu erfahren, welche Tasten gedrückt werden welche Achsen sich bewegten.

Wenn keine dieser Optionen für Sie geeignet ist, ist möglicherweise eine Low-Level-API die richtige Lösung. Sieh dir den Artikel So kannst du mit deinem Gerät kommunizieren an, um loszulegen.

📸 Auf Audio- und Videoinhalte auf diesem Gerät zugreifen

Verwenden Sie MediaDevices.getUserMedia(), um Live-Audio und Videostreams von diesem Gerät zu erhalten. und Informationen zur Audio- und Videoaufnahme Sie können auch die Schwenken, Neigen und Zoomen der Kamera sowie andere Kameraeinstellungen wie Helligkeit und Kontrast und sogar Standbilder machen. Mit Web Audio kannst du Effekte hinzufügen Audiovisualisierungen zu erstellen oder räumliche Effekte wie Schwenken). Weitere Informationen zum Erstellen von Profilen für die Leistung von Web Audio-Apps in Chrome .

Wenn keine dieser Optionen für Sie geeignet ist, ist möglicherweise eine Low-Level-API die richtige Lösung. Sieh dir den Artikel So kannst du mit deinem Gerät kommunizieren an, um loszulegen.

🖨 Auf diesem Gerät drucken

Verwenden Sie window.print(), um ein Browserfenster zu öffnen, in dem der Nutzer diese Option auswählen kann. Gerät als Ziel zum Drucken des aktuellen Dokuments festlegen.

Sollte dies für Sie nicht in Frage kommen, kann eine Low-Level-API die Lösung sein. Zur Kasse Hier erfährst du, wie du mit deinem Gerät kommunizieren kannst, um loszulegen.

🔐 Mit diesem Gerät authentifizieren

Verwenden Sie WebAuthn, um einen starken, attestierten und ursprungsbezogenen öffentlichen Schlüssel zu erstellen Anmeldedaten für dieses Hardware-Sicherheitsgerät, um Nutzer zu authentifizieren. Unterstützt die Verwendung von U2F- oder FIDO2-Authenticatoren über Bluetooth, NFC und USB-Roaming auch Sicherheitsschlüssel genannt, sowie Plattform-Authentifikatoren, mit denen Nutzer sich per Fingerabdruck oder Displaysperre authentifizieren. Unter So erstellen Sie ein erste WebAuthn-Anwendung.

Wenn dieses Gerät eine andere Art von Hardware-Sicherheitsgerät ist (z.B. Krypto-Wallet), könnte eine Low-Level-API die Lösung sein. Probieren Sie Discover wie Sie mit Ihrem Gerät kommunizieren können, um loszulegen.

🗄 Auf Dateien auf diesem Gerät zugreifen

Mit der File System Access API können Sie Änderungen direkt in Dateien lesen und speichern und Ordner auf dem Gerät des Nutzers. Ist dies nicht der Fall, fragen Sie über die File API nach Nutzer können lokale Dateien in einem Browser-Dialogfeld auswählen und dann den Inhalt lesen dieser Dateien.

Wenn keine dieser Optionen für Sie geeignet ist, ist möglicherweise eine Low-Level-API die richtige Lösung. Sieh dir den Artikel So kannst du mit deinem Gerät kommunizieren an, um loszulegen.

🧲 Auf die Sensoren dieses Geräts zugreifen

Verwenden Sie die Generic Sensor API, um rohe Sensorwerte von Bewegungssensoren (z.B. Beschleunigungsmesser oder Gyroskop) und Umgebungssensoren (z.B. Umgebungslicht, Magnetometer). Falls nicht verfügbar, verwenden Sie DeviceMotion und DeviceOrientation. können Sie den integrierten Beschleunigungsmesser, das Gyroskop und den Kompass nutzen, Mobilgeräten.

Wenn dies für Sie nicht in Frage kommt, kann eine Low-Level-API die Lösung sein. Zur Kasse Hier erfährst du, wie du mit deinem Gerät kommunizieren kannst, um loszulegen.

🛰 Auf GPS-Koordinaten auf diesem Gerät zugreifen

Verwenden Sie die Geolocation API, um Breiten- und Längengrad der aktuelle Position auf diesem Gerät.

Wenn dies für Sie nicht in Frage kommt, kann eine Low-Level-API die Lösung sein. Zur Kasse Hier erfährst du, wie du mit deinem Gerät kommunizieren kannst, um loszulegen.

🔋 Akkustand dieses Geräts prüfen

Verwenden Sie die Battery API, um Hostinformationen zum Akkuladestand und werden benachrichtigt, wenn sich der Akkustand oder der Ladestatus ändern.

Wenn dies für Sie nicht in Frage kommt, kann eine Low-Level-API die Lösung sein. Zur Kasse Hier erfährst du, wie du mit deinem Gerät kommunizieren kannst, um loszulegen.

🌎 Mit diesem Gerät über das Netzwerk kommunizieren

Verwenden Sie im lokalen Netzwerk die Remote Wiedergabe API, um Audio zu übertragen und/oder auf einem Remote-Wiedergabegerät (z.B. Smart-TV oder kabellosen Lautsprecher) wiedergeben oder die Presentation API, um eine Webseite auf einem zweiten Bildschirm (z.B. einem sekundären Bildschirm) zu rendern Bildschirm, der mit einem HDMI-Kabel oder kabellos mit einem Smart-TV verbunden ist).

Wenn das Gerät einen Webserver bereitstellt, verwenden Sie die Fetch API und/oder WebSockets, um können Daten von diesem Gerät abrufen, indem sie die entsprechenden Endpunkte erreichen. Während TCP und UDP-Sockets sind im Web nicht verfügbar. Informieren Sie sich über WebTransport, interaktive, bidirektionale und Multiplex-Netzwerkverbindungen. Beachten Sie, dass WebRTC kann auch verwendet werden, um Daten in Echtzeit mit anderen Browsern zu kommunizieren. mit einem Peer-to-Peer-Protokoll.

🧱 Entdecke, wie du mit deinem Gerät kommunizieren kannst

Welche Low-Level-API Sie verwenden sollten, hängt von der Art des Verbindung zum Gerät herstellen. Wenn es kabellos ist, probieren Sie Web-NFC für WLAN-Verbindungen mit sehr kurzer Reichweite und Web Bluetooth für kabellose Verbindungen in der Nähe Geräte.

  • Mit Web-NFC lesen und schreiben Sie auf diesem Gerät, wenn es sich in der Nähe von Gerät des Nutzers (normalerweise 5–10 cm) Tools wie NFC TagInfo von NXP ermöglicht es Ihnen, den Inhalt dieses Geräts für Reverse Engineering zu durchsuchen. zu verstehen.

  • Verbinde dich mit Web Bluetooth über Bluetooth Low Energy mit diesem Gerät Es sollte ziemlich einfach sein, mit ihr zu kommunizieren, wenn sie standardisierten Bluetooth-GATT-Diensten wie Akkudienste Verhalten umfassend dokumentiert ist. Falls nicht, müssen Sie an dieser Stelle entweder oder ein Reverse-Engineering durchführen. Sie können Externe Tools wie nRF Connect for Mobile und integrierte Browsertools verwenden z. B. die interne Seite about://bluetooth-internals in Chromium Browser dafür. Schauen Sie sich das Video Reverse-Engineering a Bluetooth Glühbirne Uri geschüttelt. Beachten Sie, dass Bluetooth-Geräte auch die HID- oder Seriennummer Protokolle.

Sehen Sie sich bei Verwendung eines Kabels diese APIs in dieser spezifischen Reihenfolge an:

  1. Mit WebHID können Sie HID-Berichte und Berichtsdeskriptoren durch Sammlungen sind wichtig, um dieses Gerät zu verstehen. Dabei kann es sich um schwierig ist, ohne die Anbieterdokumentation für dieses Gerät. Tools wie Wireshark kann Ihnen beim Reverse-Engineering helfen. Sie können auch das HID-Protokoll Explorer-Webanwendung zum Dump von Informationen zu HID-Geräten in einem visuell lesbaren Format

  2. Mit Web Serial, ohne Anbieterdokumentation für dieses Gerät und was unterstützt dieses Gerät, ist es schwierig, aber mit Glück zu raten. Das Reverse-Engineering dieses Geräts kann durch Erfassen der RAW-USB-Sticks mit Tools wie Wireshark. Sie können auch das serielle Terminal verwenden Web-App können Sie mit diesem Gerät experimentieren, wenn auf dem Gerät ein visuell lesbares Protokoll verwendet wird.

  3. Mit WebUSB, ohne eindeutige Dokumentation für dieses Gerät und unterstützt dieses Gerät, ist es schwierig, aber mit Glück zu raten. Video: Entdecken von WebUSB und das aufregende Potenzial von Suz Hinton. Sie können das Gerät auch zurückentwickeln, indem Sie RAW-USB-Ports erfassen. Traffic und Prüfung von USB-Deskriptoren mit externen Tools wie Wireshark und integrierte Browser-Tools wie die interne Seite about://usb-internals in Chromium-basierten Browsern.

Danksagungen

Vielen Dank an Reilly Grant, Thomas Steiner und Kayce Basques für die Rezension dieses Artikels.

Foto von Darya Tryfanava auf Unsplash.