USBDevice.productName — Eigenschaft · JavaScript-Referenz

Signatur

USBDevice.productName

Beschreibung

Die Eigenschaft productName des Interfaces USBDevice enthält den Produktnamen, den der Hersteller im USB-String-Deskriptor des Geräts hinterlegt hat. Der Wert wird schon beim Aufzählen des Geräts ausgelesen, deshalb steht er auch zur Verfügung, bevor open() aufgerufen wurde.

Typischerweise zeigt man productName in der Oberfläche an, etwa in einer Liste bereits freigegebener Geräte oder in einer Statusmeldung wie „Verbunden mit …“. Zum eindeutigen Identifizieren eines Gerätetyps sollte man sich dagegen auf vendorId und productId stützen, denn der Name ist frei wählbar, kann je nach Firmware unterschiedlich ausfallen und ist nicht eindeutig.

Die Eigenschaft ist schreibgeschützt. Hat der Hersteller keinen Produkt-String-Deskriptor angelegt, ist der Wert undefined oder eine leere Zeichenkette. Deshalb sollte man immer einen Ersatzwert vorsehen.

Rückgabewert

Typ

string | undefined

Beschreibung

Der Produktname aus dem String-Deskriptor des Geräts. Ohne passenden Deskriptor undefined bzw. eine leere Zeichenkette.

Beispiele

Gerät auswählen und Namen anzeigen

// Muss durch eine Nutzeraktion ausgelöst werden (z. B. einen Klick)
document.querySelector('#connect').addEventListener('click', async () => {
  try {
    const device = await navigator.usb.requestDevice({
      filters: [{ vendorId: 0x2341 }] // Arduino
    });
    console.log(`Ausgewählt: ${device.productName ?? 'Unbekanntes Gerät'}`);
  } catch (err) {
    console.warn('Keine Auswahl getroffen:', err.message);
  }
});

Ausgewählt: Arduino Uno

Bereits freigegebene Geräte auflisten

const listDevices = async () => {
  const devices = await navigator.usb.getDevices();
  return devices.map((d) => ({
    name: d.productName || 'Ohne Namen',
    hersteller: d.manufacturerName || '–',
    id: `${d.vendorId.toString(16).padStart(4, '0')}:${d.productId.toString(16).padStart(4, '0')}`
  }));
};

listDevices().then(console.table);

┌─────────┬──────────────┬─────────────┬─────────────┐ │ (index) │ name │ hersteller │ id │ ├─────────┼──────────────┼─────────────┼─────────────┤ │ 0 │ 'Arduino Uno'│ 'Arduino' │ '2341:0043' │ └─────────┴──────────────┴─────────────┴─────────────┘

Verbinden und Trennen protokollieren

if ('usb' in navigator) {
  navigator.usb.addEventListener('connect', ({ device }) => {
    console.log(`Angeschlossen: ${device.productName ?? 'Unbekannt'}`);
  });
  navigator.usb.addEventListener('disconnect', ({ device }) => {
    console.log(`Getrennt: ${device.productName ?? 'Unbekannt'}`);
  });
} else {
  console.log('WebUSB wird von diesem Browser nicht unterstützt.');
}

Angeschlossen: Arduino Uno

// Wichtig · Fallstricke

Browser-Unterstützung: WebUSB gibt es nur in Chromium-basierten Browsern (Chrome, Edge, Opera). Firefox und Safari unterstützen die API nicht. Prüfe daher vorher mit 'usb' in navigator.
Die API ist nur in sicheren Kontexten (HTTPS oder localhost) verfügbar und kann per Permissions-Policy (usb) gesperrt sein.
Der Wert kann undefined oder leer sein. Verwende deshalb ?? bzw. || mit einem Ersatztext.
Der Name ist nicht eindeutig und kein Sicherheitsmerkmal. Für die Geräteerkennung sind vendorId/productId gedacht, für einzelne Exemplare serialNumber.
Der Name stammt vom Gerät selbst. Füge ihn daher mit textContent und nicht mit innerHTML ins DOM ein, sonst droht XSS.

Siehe auch

USBDevice USBDevice.manufacturerName USBDevice.serialNumber USBDevice.productId USBDevice.vendorId USB.requestDevice() Navigator.productSub