Web Serial API

Die Web Serial API ist eine von mehreren APIs, die es Websites ermöglichen, mit Peripheriegeräten zu kommunizieren, die mit dem Computer eines Nutzers verbunden sind. Sie ermöglicht die Verbindung zu Geräten, die vom Betriebssystem erforderlich sind, um über die serielle API zu kommunizieren, im Gegensatz zu USB, das über die WebUSB API zugänglich ist, oder Eingabegeräte, 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.

Serial Experimentell

Bietet Attribute und Methoden zum Auffinden und Verbinden von seriellen Anschlüssen von einer Webseite.

SerialPort Experimentell

Ermöglicht den Zugriff auf einen seriellen Anschluss auf dem Host-Gerät.

Navigator.serial Schreibgeschützt Experimentell

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

WorkerNavigator.serial Schreibgeschützt Experimentell

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

Permissions-Policy serial Direktive

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

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

Das folgende Beispiel zeigt, wie man nach verfügbaren Anschlüssen sucht und dem Nutzer ermöglicht, die Erlaubnis für den Zugriff auf zusätzliche Anschlüsse zu erteilen.

Die connect und disconnect Ereignisse ermöglichen es Websites, zu reagieren, wenn ein Gerät mit dem System verbunden oder getrennt wird. Die Methode getPorts() wird dann aufgerufen, um zu sehen, welche angeschlossenen Anschlüsse die Seite bereits zugreifen kann.

Wenn die Seite keinen Zugang zu angeschlossenen Anschlüssen hat, muss sie warten, bis sie über eine Benutzeraktivierung fortfahren kann. 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 dem Nutzer angezeigten Geräte auf eine bestimmte Herstellermarke von USB-Geräten zu begrenzen.

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.
    });
});

Das folgende Beispiel zeigt, wie man Daten von einem Anschluss liest. Die äußere Schleife behandelt nicht fatale Fehler, indem immer wieder ein neuer Leser erstellt wird, bis ein fataler Fehler auftritt und SerialPort.readable null wird.

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();
  }
}

• Von und zu einem seriellen Anschluss lesen und schreiben
• Erste Schritte mit der Web Serial API