Use barcode-detector polyfill as secondary decoder, even if native lib is available

The polyfill has sometimes better recognition quality than the native lib, so additionally use it to improve detection quality.

Author: jbtronics

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@part-db/html5-qrcode",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "description": "A cross platform HTML5 QR Code & bar code scanner (forked for Part-DB)",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",
@@ -89,5 +89,8 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "dependencies": {
+    "barcode-detector": "^2.3.1"
   }
 }

package.json

@@ -40,14 +40,20 @@ export class Html5QrcodeShim implements RobustQrcodeDecoderAsync {
         logger: Logger) {
         this.verbose = verbose;
 
-        if (!BarcodeDetectorDelegate.isSupported()) {
-            throw new Error("BarcodeDetector is not supported by this browser. Use Polyfill if required!");
-        }
+        //If native BarcodeDetector is supported, use it as primary decoder and polyfill as secondary.
+        if (BarcodeDetectorDelegate.isNativeSupported()) {
+            logger.log("Native BarcodeDetector is supported, using it as primary decoder.");
 
-        //Always use BarcodeDetector, as we removed the zxing-js library.
-        this.primaryDecoder = new BarcodeDetectorDelegate(
-            requestedFormats, verbose, logger);
+            this.primaryDecoder = new BarcodeDetectorDelegate(
+                requestedFormats, verbose, logger);
+            this.secondaryDecoder = new BarcodeDetectorDelegate(
+                requestedFormats, verbose, logger, true);
+        } else { //Otherwise use polyfill as primary decoder.
+            logger.log("Native BarcodeDetector is not supported, using polyfill as primary decoder.");
 
+            this.primaryDecoder = new BarcodeDetectorDelegate(
+                requestedFormats, verbose, logger, true);
+        }
     }
 
     async decodeAsync(canvas: HTMLCanvasElement): Promise<QrcodeResult> {

src/code-decoder.ts

@@ -20,6 +20,9 @@ import {
     Logger
 } from "./core";
 
+//@ts-ignore
+import { BarcodeDetector as BarcodeDetectorPolyfill } from "barcode-detector/pure";
+
 declare const BarcodeDetector: any;
 
 /** Config for BarcodeDetector API. */
@@ -98,7 +101,7 @@ interface BarcodeDetectorResult {
      * getSupportedFormats() API.
      * @returns 
      */
-    public static isSupported(): boolean {
+    public static isNativeSupported(): boolean {
         if (!("BarcodeDetector" in window)) {
             return false;
         }
@@ -109,17 +112,22 @@ interface BarcodeDetectorResult {
     public constructor(
         requestedFormats: Array<Html5QrcodeSupportedFormats>,
         verbose: boolean,
-        logger: Logger) {
-        if (!BarcodeDetectorDelegate.isSupported()) {
-            throw "Use html5qrcode.min.js without edit, Use "
-                + "BarcodeDetectorDelegate only if it isSupported();";
+        logger: Logger,
+        usePolyfill: boolean = false,
+        ) {
+        if (!usePolyfill && !BarcodeDetectorDelegate.isNativeSupported()) {
+            throw "BarcodeDetector is not supported natively by this browser. Use Polyfill by setting usePolyfill to true!";
         }
         this.verbose = verbose;
         this.logger = logger;
 
         // create new detector
         const formats = this.createBarcodeDetectorFormats(requestedFormats);
-        this.detector = new BarcodeDetector(formats);
+        if (!usePolyfill) { //Use the native version
+            this.detector = new BarcodeDetector(formats);
+        } else { //Otherwise use the polyfill
+            this.detector = new BarcodeDetectorPolyfill(formats);
+        }
 
         // check compatibility
         if (!this.detector) {

src/native-bar-code-detector.ts

@@ -17,6 +17,8 @@
         "preserveConstEnums": true,
         "noImplicitAny": true,
 
+        "skipLibCheck": true,
+
         // Allow javascript source to be built
         "allowJs": true
     },