Diese Seite wurde von der Cloud Translation API übersetzt.

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

Dieser Leitfaden soll Ihnen dabei helfen, die beste API für die Kommunikation mit einem Hardwaregerät (z.B. Webcam, Mikrofon usw.) im Web auszuwählen. Mit „Am besten“ meine ich, dass Sie mit kürzester Arbeit alles finden, was Sie brauchen. Sie kennen also 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 dazu gibt.

Ein Problem, auf das ich häufig bei Webentwicklern stößt, besteht darin, in Low-Level-APIs einzusteigen, ohne etwas über die APIs auf höherer Ebene zu erfahren, die einfacher zu implementieren und eine bessere UX bieten. Daher wird in diesem Leitfaden zuerst empfohlen, APIs auf höherer Ebene zu empfehlen, aber es werden auch untergeordnete APIs erwähnt, falls Sie festgestellt haben, dass die API der höheren Ebene Ihre Anforderungen nicht erfüllt.

🕹 Eingabeereignisse von diesem Gerät empfangen

Prüfen Sie, ob die Ereignisse Keyboard und Pointer erfasst werden. Wenn dieses Gerät ein Gamecontroller ist, verwenden Sie die Gamepad API, um zu wissen, welche Tasten gedrückt und welche Achsen bewegt werden.

Wenn keine dieser Optionen für Sie geeignet ist, ist möglicherweise eine Low-Level-API die Lösung. Unter Finde heraus, wie du mit deinem Gerät kommunizieren kannst, kannst du dich auf den Weg machen.

📸 Zugriff auf Audio und Video von diesem Gerät

Verwenden Sie MediaDevices.getUserMedia(), um Live-Audio- und -Videostreams von diesem Gerät zu erhalten und mehr über die Aufnahme von Audio und Video zu erfahren. Außerdem können Sie Schwenken, Neigen und Zoomen sowie andere Kameraeinstellungen wie Helligkeit und Kontrast steuern und sogar Standbilder aufnehmen. Mit Web Audio können Sie Audioinhalte mit Effekten versehen, Audiovisualisierungen erstellen oder räumliche Effekte wie Schwenken anwenden. Weitere Informationen finden Sie auch in der Profilerstellung für die Leistung von Web Audio-Apps in Chrome.

🖨 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 dies bei Ihnen nicht funktioniert, kann eine Low-Level-API die Lösung sein. Weitere Informationen findest du unter Mit deinem Gerät kommunizieren.

🔐 Mit diesem Gerät authentifizieren

Verwenden Sie WebAuthn, um mit diesem Hardwaresicherheitsgerät starke, attestierte und auf den Ursprung beschränkte öffentliche Schlüssel zur Authentifizierung von Nutzern zu erstellen. Es unterstützt die Verwendung von Bluetooth, NFC und USB-Roaming-U2F- oder FIDO2-Authenticatoren – auch Sicherheitsschlüssel genannt – sowie eine Plattformauthentifizierung, mit der sich Nutzer mit ihren Fingerabdrücken oder Displaysperren authentifizieren können. Weitere Informationen finden Sie unter Erste WebAuthn-Anwendung erstellen.

Wenn es sich bei diesem Gerät um eine andere Art von Hardwaresicherheitsgerät handelt (z.B. ein Wallet für Kryptowährungen), kann eine Low-Level-API die Lösung sein. Unter Finde heraus, wie du mit deinem Gerät kommunizierst, kannst du dich auf den Weg machen.

🗄 Auf Dateien auf diesem Gerät zugreifen

Mit der File System Access API können Sie Änderungen direkt an Dateien und Ordnern auf dem Gerät des Nutzers lesen und speichern. Falls nicht verfügbar, verwenden Sie die File API, um den Nutzer aufzufordern, lokale Dateien aus einem Browserdialogfeld auszuwählen und dann den Inhalt dieser Dateien zu lesen.

🧲 Auf Sensoren dieses Geräts zugreifen

Verwenden Sie die Generic Sensor API, um Sensorrohwerte von Bewegungssensoren (z.B. Beschleunigungsmesser oder Gyroskop) und Umgebungssensoren (z.B. Umgebungslicht, Magnetometer) auszulesen. Falls nicht verfügbar, verwenden Sie die Ereignisse DeviceMotion und DeviceOrientation, um Zugriff auf den integrierten Beschleunigungsmesser, das Gyroskop und den Kompass von Mobilgeräten zu erhalten.

Sollte dies nicht funktionieren, ist möglicherweise eine Low-Level-API die Lösung. Weitere Informationen findest du unter Mit deinem Gerät kommunizieren.

