Signatur
Beschreibung
BarcodeDetector.getSupportedFormats() ist eine statische Methode der Barcode Detection API. Sie wird direkt auf der Klasse aufgerufen, nicht auf einer Instanz, und liefert ein Promise. Dieses wird mit einem Array von Zeichenketten erfüllt, etwa "qr_code", "ean_13" oder "code_128". Das Array enthält die Formate, die die zugrunde liegende Plattform (Betriebssystem bzw. Hardware) tatsächlich erkennen kann.
Die Methode ist nötig, weil welche Formate unterstützt werden, vom System und nicht vom Browser allein abhängt. Chrome unter Android nutzt z. B. Google Play Services, unter macOS das Vision-Framework. Die unterstützten Formate unterscheiden sich deshalb je nach Gerät. Frag die Formate ab, bevor du einen Detektor mit new BarcodeDetector({ formats }) erzeugst. Übergibst du dort ein nicht unterstütztes Format, wird zwar keine Ausnahme ausgelöst, es wird aber nie ein Treffer gefunden. Ein leeres Array bedeutet: Die API ist vorhanden, aber das System kann gerade keine Barcodes erkennen.
Mögliche Werte sind: aztec, code_128, code_39, code_93, codabar, data_matrix, ean_13, ean_8, itf, pdf417, qr_code, upc_a, upc_e sowie unknown.
Rückgabewert
Promise, das mit einem Array von Format-Zeichenketten erfüllt wird (z. B. ["qr_code", "ean_13"]). Das Array kann leer sein, wenn das System keine Barcode-Erkennung bereitstellt.Beispiele
Unterstützte Formate auflisten
if ('BarcodeDetector' in globalThis) {
const formats = await BarcodeDetector.getSupportedFormats();
console.log('Unterstützte Formate:', formats);
} else {
console.log('Barcode Detection API nicht verfügbar');
}Detektor nur mit gewünschten und verfügbaren Formaten erzeugen
const createDetector = async (wanted = ['qr_code', 'ean_13']) => {
if (!('BarcodeDetector' in globalThis)) return null;
const supported = await BarcodeDetector.getSupportedFormats();
const formats = wanted.filter((f) => supported.includes(f));
if (formats.length === 0) {
console.warn('Keines der gewünschten Formate wird unterstützt.');
return null;
}
return new BarcodeDetector({ formats });
};
const detector = await createDetector();
console.log(detector ? 'Detektor bereit' : 'Fallback nötig');QR-Code aus einem Bild lesen, mit Fallback
const scanImage = async (imgElement) => {
const supported = 'BarcodeDetector' in globalThis
? await BarcodeDetector.getSupportedFormats()
: [];
if (!supported.includes('qr_code')) {
// Hier z. B. eine JS-Bibliothek wie zxing-js als Fallback laden
throw new Error('Native QR-Erkennung nicht verfügbar');
}
const detector = new BarcodeDetector({ formats: ['qr_code'] });
const codes = await detector.detect(imgElement);
return codes.map((c) => c.rawValue);
};
const img = document.querySelector('#ticket');
scanImage(img)
.then((values) => console.log('Gefunden:', values))
.catch((err) => console.error(err.message));// Wichtig · Fallstricke
- Browser-Unterstützung: Die API ist experimentell und nur in Chromium-Browsern verfügbar, vor allem Chrome/Edge unter Android, ChromeOS und macOS. Unter Windows und Linux fehlt sie meist. Firefox und Safari unterstützen sie nicht. Prüfe deshalb vorher mit
'BarcodeDetector' in globalThis, ob sie existiert. - Statisch aufrufen:
detector.getSupportedFormats()auf einer Instanz schlägt fehl (TypeError). Richtig istBarcodeDetector.getSupportedFormats(). - Leeres Array möglich: Auch wenn die Klasse vorhanden ist, kann das Ergebnis
[]sein, z. B. wenn unter Android die Play Services fehlen. Plane dafür eine Ersatzlösung ein, etwa eine WebAssembly- oder JS-Bibliothek. - Sicherer Kontext: Die API steht nur über HTTPS bzw.
localhostzur Verfügung. - Unbekannte Formate im Konstruktor lösen einen
TypeErroraus. Gültige, aber nicht unterstützte Formate werden dagegen stillschweigend nie erkannt. Gleiche die gewünschten Formate deshalb immer mit dieser Methode ab. - Ergebnisse aus
detect()sind Eingaben von außen:rawValuenie ungeprüft perinnerHTMLeinfügen oder als URL öffnen, sonst drohen XSS oder Phishing.