Diese Seite wurde von der Cloud Translation API übersetzt.

Zugriff auf Hardwaregeräte im Web

Wählen Sie die richtige API aus, um mit einem Hardwaregerät Ihrer Wahl zu kommunizieren.

François Beaufort

In diesem Leitfaden erfahren Sie, wie Sie die beste API für die Kommunikation mit einem Hardwaregerät (z. B. Webcam oder Mikrofon) im Web auswählen. „Beste“ bedeutet, dass Sie mit dem geringsten Aufwand alles bekommen, was Sie brauchen. Mit anderen Worten: Sie kennen den allgemeinen Anwendungsfall, den Sie lösen möchten (z.B. Zugriff auf ein Video), wissen aber nicht, welche API Sie verwenden sollen oder ob es eine andere Möglichkeit gibt, das zu erreichen.

Ein Problem, das ich häufig bei Webentwicklern sehe, ist, dass sie sich direkt an Low-Level-APIs wagen, ohne sich mit den APIs höherer Ebene vertraut zu machen, die einfacher zu implementieren sind und eine bessere UX bieten. Daher werden in diesem Leitfaden zuerst APIs mit höherem Level empfohlen. APIs mit niedrigerem Level werden jedoch auch erwähnt, falls die API mit höherem Level nicht Ihren Anforderungen entspricht.

🕹 Eingabeereignisse von diesem Gerät empfangen

Sie können auf Tastatur- und Mauszeiger-Ereignisse warten. Wenn es sich bei diesem Gerät um einen Gamecontroller handelt, kannst du mit der Gamepad API herausfinden, welche Tasten gedrückt und welche Achsen bewegt werden.

Wenn keine dieser Optionen für Sie funktioniert, ist eine Low-Level-API möglicherweise die Lösung. Hier erfahren Sie, wie Sie mit Ihrem Gerät kommunizieren.

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

Mit MediaDevices.getUserMedia() können Sie Live-Audio- und Videostreams von diesem Gerät abrufen. Weitere Informationen zum Aufzeichnen von Audio und Video Außerdem können Sie die Kamera schwenken, neigen und zoomen sowie 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 wie Panning anwenden. Informationen zum Erstellen eines Leistungsprofils für Web Audio-Apps in Chrome

Wenn keine dieser Optionen für Sie funktioniert, ist eine Low-Level-API möglicherweise die Lösung. Hier erfahren Sie, wie Sie mit Ihrem Gerät kommunizieren.

🖨 Auf diesem Gerät drucken

Mit window.print() wird ein Browserdialogfeld geöffnet, in dem der Nutzer dieses Gerät als Ziel für das Drucken des aktuellen Dokuments auswählen kann.

Wenn das nicht funktioniert, ist eine Low-Level-API möglicherweise die Lösung. Sehen Sie sich So kommunizieren Sie mit Ihrem Gerät an, um loszulegen.

🔐 Über dieses Gerät authentifizieren

Verwenden Sie WebAuthn, um mit diesem Hardware-Sicherheitsgerät starke, attestierte und auf den Ursprung beschränkte Public-Key-Anmeldedaten zur Authentifizierung von Nutzern zu erstellen. Sie unterstützt die Verwendung von Bluetooth-, NFC- und USB-Roaming-U2F- oder FIDO2-Authentifikatoren (auch als Sicherheitsschlüssel bezeichnet) sowie einen Plattform-Authentifikator, mit dem sich Nutzer per Fingerabdruck oder Displaysperre authentifizieren können. Weitere Informationen finden Sie unter Erste WebAuthn-App erstellen.

Wenn es sich bei diesem Gerät um eine andere Art von Hardware-Sicherheitsgerät handelt (z.B. eine Wallet für Kryptowährungen), ist eine Low-Level-API möglicherweise die Lösung. Sehen Sie sich So kommunizieren Sie mit Ihrem Gerät an, um loszulegen.

🗄 Auf Dateien auf diesem Gerät zugreifen

Verwenden Sie die File System Access API, um Dateien und Ordner auf dem Gerät des Nutzers zu lesen und Änderungen direkt in diesen Dateien und Ordnern zu speichern. Ist die FileSystem API nicht verfügbar, können Sie die File API verwenden, um den Nutzer aufzufordern, lokale Dateien in einem Browserdialog auszuwählen und dann den Inhalt dieser Dateien zu lesen.

Wenn keine dieser Optionen für Sie funktioniert, ist eine Low-Level-API möglicherweise die Lösung. Hier erfahren Sie, wie Sie mit Ihrem Gerät kommunizieren.

🧲 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, verwenden Sie die Ereignisse DeviceMotion und DeviceOrientation, um auf den integrierten Beschleunigungsmesser, das Gyroskop und den Kompass von Mobilgeräten zuzugreifen.

Wenn das nicht funktioniert, ist eine Low-Level-API möglicherweise die Lösung. Sehen Sie sich So kommunizieren Sie mit Ihrem Gerät an, um loszulegen.

🛰 Auf GPS-Koordinaten auf diesem Gerät zugreifen

