Wählen Sie die entsprechende API aus, um mit einem Hardwaregerät Ihrer Wahl zu kommunizieren.
In diesem Leitfaden erfahren Sie, wie Sie die beste API für die Kommunikation mit einem Hardwaregerät (z.B. Webcam, Mikrofon usw.) im Web auswählen. Mit „am besten“ meine ich, dass Sie damit alles, was Sie brauchen, mit dem geringsten Aufwand erhalten. Mit anderen Worten: Sie kennen den allgemeinen Anwendungsfall, den Sie lösen möchten (z.B. Zugriff auf Videos), wissen aber nicht, welche API Sie verwenden sollen, oder fragen sich, ob es eine andere Möglichkeit gibt, dies zu erreichen.
Ein Problem, das ich bei Webentwicklern häufig sehe, ist, dass sie sich auf Low-Level-APIs stürzen, ohne sich mit den High-Level-APIs vertraut zu machen, die einfacher zu implementieren sind und eine bessere UX bieten. Daher werden in diesem Leitfaden zuerst APIs auf höherer Ebene empfohlen. Es werden aber auch APIs auf niedrigerer Ebene erwähnt, falls Sie feststellen, dass die API auf höherer Ebene Ihre Anforderungen nicht erfüllt.
🕹 Eingabeereignisse von diesem Gerät empfangen
Versuchen Sie, auf Tastatur- und Zeigerereignisse zu warten. Wenn es sich bei diesem Gerät um einen Gamecontroller handelt, können Sie mit der Gamepad API feststellen, welche Tasten gedrückt und welche Achsen bewegt werden.
Wenn keine dieser Optionen für Sie infrage kommt, ist eine Low-Level-API möglicherweise die Lösung. Unter So kommunizierst du mit deinem Gerät findest du Informationen für den Einstieg.
📸 Auf Audio- und Videoinhalte auf diesem Gerät zugreifen
Verwenden Sie MediaDevices.getUserMedia(), um Live-Audio- und -Videostreams von diesem Gerät abzurufen, und informieren Sie sich über das Aufnehmen von Audio- und Videoinhalten. Sie können auch Schwenken, Neigung und Zoom der Kamera steuern, andere Kameraeinstellungen wie Helligkeit und Kontrast anpassen und sogar Standbilder aufnehmen. Mit Web Audio können Sie Audioeffekte hinzufügen, Audiovisualisierungen erstellen oder räumliche Effekte (z. B. Schwenken) anwenden. Hier erfahren Sie, wie Sie die Leistung von Web Audio-Anwendungen in Chrome analysieren.
Wenn keine dieser Optionen für Sie infrage kommt, ist eine Low-Level-API möglicherweise die Lösung. Unter So kommunizierst du mit deinem Gerät findest du Informationen für den Einstieg.
🖨 Auf diesem Gerät drucken
Verwenden Sie window.print(), um ein Browserdialogfeld zu öffnen, in dem der Nutzer dieses Gerät als Ziel zum Drucken des aktuellen Dokuments auswählen kann.
Wenn das nicht funktioniert, ist eine Low-Level-API möglicherweise die Lösung. Unter So kommunizierst du mit deinem Gerät findest du Informationen für den Einstieg.
🔐 Mit diesem Gerät authentifizieren
Mit WebAuthn können Sie mit diesem Hardware-Sicherheitsgerät starke, attestierte und ursprungsbezogene Anmeldedaten mit öffentlichem Schlüssel erstellen, um Nutzer zu authentifizieren. Sie unterstützt die Verwendung von Bluetooth-, NFC- und USB-Roaming-U2F- oder FIDO2-Authentifikatoren (auch als Sicherheitsschlüssel bezeichnet) sowie eines Plattform-Authentifikators, mit dem sich Nutzer per Fingerabdruck oder Displaysperre authentifizieren können. Sehen Sie sich Erste WebAuthn-Anwendung erstellen an.
Wenn es sich bei diesem Gerät um einen anderen Typ von Hardware-Sicherheitsgerät handelt (z.B. eine Krypto-Wallet), kann eine Low-Level-API die Lösung sein. Unter So kommunizieren Sie mit Ihrem Gerät finden Sie Informationen für den Einstieg.
🗄 Auf Dateien auf diesem Gerät zugreifen
Mit der File System Access API können Sie Dateien und Ordner auf dem Gerät des Nutzers lesen und Änderungen direkt darin speichern. Wenn sie nicht verfügbar ist, können Sie die File API verwenden, um den Nutzer aufzufordern, lokale Dateien in einem Browserdialogfeld auszuwählen und dann den Inhalt dieser Dateien zu lesen.
Wenn keine dieser Optionen für Sie infrage kommt, ist eine Low-Level-API möglicherweise die Lösung. Unter So kommunizierst du mit deinem Gerät findest du Informationen für den Einstieg.
🧲 Auf Sensoren auf diesem Gerät zugreifen
Verwenden Sie die Generic Sensor API, um Rohsensorwerte von Bewegungssensoren (z.B. Beschleunigungsmesser oder Gyroskop) und Umgebungssensoren (z.B. Umgebungslicht, Magnetometer) zu lesen. Wenn diese nicht verfügbar sind, können Sie die Ereignisse DeviceMotion und DeviceOrientation verwenden, um auf den integrierten Beschleunigungsmesser, das Gyroskop und den Kompass in Mobilgeräten zuzugreifen.
Wenn das nicht funktioniert, ist eine Low-Level-API möglicherweise die Lösung. Unter So kommunizierst du mit deinem Gerät findest du Informationen für den Einstieg.
🛰 GPS-Koordinaten auf diesem Gerät abrufen
Mit der Geolocation API können Sie den Längen- und Breitengrad der aktuellen Position des Nutzers auf diesem Gerät abrufen.
Wenn das nicht funktioniert, ist eine Low-Level-API möglicherweise die Lösung. Unter So kommunizierst du mit deinem Gerät findest du Informationen für den Einstieg.
🔋 Akkustand dieses Geräts prüfen
Mit der Battery API können Sie Hostinformationen zum Akkuladestand abrufen und sich benachrichtigen lassen, wenn sich der Akkuladestand oder der Ladestatus ändert.
Wenn das nicht funktioniert, ist eine Low-Level-API möglicherweise die Lösung. Unter So kommunizierst du mit deinem Gerät findest du Informationen für den Einstieg.
📞 Über das Netzwerk mit diesem Gerät kommunizieren
Im lokalen Netzwerk kannst du die Remote Playback API verwenden, um Audio- und/oder Videoinhalte auf einem Remote-Wiedergabegerät (z. B. einem Smart-TV oder einem kabellosen Lautsprecher) zu übertragen. Alternativ kannst du die Presentation API verwenden, um eine Webseite auf einem zweiten Bildschirm zu rendern (z. B. einem sekundären Display, das über ein HDMI-Kabel verbunden ist, oder einem Smart-TV, der kabellos verbunden ist).
Wenn dieses Gerät einen Webserver bereitstellt, verwende die Fetch API und/oder WebSockets, um Daten von diesem Gerät abzurufen, indem du die entsprechenden Endpunkte aufrufst. TCP- und UDP-Sockets sind im Web nicht verfügbar. Mit WebTransport können Sie jedoch interaktive, bidirektionale und gemultiplexte Netzwerkverbindungen verarbeiten. WebRTC kann auch verwendet werden, um Daten in Echtzeit mit anderen Browsern über ein Peer-to-Peer-Protokoll zu übertragen.
🧱 So kommunizierst du mit deinem Gerät
Die Entscheidung, welche Low-Level-API Sie verwenden sollten, hängt von der Art der physischen Verbindung zum Gerät ab. Wenn es sich um eine kabellose Verbindung handelt, sehen Sie sich Web NFC für kabellose Verbindungen mit sehr kurzer Reichweite und Web Bluetooth oder Web Serial für kabellose Geräte in der Nähe an.
Mit Web NFC kannst du Daten auf diesem Gerät lesen und schreiben, wenn es sich in unmittelbarer Nähe des Nutzergeräts befindet (normalerweise 5–10 cm). Mit Tools wie NFC TagInfo von NXP kannst du den Inhalt dieses Geräts für Reverse Engineering-Zwecke durchsuchen.
Mit Web Bluetooth kannst du über eine Bluetooth Low Energy-Verbindung eine Verbindung zu diesem Gerät herstellen. Die Kommunikation mit dem Gerät sollte recht einfach sein, wenn es standardisierte Bluetooth-GATT-Dienste (z. B. den Batteriedienst) verwendet, da deren Verhalten gut dokumentiert ist. Andernfalls müssen Sie entweder die Hardwaredokumentation für dieses Gerät finden oder es per Reverse Engineering analysieren. Dazu können Sie externe Tools wie nRF Connect for Mobile und integrierte Browsertools wie die interne Seite
about://bluetooth-internalsin Chromium-basierten Browsern verwenden. Sehen Sie sich Reverse-Engineering a Bluetooth Lightbulb von Uri Shaked an. Bluetooth-Geräte können auch die HID- oder seriellen Protokolle verwenden.Mit Serial over Bluetooth können Sie mit RFCOMM-Diensten auf gekoppelten Bluetooth Classic-Geräten wie dem standardisierten Serial Port Profile (SPP) kommunizieren. Für benutzerdefinierte RFCOMM-basierte Dienste musst du jedoch die Dokumentation des Geräteherstellers konsultieren, um die Dienst-UUID zu finden, die an
requestPort()übergeben werden muss.
Wenn es sich um ein kabelgebundenes Gerät handelt, prüfe die folgenden APIs in dieser Reihenfolge:
Bei WebHID ist es wichtig, HID-Berichte und Berichtsdeskriptoren über Sammlungen zu verstehen, um dieses Gerät zu verstehen. Ohne Anbieterdokumentation für dieses Gerät kann das schwierig sein. Tools wie Wireshark können Ihnen beim Reverse Engineering helfen. Sie können auch die HID Explorer-Web-App verwenden, um Informationen zu HID-Geräten in ein menschenlesbares Format zu übertragen.
Mit Web Serial ist es ohne Herstellerdokumentation für dieses Gerät und ohne Informationen darüber, welche Befehle dieses Gerät unterstützt, schwierig, aber mit etwas Glück möglich. Das Reverse Engineering dieses Geräts kann durch Erfassen des unformatierten USB-Traffics mit Tools wie Wireshark erfolgen. Sie können auch die Web-App „Serial Terminal“ verwenden, um mit diesem Gerät zu experimentieren, wenn es ein menschenlesbares Protokoll verwendet.
Mit WebUSB ist es ohne klare Dokumentation für dieses Gerät und die von ihm unterstützten USB-Befehle schwierig, aber mit etwas Glück möglich. Sehen Sie sich Exploring WebUSB and its exciting potential von Suz Hinton an. Sie können dieses Gerät auch per Reverse Engineering analysieren, indem Sie den unformatierten USB-Traffic erfassen und USB-Deskriptoren mit externen Tools wie Wireshark und integrierten Browsertools wie der internen Seite
about://usb-internalsin Chromium-basierten Browsern prüfen.
Danksagungen
Vielen Dank an Reilly Grant, Thomas Steiner und Kayce Basques für die Überprüfung dieses Artikels.