Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

Web Serial API

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.

Hinweis: Diese Funktion ist in Dedicated Web Workers verfügbar.

Die Web Serial API bietet eine Möglichkeit für Websites, von und zu seriellen Geräten zu lesen und zu schreiben. Diese Geräte können über eine serielle Schnittstelle verbunden sein oder es können USB- oder Bluetooth-Geräte sein, die eine serielle Schnittstelle emulieren.

Konzepte und Verwendung

Die Web Serial API ist eine von mehreren APIs, die Websites ermöglichen, mit Peripheriegeräten zu kommunizieren, die mit einem Computer des Benutzers verbunden sind. Sie bietet die Möglichkeit, zu Geräten eine Verbindung herzustellen, bei denen das Betriebssystem für die Kommunikation die serielle API benötigt, im Gegensatz zu USB-Geräten, die über die WebUSB API zugänglich sind, oder Eingabegeräten, die über die WebHID API zugänglich sind.

Beispiele für serielle Geräte sind 3D-Drucker und Mikrocontroller wie das BBC micro:bit board.

Schnittstellen

Serial

Bietet Attribute und Methoden, um serielle Ports von einer Webseite aus zu finden und zu verbinden.

SerialPort

Bietet Zugriff auf einen seriellen Anschluss des Hostgeräts.

Erweiterungen zu anderen Schnittstellen

Gibt ein Serial-Objekt zurück, das den Einstiegspunkt in die Web Serial API darstellt, um die Steuerung von seriellen Ports zu ermöglichen.

WorkerNavigator.serial Schreibgeschützt

Gibt ein Serial-Objekt zurück, das den Einstiegspunkt in die Web Serial API darstellt, um die Steuerung von seriellen Ports zu ermöglichen.

HTTP-Header

Permissions-Policy serial Direktive

Kontrolliert, ob das aktuelle Dokument die Web Serial API verwenden darf, um mit seriellen Geräten zu kommunizieren, die entweder direkt über einen seriellen Anschluss oder über USB- oder Bluetooth-Geräte verbunden sind, die eine serielle Schnittstelle emulieren.

Beispiele

Die folgenden Beispiele demonstrieren einige der Funktionen, die von der Web Serial API bereitgestellt werden.

Überprüfen auf verfügbare Ports

Das folgende Beispiel zeigt, wie verfügbare Ports überprüft werden und dem Benutzer erlaubt wird, die Berechtigung für den Zugriff auf zusätzliche Ports zu erteilen.

Die connect und disconnect Ereignisse erlauben es Websites, zu reagieren, wenn ein Gerät mit dem System verbunden oder davon getrennt wird. Die Methode getPorts() wird dann aufgerufen, um verbundene Ports zu sehen, auf die die Website bereits Zugriff hat.

Wenn die Website auf keine verbundenen Ports zugreifen kann, muss sie warten, bis sie eine Benutzeraktivierung erhält, um fortzufahren. In diesem Beispiel verwenden wir einen click-Ereignishandler auf einem Button für diese Aufgabe. Ein Filter wird an requestPort() mit einer USB-Hersteller-ID übergeben, um die Menge der dem Benutzer angezeigten Geräte auf nur USB-Geräte eines bestimmten Herstellers zu begrenzen.

js
navigator.serial.addEventListener("connect", (e) => {
  // Connect to `e.target` or add it to a list of available ports.
});

navigator.serial.addEventListener("disconnect", (e) => {
  // Remove `e.target` from the list of available ports.
});

navigator.serial.getPorts().then((ports) => {
  // Initialize the list of available ports with `ports` on page load.
});

button.addEventListener("click", () => {
  const usbVendorId = 0xabcd;
  navigator.serial
    .requestPort({ filters: [{ usbVendorId }] })
    .then((port) => {
      // Connect to `port` or add it to the list of available ports.
    })
    .catch((e) => {
      // The user didn't select a port.
    });
});

Daten von einem Port lesen

Das folgende Beispiel zeigt, wie Daten von einem Port gelesen werden. Die äußere Schleife behandelt nicht-fatale Fehler und erstellt einen neuen Leser, bis ein fataler Fehler auftritt und SerialPort.readable zu null wird.

js
while (port.readable) {
  const reader = port.readable.getReader();
  try {
    while (true) {
      const { value, done } = await reader.read();
      if (done) {
        // |reader| has been canceled.
        break;
      }
      // Do something with |value|...
    }
  } catch (error) {
    // Handle |error|...
  } finally {
    reader.releaseLock();
  }
}

Spezifikationen

Spezifikation
Web Serial API
# serial-interface

Browser-Kompatibilität

Siehe auch