Verwende die Geolocation API, um den Breiten- und Längengrad der aktuellen Position des Nutzers auf diesem Gerät abzurufen.

Wenn das nicht funktioniert, ist eine Low-Level-API möglicherweise die Lösung. Sehen Sie sich So kommunizieren Sie mit Ihrem Gerät an, um loszulegen.

🔋 Akku dieses Geräts prüfen

Mit der Battery API können Sie Hostinformationen zum Akkustand abrufen und benachrichtigt werden, wenn sich der Akkustand oder der Ladestatus ändert.

Wenn das nicht funktioniert, ist eine Low-Level-API möglicherweise die Lösung. Sehen Sie sich So kommunizieren Sie mit Ihrem Gerät an, um loszulegen.

📞 Mit diesem Gerät über das Netzwerk kommunizieren

Verwende im lokalen Netzwerk die Remote Playback API, um Audio und/oder Video auf einem Gerät zur Remote-Wiedergabe (z.B. einem Smart-TV oder einem kabellosen Lautsprecher) zu übertragen, oder die Presentation API, um eine Webseite auf einem zweiten Bildschirm zu rendern (z.B. ein sekundäres Display, das über ein HDMI-Kabel verbunden ist, oder ein Smart-TV, das kabellos verbunden ist).

Wenn dieses Gerät einen Webserver bereitstellt, kannst du die Fetch API und/oder WebSockets verwenden, um Daten von diesem Gerät abzurufen, indem du die entsprechenden Endpunkte aufrufst. TCP- und UDP-Sockets sind im Web nicht verfügbar. Sehen Sie sich WebTransport an, um interaktive, bidirektionale und multiplexierte Netzwerkverbindungen zu verarbeiten. WebRTC kann auch verwendet werden, um Daten in Echtzeit über ein Peer-to-Peer-Protokoll mit anderen Browsern auszutauschen.

🧱 So kommunizieren Sie mit Ihrem Gerät

Welche Low-Level-API Sie verwenden sollten, hängt von der Art Ihrer physischen Verbindung zum Gerät ab. Wenn es sich um ein kabelloses Gerät handelt, verwenden Sie Web NFC für drahtlose Verbindungen mit sehr kurzer Reichweite und Web Bluetooth oder Web Serial für drahtlose Geräte in der Nähe.

Mit Web NFC können Sie auf dieses Gerät zugreifen und Daten darauf schreiben, wenn es sich in unmittelbarer Nähe des Geräts des Nutzers befindet (in der Regel 5–10 cm). Mit Tools wie NFC TagInfo von NXP können Sie die Inhalte dieses Geräts zu Reverse-Engineering-Zwecken durchsuchen.
Mit Web Bluetooth können Sie eine Bluetooth Low Energy-Verbindung zu diesem Gerät herstellen. Die Kommunikation sollte ziemlich einfach sein, wenn standardisierte Bluetooth-GATT-Dienste (z. B. der Akkudienst) verwendet werden, da ihr Verhalten gut dokumentiert ist. Falls nicht, müssen Sie entweder eine Hardwaredokumentation für dieses Gerät finden oder es durch Reverse-Engineering analysieren. Sie können dazu externe Tools wie nRF Connect for Mobile und integrierte Browsertools wie die interne Seite about://bluetooth-internals in 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. Bei benutzerdefinierten RFCOMM-basierten Diensten müssen Sie jedoch in der Gerätedokumentation des Herstellers nachsehen, welche UUID für den Dienst an requestPort() übergeben werden muss.

Bei kabelgebundener Verbindung sollten Sie diese APIs in der folgenden Reihenfolge prüfen:

Bei WebHID ist es wichtig, HID-Berichte und Berichtsbeschreibungen über Sammlungen zu verstehen, um dieses Gerät zu verstehen. Das kann ohne Anbieterdokumentation für dieses Gerät schwierig sein. Tools wie Wireshark können Ihnen dabei helfen, sie zu reverse-engineern. Sie können auch die HID Explorer-Web-App verwenden, um Informationen zu HID-Geräten in ein visuell lesbares Format zu dumpen.
Bei Web Serial ist es ohne Herstellerdokumentation für dieses Gerät und die unterstützten Befehle schwierig, aber mit etwas Glück möglich. Das Gerät kann durch Aufzeichnen des Roh-USB-Traffics mit Tools wie Wireshark umgekehrt entworfen werden. Sie können auch die Web-App „Serial Terminal“ verwenden, um mit diesem Gerät zu experimentieren, wenn es ein visuell lesbares Protokoll verwendet.
Bei 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 das Video Exploring WebUSB and its exciting potential (WebUSB und sein spannendes Potenzial) von Suz Hinton an. Sie können dieses Gerät auch durch Reverse-Engineering untersuchen, indem Sie den Roh-USB-Traffic erfassen und USB-Beschreibungen mit externen Tools wie Wireshark und integrierten Browsertools wie der internen Seite about://usb-internals in Chromium-basierten Browsern prüfen.

Danksagungen

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

Foto von Darya Tryfanava auf Unsplash.