Refactor detectBarcodes function.

Author: jameseaster

components/BarcodeScanner.vue

@@ -17,9 +17,10 @@
 /*!
  * Copyright (c) 2024-2025 Digital Bazaar, Inc. All rights reserved.
  */
-import {_detectBarcode, _mapFormats} from '../lib/helpers';
-import {Html5Qrcode, Html5QrcodeScannerState} from 'html5-qrcode';
+import {Html5Qrcode, Html5QrcodeScannerState, Html5QrcodeSupportedFormats}
+  from 'html5-qrcode';
 import {inject, onMounted, onUnmounted, reactive, ref} from 'vue';
+import {detectBarcodes} from '../lib/barcodes.js';
 import ScannerUI from './ScannerUI.vue';
 import {useQuasar} from 'quasar';
 
@@ -47,6 +48,7 @@ export default {
 
     // Constants
     let scanner = null;
+    const abortController = new AbortController();
 
     // Refs
     const cameraList = ref([]);
@@ -130,6 +132,7 @@ export default {
     // Helper functions
     function handleClose() {
       emit('close');
+      abortController.abort();
     }
 
     // Toggle camera light on and off
@@ -153,13 +156,11 @@ export default {
     }
 
     async function emitScanResult({barcodeDetector, video}) {
-      const result = await _detectBarcode({barcodeDetector, video});
+      const {signal} = abortController;
+      const barcodes = await detectBarcodes({barcodeDetector, video, signal});
+      const [result] = barcodes;
       if(result?.format && result?.rawValue) {
         emit('result', {type: result.format, text: result.rawValue});
-      } else {
-        video.requestVideoFrameCallback(() => {
-          emitScanResult({barcodeDetector, video});
-        });
       }
     }
 
@@ -197,7 +198,9 @@ export default {
     }
 
     function onError(error) {
-      console.error('BarcodeScanner error:', error);
+      if(!String(error).startsWith('QR code parse error')) {
+        console.error('BarcodeScanner error:', error);
+      }
     }
 
     function getCameraScanConfig() {
@@ -264,6 +267,42 @@ export default {
     };
   }
 };
+
+// see: `BarcodeFormat`
+// https://wicg.github.io/shape-detection-api/#enumdef-barcodeformat
+const FORMAT_MAP = new Map([
+  ['aztec', Html5QrcodeSupportedFormats.AZTEC],
+  ['code_128', Html5QrcodeSupportedFormats.CODE_128],
+  ['code_39', Html5QrcodeSupportedFormats.CODE_39],
+  ['code_93', Html5QrcodeSupportedFormats.CODE_93],
+  ['codabar', Html5QrcodeSupportedFormats.CODABAR],
+  ['data_matrix', Html5QrcodeSupportedFormats.DATA_MATRIX],
+  ['ean_13', Html5QrcodeSupportedFormats.EAN_13],
+  ['ean_8', Html5QrcodeSupportedFormats.EAN_8],
+  ['itf', Html5QrcodeSupportedFormats.ITF],
+  ['pdf417', Html5QrcodeSupportedFormats.PDF_417],
+  ['qr_code', Html5QrcodeSupportedFormats.QR_CODE],
+  ['upc_a', Html5QrcodeSupportedFormats.UPC_A],
+  ['upc_e', Html5QrcodeSupportedFormats.UPC_E],
+]);
+
+// map from Web-native format to `Html5QrcodeSupportedFormats`
+export function _mapFormats(formats) {
+  return formats.map(format => {
+    const result = FORMAT_MAP.get(format);
+    if(result === undefined) {
+      if(typeof result !== 'string' || !isNaN(Number.parseInt(result, 10))) {
+        throw new TypeError(
+          `Unsupported format "${format}"; ` +
+            'a string supported by the "BarcodeFormat" enumeration ' +
+            'must be given, e.g., "qr_code", not a number.'
+        );
+      }
+      throw new TypeError(`Unsupported format "${format}".`);
+    }
+    return result;
+  });
+}
 </script>
 
 <style>

lib/barcodes.js

@@ -0,0 +1,26 @@
+export function detectBarcodes({barcodeDetector, video, signal} = {}) {
+  return new Promise((resolve, reject) => {
+    // schedule barcode detection
+    video.requestVideoFrameCallback(() => _detect({
+      barcodeDetector, video, signal, resolve, reject
+    }));
+  });
+}
+
+async function _detect({barcodeDetector, video, signal, resolve, reject}) {
+  try {
+    // detect barcodes in the current video frame
+    const barcodes = await barcodeDetector.detect(video);
+    if(barcodes.length > 0) {
+      return resolve(barcodes);
+    }
+    // abort as needed
+    signal?.throwIfAborted();
+    // no barcodes found, schedule to try again
+    video.requestVideoFrameCallback(() => _detect({
+      barcodeDetector, video, signal, resolve, reject
+    }));
+  } catch(error) {
+    reject(error);
+  }
+}