From c2a52a80a1fa2c80b7ee8854d9d7b263748b3490 Mon Sep 17 00:00:00 2001
From: James Easter <jeaster@digitalbazaar.com>
Date: Wed, 2 Apr 2025 16:06:03 -0600
Subject: [PATCH 1/9] Use Barcode Detection API to detect barcodes.

---
 CHANGELOG.md                  |  5 +++
 components/BarcodeScanner.vue | 63 +++++++++++++++++++++++++++--------
 2 files changed, 54 insertions(+), 14 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ff599c6..1ef5f7a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # bedrock-vue-barcode-scanner ChangeLog
 
+## 1.4.0 - 2025-04-xx
+
+### Changed
+- Use Barcode Detection API to detect barcodes.
+
 ## 1.3.1 - 2025-03-11
 
 ### Changed
diff --git a/components/BarcodeScanner.vue b/components/BarcodeScanner.vue
index 6d2498e..98f6765 100644
--- a/components/BarcodeScanner.vue
+++ b/components/BarcodeScanner.vue
@@ -69,7 +69,7 @@ export default {
       // map formats from Web standard to `Html5QrcodeSupportedFormats`
       scanner = new Html5Qrcode(
         'dce-video-container', {
-          fps: 60,
+          fps: 30,
           formatsToSupport: _mapFormats(formatsToSupport),
           useBarCodeDetectorIfSupported: true,
         }
@@ -99,8 +99,14 @@ export default {
       await getZoomConstraints();
       // Set focus mode
       scanner.applyVideoConstraints({
-        advanced: [{focusMode: 'continuous'}],
+        advanced: [
+          {frameRate: 30},
+          {resizeMode: 'none'},
+          {focusMode: 'continuous'},
+        ],
       });
+      // Use Barcode Detection API
+      startBarcodeDetection();
       loadingCamera.value = false;
     });
 
@@ -138,6 +144,44 @@ export default {
       cameraConstraints.zoom.step = step;
     }
 
+    function startBarcodeDetection() {
+      // Get video element
+      const videoElement = document.querySelector(
+        '#dce-video-container > video'
+      );
+      const {BarcodeDetector} = globalThis;
+      // Check if BarcodeDetector is supported
+      if(!BarcodeDetector) {
+        alert('Barcode Detector is not supported in this browser.');
+        return;
+      } else {
+        const barcodeDetector = new BarcodeDetector({formats: ['pdf417']});
+        const detectBarcode = async video => {
+          try {
+            // Detect barcodes in the current video frame
+            const barcodes = await barcodeDetector.detect(video);
+            if(barcodes.length > 0) {
+              barcodes.forEach(barcode => {
+                const {format, rawValue} = barcode;
+                if(format && rawValue) {
+                  console.log('Barcode Detection API:', barcode);
+                  emit('result', {type: format, text: rawValue});
+                }
+              });
+            }
+          } catch(error) {
+            console.error('Barcode detection failed:', error);
+          }
+          // Schedule the next frame check
+          video.requestVideoFrameCallback(() => detectBarcode(video));
+        };
+        // Start the detection loop
+        videoElement.requestVideoFrameCallback(() =>
+          detectBarcode(videoElement)
+        );
+      }
+    }
+
     // Update camera zoom
     async function onZoomChange(updatedValue) {
       scanner.applyVideoConstraints({
@@ -145,17 +189,9 @@ export default {
       });
     }
 
-    function onScanSuccess(decodedText, decodedResult) {
-      const text = decodedText;
-      const type = decodedResult?.result?.format?.formatName;
-      console.log(
-        'BarcodeScanner detected something:',
-        decodedText ? decodedText : '<empty string>'
-      );
-      if(!type || !text) {
-        return;
-      }
-      emit('result', {type, text});
+    // Use Barcode Detection API instead of html5qrcode's logic
+    function onScanSuccess() {
+      return;
     }
 
     function onError(error) {
@@ -262,7 +298,6 @@ function _mapFormats(formats) {
     return result;
   });
 }
-
 </script>
 
 <style>

From 15e8fe2574796957cbfe174681ec24d240cf163b Mon Sep 17 00:00:00 2001
From: James Easter <jeaster@digitalbazaar.com>
Date: Wed, 2 Apr 2025 16:07:23 -0600
Subject: [PATCH 2/9] Start iOS camera at zoom level 2.

---
 components/BarcodeScanner.vue | 24 ++++++++++++++++--------
 components/ScannerUI.vue      |  7 ++++++-
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/components/BarcodeScanner.vue b/components/BarcodeScanner.vue
index 98f6765..fbcf9ee 100644
--- a/components/BarcodeScanner.vue
+++ b/components/BarcodeScanner.vue
@@ -21,6 +21,7 @@ import {Html5Qrcode, Html5QrcodeScannerState, Html5QrcodeSupportedFormats}
   from 'html5-qrcode';
 import {inject, onMounted, onUnmounted, reactive, ref} from 'vue';
 import ScannerUI from './ScannerUI.vue';
+import {useQuasar} from 'quasar';
 
 export default {
   name: 'BarcodeScanner',
@@ -61,6 +62,9 @@ export default {
       }
     });
 
+    // use functions
+    const $q = useQuasar();
+
     // Inject
     const {selectedCameraId, updateSelectedCamera} = inject('selectedCameraId');
 
@@ -105,6 +109,10 @@ export default {
           {focusMode: 'continuous'},
         ],
       });
