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 Benutzers verbunden sind. Sie bietet die Möglichkeit, Geräte anzuschließen, die vom Betriebssystem erfordern, über die serielle API zu kommunizieren, im Gegensatz zu USB, das über die WebUSB API zugänglich ist, 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.

Serial Experimentell

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

SerialPort Experimentell

Ermöglicht den Zugriff auf einen seriellen Anschluss auf dem Hostgerät.

Navigator.serial Nur lesbar Experimentell

Gibt ein Serial Objekt zurück, das den Einstiegspunkt in die Web Serial API darstellt, um die Kontrolle über serielle Anschlüsse zu ermöglichen.

WorkerNavigator.serial Nur lesbar Experimentell

Gibt ein Serial Objekt zurück, das den Einstiegspunkt in die Web Serial API darstellt, um die Kontrolle über serielle Anschlüsse zu ermöglichen.

Die folgenden Beispiele zeigen einige der Funktionalitäten, die die Web Serial API bietet.

Das folgende Beispiel zeigt, wie verfügbare Anschlüsse überprüft werden können und der Benutzer ermächtigt wird, dem Zugriff auf zusätzliche Anschlüsse zuzustimmen.

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

Wenn die Website auf keine verbundenen Anschlüsse zugreifen kann, muss sie warten, bis sie eine Benutzeraktivierung erhält, um fortzufahren. In diesem Beispiel verwenden wir einen click Ereignis-Handler auf einem Button für diese Aufgabe. Ein Filter wird an requestPort() mit einer USB-Vendor-ID übergeben, um die dem Benutzer angezeigte Menge an Geräten auf nur die USB-Geräte eines bestimmten Herstellers zu beschränken.

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 Daten von einem Anschluss gelesen werden. Die äußere Schleife behandelt nicht fatale Fehler, indem 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 einem seriellen Anschluss lesen und schreiben
• Einstieg in die Web Serial API