🛰 Auf diesem Gerät kannst du auf GPS-Koordinaten zugreifen

Mit der Geolocation API kannst du den Breiten- und Längengrad der aktuellen Position des Nutzers auf diesem Gerät abrufen.

Sollte dies nicht funktionieren, ist möglicherweise eine Low-Level-API die Lösung. Weitere Informationen findest du unter Mit deinem Gerät kommunizieren.

🔋 Akkustand des Geräts überprüfen

Mit der Battery API kannst du Hostinformationen zum Akkustand abrufen und benachrichtigt werden, wenn sich der Akkustand oder der Ladestatus ändert.

Sollte dies nicht funktionieren, ist möglicherweise eine Low-Level-API die Lösung. Weitere Informationen findest du unter Mit deinem Gerät kommunizieren.

📲 Mit diesem Gerät über das Netzwerk kommunizieren

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

Wenn das Gerät einen Webserver freigibt, rufen Sie mit der Fetch API und/oder WebSockets einige Daten von diesem Gerät ab, indem Sie die entsprechenden Endpunkte erreichen. TCP- und UDP-Sockets sind im Web zwar nicht verfügbar, aber mit WebTransport können Sie interaktive, bidirektionale und Multiplex-Netzwerkverbindungen verarbeiten. WebRTC kann auch verwendet werden, um Daten in Echtzeit über ein Peer-to-Peer-Protokoll mit anderen Browsern zu kommunizieren.

🧱 Hier erfährst du, wie du mit deinem Gerät kommunizieren kannst

Die Entscheidung, welche Low-Level-API Sie verwenden sollten, wird durch die Art der physischen Verbindung zum Gerät bestimmt. Bei kabellosen Verbindungen sollten Sie sich Web NFC für WLAN-Verbindungen mit sehr kurzer Reichweite und Web Bluetooth für drahtlose Geräte in der Nähe ansehen.

Mit Web NFC können Sie auf diesem Gerät lesen und schreiben, wenn es sich in unmittelbarer Nähe zum Gerät des Nutzers befindet (in der Regel 5–10 cm, 2–4 Zoll). Mit Tools wie NFC TagInfo von NXP können Sie den Inhalt dieses Geräts für Reverse Engineering-Zwecke durchsuchen.
Stellen Sie mit Web Bluetooth eine Verbindung zu diesem Gerät über eine Bluetooth Low Energy-Verbindung her. Wenn standardisierte Bluetooth-GATT-Dienste (z. B. der Akkudienst) verwendet werden, sollte die Kommunikation mit ihnen relativ einfach sein, da ihr Verhalten gut dokumentiert ist. Falls nicht, müssen Sie an dieser Stelle entweder eine Hardwaredokumentation für dieses Gerät finden oder ein Reverse Engineering durchführen. Dazu können Sie 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 Glühlampe von Uri Shaked an. Beachten Sie, dass Bluetooth-Geräte auch das HID- oder serielle Protokoll verwenden können.

Bei Verwendung mit Kabel prüfen Sie die APIs in dieser Reihenfolge:

Mit WebHID können Sie HID-Berichte und Berichtsdeskriptoren mithilfe von Sammlungen besser verstehen. Dies kann ohne die Anbieterdokumentation für dieses Gerät schwierig sein. Mit Tools wie Wireshark können Sie ein Reverse-Engineering durchführen. Mit der HID Explorer-Webanwendung können Sie Informationen zu HID-Geräten in einem visuell lesbaren Format speichern.
Mit Web Serial ist es ohne Anbieterdokumentation für dieses Gerät und die vom Gerät unterstützten Befehle schwierig, aber immer noch möglich. Für ein Reverse Engineering dieses Geräts kann der USB-Rohverkehr mit Tools wie Wireshark erfasst werden. Sie können auch die Webanwendung des seriellen Terminals verwenden, um mit diesem Gerät zu experimentieren, wenn es ein für Menschen lesbares Protokoll verwendet.
Mit WebUSB, ohne eine klare Dokumentation für dieses Gerät und die USB-Befehle, die dieses Gerät unterstützt, ist es schwierig, aber immer noch möglich. In diesem Video geht es um Exploring WebUSB and its Electricing von Suz Hinton. Sie können dieses Gerät auch per Reverse Engineering zurückentwickeln. Dazu erfassen Sie USB-Rohverkehr und prüfen USB-Deskriptoren mit externen Tools wie Wireshark und integrierten Browsertools wie der internen Seite about://usb-internals in Chromium-basierten Browsern.

Danksagungen

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

Foto von Darya Tryfanava bei Unsplash.