+      // Start scanner at zoom level 2 for iOS
+      if($q.platform.is.ios) {
+        onZoomChange(2);
+      }
       // Use Barcode Detection API
       startBarcodeDetection();
       loadingCamera.value = false;
@@ -207,14 +215,14 @@ export default {
     }
 
     /**
-    * A function that takes in the width and height of the video stream
-    * and returns QrDimensions. Viewfinder refers to the video showing
-    * camera stream.
-    *
-    * @param {number} viewfinderWidth - Video screen width.
-    * @param {number} viewfinderHeight - Video screen height.
-    * @returns {object} Qrbox width and height.
-    */
+     * A function that takes in the width and height of the video stream
+     * and returns QrDimensions. Viewfinder refers to the video showing
+     * camera stream.
+     *
+     * @param {number} viewfinderWidth - Video screen width.
+     * @param {number} viewfinderHeight - Video screen height.
+     * @returns {object} Qrbox width and height.
+     */
     function qrboxFunction(viewfinderWidth, viewfinderHeight) {
       const minEdgePercentage = 0.9; // 90%
       const minEdgeSize = Math.min(viewfinderWidth, viewfinderHeight);
diff --git a/components/ScannerUI.vue b/components/ScannerUI.vue
index ad3e91e..d04fb79 100644
--- a/components/ScannerUI.vue
+++ b/components/ScannerUI.vue
@@ -132,6 +132,7 @@
  * Copyright (c) 2024-2025 Digital Bazaar, Inc. All rights reserved.
  */
 import {ref, watch} from 'vue';
+import {useQuasar} from 'quasar';
 
 export default {
   name: 'ScannerUI',
@@ -165,7 +166,11 @@ export default {
   },
   emits: ['close', 'updateCamera', 'upload', 'toggle-torch', 'zoom-update'],
   setup(_, {emit}) {
-    const zoom = ref(1);
+    // use functions
+    const $q = useQuasar();
+
+    // Start scanner at zoom level 2 for iOS
+    const zoom = ref($q.platform.is.ios ? 2 : 1);
 
     watch(zoom, updatedValue => {
       emit('zoom-update', updatedValue);

From 36f633c3de528e03ca049cc12714bdd561138083 Mon Sep 17 00:00:00 2001
From: James Easter <jeaster@digitalbazaar.com>
Date: Wed, 2 Apr 2025 16:27:54 -0600
Subject: [PATCH 3/9] Isolate detectBarcode function.

---
 components/BarcodeScanner.vue | 43 +++++++++++++++++++----------------
 1 file changed, 23 insertions(+), 20 deletions(-)

diff --git a/components/BarcodeScanner.vue b/components/BarcodeScanner.vue
index fbcf9ee..ebf6833 100644
--- a/components/BarcodeScanner.vue
+++ b/components/BarcodeScanner.vue
@@ -164,28 +164,9 @@ export default {
         return;
       } else {
         const barcodeDetector = new BarcodeDetector({formats: ['pdf417']});
-        const detectBarcode = async video => {
-          try {
-            // Detect barcodes in the current video frame
-            const barcodes = await barcodeDetector.detect(video);
-            if(barcodes.length > 0) {
-              barcodes.forEach(barcode => {
-                const {format, rawValue} = barcode;
-                if(format && rawValue) {
-                  console.log('Barcode Detection API:', barcode);
-                  emit('result', {type: format, text: rawValue});
-                }
-              });
-            }
-          } catch(error) {
-            console.error('Barcode detection failed:', error);
-          }
-          // Schedule the next frame check
-          video.requestVideoFrameCallback(() => detectBarcode(video));
-        };
         // Start the detection loop
         videoElement.requestVideoFrameCallback(() =>
-          detectBarcode(videoElement)
+          detectBarcode(barcodeDetector, videoElement, emit)
         );
       }
     }
@@ -271,6 +252,28 @@ export default {
   }
 };
 
+async function detectBarcode(barcodeDetector, video, emit) {
+  try {
+    // Detect barcodes in the current video frame
+    const barcodes = await barcodeDetector.detect(video);
+    if(barcodes.length > 0) {
+      barcodes.forEach(barcode => {
+        const {format, rawValue} = barcode;
+        if(format && rawValue) {
+          console.log('Barcode Detection API:', barcode);
+          emit('result', {type: format, text: rawValue});
+        }
+      });
+    }
+  } catch(error) {
+    console.error('Barcode detection failed:', error);
+  }
+  // Schedule the next frame check
+  video.requestVideoFrameCallback(() =>
+    detectBarcode(barcodeDetector, video, emit)
+  );
+}
+
 // see: `BarcodeFormat`
 // https://wicg.github.io/shape-detection-api/#enumdef-barcodeformat
 const FORMAT_MAP = new Map([

From 1a3aeef9fbc328caac0e82df79c52f9381a09afc Mon Sep 17 00:00:00 2001
From: James Easter <jeaster@digitalbazaar.com>
Date: Wed, 2 Apr 2025 17:07:24 -0600
Subject: [PATCH 4/9] Isolate helper functions.

---
 components/BarcodeScanner.vue | 79 ++++++++---------------------------
 lib/helpers.js                | 54 ++++++++++++++++++++++++
 2 files changed, 71 insertions(+), 62 deletions(-)
 create mode 100644 lib/helpers.js

diff --git a/components/BarcodeScanner.vue b/components/BarcodeScanner.vue
index ebf6833..064e860 100644
--- a/components/BarcodeScanner.vue
+++ b/components/BarcodeScanner.vue
@@ -17,8 +17,8 @@
 /*!
  * Copyright (c) 2024-2025 Digital Bazaar, Inc. All rights reserved.
  */
-import {Html5Qrcode, Html5QrcodeScannerState, Html5QrcodeSupportedFormats}
-  from 'html5-qrcode';
+import {_detectBarcode, _mapFormats} from '../lib/helpers';
+import {Html5Qrcode, Html5QrcodeScannerState} from 'html5-qrcode';
 import {inject, onMounted, onUnmounted, reactive, ref} from 'vue';
 import ScannerUI from './ScannerUI.vue';
 import {useQuasar} from 'quasar';
@@ -152,6 +152,17 @@ export default {
       cameraConstraints.zoom.step = step;
     }
 
+    async function emitScanResult({barcodeDetector, video}) {
+      const result = await _detectBarcode({barcodeDetector, video});
+      if(result?.format && result?.rawValue) {
+        emit('result', {type: result.format, text: result.rawValue});
+      } else {
+        video.requestVideoFrameCallback(() => {
+          emitScanResult({barcodeDetector, video});
+        });
+      }
+    }
+
     function startBarcodeDetection() {
       // Get video element
       const videoElement = document.querySelector(
@@ -163,10 +174,12 @@ export default {
         alert('Barcode Detector is not supported in this browser.');
         return;
       } else {
-        const barcodeDetector = new BarcodeDetector({formats: ['pdf417']});
+        const barcodeDetector = new BarcodeDetector({
+          formats: formatsToSupport
+        });
         // Start the detection loop
         videoElement.requestVideoFrameCallback(() =>
-          detectBarcode(barcodeDetector, videoElement, emit)
+          emitScanResult({barcodeDetector, video: videoElement})
         );
       }
     }
@@ -251,64 +264,6 @@ export default {
     };
   }
 };
-
-async function detectBarcode(barcodeDetector, video, emit) {
-  try {
-    // Detect barcodes in the current video frame
-    const barcodes = await barcodeDetector.detect(video);
-    if(barcodes.length > 0) {
-      barcodes.forEach(barcode => {
-        const {format, rawValue} = barcode;
-        if(format && rawValue) {
-          console.log('Barcode Detection API:', barcode);
-          emit('result', {type: format, text: rawValue});
-        }
-      });
-    }
-  } catch(error) {
-    console.error('Barcode detection failed:', error);
-  }
-  // Schedule the next frame check
-  video.requestVideoFrameCallback(() =>
-    detectBarcode(barcodeDetector, video, emit)
-  );
-}
-
-// 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`
-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>
diff --git a/lib/helpers.js b/lib/helpers.js
new file mode 100644
index 0000000..9fc7467
--- /dev/null
+++ b/lib/helpers.js
@@ -0,0 +1,54 @@
+import {Html5QrcodeSupportedFormats} from 'html5-qrcode';
+
+// 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;
+  });
+}
+
+export async function _detectBarcode({barcodeDetector, video}) {
+  try {
+    // Detect barcodes in the current video frame
+    const barcodes = await barcodeDetector.detect(video);
+    if(barcodes.length > 0) {
+      for(const barcode of barcodes) {
+        if(barcode.format && barcode.rawValue) {
+          console.log('Barcode Detection API:', barcode);
+          return barcode;
+        }
+      }
+    }
+  } catch(error) {
+    console.error('Barcode detection failed:', error);
+  }
+}

From 545f7faa043b76af70e1a2754a038eac4decc7e2 Mon Sep 17 00:00:00 2001
From: James Easter <jeaster@digitalbazaar.com>
Date: Wed, 2 Apr 2025 17:47:43 -0600
Subject: [PATCH 5/9] Refactor detectBarcodes function.

---
 components/BarcodeScanner.vue | 55 ++++++++++++++++++++++++++++++-----
 lib/barcodes.js               | 26 +++++++++++++++++
 lib/helpers.js                | 54 ----------------------------------
 3 files changed, 73 insertions(+), 62 deletions(-)
 create mode 100644 lib/barcodes.js
 delete mode 100644 lib/helpers.js

diff --git a/components/BarcodeScanner.vue b/components/BarcodeScanner.vue
index 064e860..efc6a2a 100644
--- a/components/BarcodeScanner.vue
+++ b/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>
diff --git a/lib/barcodes.js b/lib/barcodes.js
new file mode 100644
index 0000000..8948409
--- /dev/null
+++ b/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);
+  }
+}
diff --git a/lib/helpers.js b/lib/helpers.js
deleted file mode 100644
index 9fc7467..0000000
--- a/lib/helpers.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import {Html5QrcodeSupportedFormats} from 'html5-qrcode';
-
-// 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;
-  });
-}
-
-export async function _detectBarcode({barcodeDetector, video}) {
-  try {
-    // Detect barcodes in the current video frame
-    const barcodes = await barcodeDetector.detect(video);
-    if(barcodes.length > 0) {
-      for(const barcode of barcodes) {
-        if(barcode.format && barcode.rawValue) {
-          console.log('Barcode Detection API:', barcode);
-          return barcode;
-        }
-      }
-    }
-  } catch(error) {
-    console.error('Barcode detection failed:', error);
-  }
-}

From 6b621b239019dd8704c607edd3dbb3193daaa4ab Mon Sep 17 00:00:00 2001
From: James Easter <jeaster@digitalbazaar.com>
Date: Wed, 2 Apr 2025 17:51:40 -0600
Subject: [PATCH 6/9] Apply code review suggestions.

---
 components/BarcodeScanner.vue | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/components/BarcodeScanner.vue b/components/BarcodeScanner.vue
index efc6a2a..6273070 100644
--- a/components/BarcodeScanner.vue
+++ b/components/BarcodeScanner.vue
@@ -166,7 +166,7 @@ export default {
 
     function startBarcodeDetection() {
       // Get video element
-      const videoElement = document.querySelector(
+      const video = document.querySelector(
         '#dce-video-container > video'
       );
       const {BarcodeDetector} = globalThis;
@@ -174,15 +174,14 @@ export default {
       if(!BarcodeDetector) {
         alert('Barcode Detector is not supported in this browser.');
         return;
-      } else {
-        const barcodeDetector = new BarcodeDetector({
-          formats: formatsToSupport
-        });
-        // Start the detection loop
-        videoElement.requestVideoFrameCallback(() =>
-          emitScanResult({barcodeDetector, video: videoElement})
-        );
       }
+      const barcodeDetector = new BarcodeDetector({
+        formats: formatsToSupport
+      });
+        // Start the detection loop
+      video.requestVideoFrameCallback(
+        () => emitScanResult({barcodeDetector, video})
+      );
     }
 
     // Update camera zoom

From 9497a7dc6f86879b341795d9ef05221225e35ffd Mon Sep 17 00:00:00 2001
From: James Easter <jeaster@digitalbazaar.com>
Date: Thu, 3 Apr 2025 09:12:01 -0600
Subject: [PATCH 7/9] Apply suggestions from code review.

---
 components/BarcodeScanner.vue | 13 ++++---------
 lib/barcodes.js               |  3 +++
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/components/BarcodeScanner.vue b/components/BarcodeScanner.vue
index 6273070..5b15858 100644
--- a/components/BarcodeScanner.vue
+++ b/components/BarcodeScanner.vue
@@ -159,16 +159,13 @@ export default {
       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});
-      }
+      emit('result', {type: result.format, text: result.rawValue});
     }
 
     function startBarcodeDetection() {
       // Get video element
       const video = document.querySelector(
-        '#dce-video-container > video'
-      );
+        '#dce-video-container > video');
       const {BarcodeDetector} = globalThis;
       // Check if BarcodeDetector is supported
       if(!BarcodeDetector) {
@@ -178,10 +175,8 @@ export default {
       const barcodeDetector = new BarcodeDetector({
         formats: formatsToSupport
       });
-        // Start the detection loop
-      video.requestVideoFrameCallback(
-        () => emitScanResult({barcodeDetector, video})
-      );
+      // emit the first scanned result
+      emitScanResult({barcodeDetector, video});
     }
 
     // Update camera zoom
diff --git a/lib/barcodes.js b/lib/barcodes.js
index 8948409..96d9f13 100644
--- a/lib/barcodes.js
+++ b/lib/barcodes.js
@@ -1,3 +1,6 @@
+/*!
+ * Copyright (c) 2025 Digital Bazaar, Inc. All rights reserved.
+ */
 export function detectBarcodes({barcodeDetector, video, signal} = {}) {
   return new Promise((resolve, reject) => {
     // schedule barcode detection

From dfe587653eb665db0262d25a1436b291a042ab01 Mon Sep 17 00:00:00 2001
From: James Easter <james.m.easter@gmail.com>
Date: Thu, 3 Apr 2025 11:58:59 -0600
Subject: [PATCH 8/9] Style fixes from code review.

Co-authored-by: Dave Longley <dlongley@digitalbazaar.com>
---
 components/BarcodeScanner.vue | 11 +++++------
 components/ScannerUI.vue      |  2 +-
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/components/BarcodeScanner.vue b/components/BarcodeScanner.vue
index 5b15858..93542cd 100644
--- a/components/BarcodeScanner.vue
+++ b/components/BarcodeScanner.vue
@@ -163,11 +163,11 @@ export default {
     }
 
     function startBarcodeDetection() {
-      // Get video element
+      // get video element
       const video = document.querySelector(
         '#dce-video-container > video');
       const {BarcodeDetector} = globalThis;
-      // Check if BarcodeDetector is supported
+      // check if BarcodeDetector is supported
       if(!BarcodeDetector) {
         alert('Barcode Detector is not supported in this browser.');
         return;
@@ -186,7 +186,7 @@ export default {
       });
     }
 
-    // Use Barcode Detection API instead of html5qrcode's logic
+    // use Barcode Detection API instead of html5qrcode's logic
     function onScanSuccess() {
       return;
     }
@@ -288,9 +288,8 @@ export function _mapFormats(formats) {
       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.'
-        );
+          'a string supported by the "BarcodeFormat" enumeration ' +
+          'must be given, e.g., "qr_code", not a number.');
       }
       throw new TypeError(`Unsupported format "${format}".`);
     }
diff --git a/components/ScannerUI.vue b/components/ScannerUI.vue
index d04fb79..f12f021 100644
--- a/components/ScannerUI.vue
+++ b/components/ScannerUI.vue
@@ -169,7 +169,7 @@ export default {
     // use functions
     const $q = useQuasar();
 
-    // Start scanner at zoom level 2 for iOS
+    // start scanner at zoom level 2 for iOS
     const zoom = ref($q.platform.is.ios ? 2 : 1);
 
     watch(zoom, updatedValue => {

From 3165e1adba69d852a128a85ea79d25a147d5739c Mon Sep 17 00:00:00 2001
From: James Easter <jeaster@digitalbazaar.com>
Date: Thu, 3 Apr 2025 13:10:10 -0600
Subject: [PATCH 9/9] Ignore scan cancellation and log other errors while
 closing scanner.

---
 components/BarcodeScanner.vue | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/components/BarcodeScanner.vue b/components/BarcodeScanner.vue
index 93542cd..aa96943 100644
--- a/components/BarcodeScanner.vue
+++ b/components/BarcodeScanner.vue
@@ -157,9 +157,17 @@ export default {
 
     async function emitScanResult({barcodeDetector, video}) {
       const {signal} = abortController;
-      const barcodes = await detectBarcodes({barcodeDetector, video, signal});
-      const [result] = barcodes;
-      emit('result', {type: result.format, text: result.rawValue});
+      try {
+        const barcodes = await detectBarcodes({barcodeDetector, video, signal});
+        const [result] = barcodes;
+        emit('result', {type: result.format, text: result.rawValue});
+      } catch(e) {
+        // ignore scan cancellation; log errors and close scanner
+        if(e.name !== 'AbortError') {
+          console.error(e);
+          emit('close');
+        }
+      }
     }
 
     function startBarcodeDetection() {