Polyfill BarcodeDetector API for improved performance of Html5QRcodeScanner

Author: jbtronics

assets/js/app.js

@@ -44,4 +44,21 @@ import "./register_events";
 import "./tristate_checkboxes";
 
 //Define jquery globally
-window.$ = window.jQuery = require("jquery")
+window.$ = window.jQuery = require("jquery");
+
+//Use the local WASM file for the ZXing library
+import {
+    setZXingModuleOverrides,
+} from "barcode-detector/pure";
+import  wasmFile from "../../node_modules/zxing-wasm/dist/reader/zxing_reader.wasm";
+
+setZXingModuleOverrides({
+    locateFile: (path, prefix) => {
+        if (path.endsWith(".wasm")) {
+            return wasmFile;
+        }
+        return prefix + path;
+    },
+});
+//Enable polyfill for the barcode detector. The WASM triggering is done when the barcode detector is used
+import "barcode-detector/side-effects";

package.json

@@ -72,6 +72,7 @@
         "@zxcvbn-ts/language-en": "^3.0.1",
         "@zxcvbn-ts/language-fr": "^3.0.1",
         "@zxcvbn-ts/language-ja": "^3.0.1",
+        "barcode-detector": "^2.3.1",
         "bootbox": "^6.0.0",
         "bootswatch": "^5.1.3",
         "bs-custom-file-input": "^1.3.4",

webpack.config.js

@@ -59,6 +59,12 @@ Encore
     .addEntry('app', './assets/js/app.js')
     .addEntry('webauthn_tfa', './assets/js/webauthn_tfa.js')
 
+    //Configure to just output the zxing wasm file, without parsing it
+    .addRule({
+        test: /zxing_reader\.wasm$/,
+        type: "asset/resource"
+    })
+
     //.addEntry('page1', './assets/js/page1.js')
     //.addEntry('page2', './assets/js/page2.js')
 
@@ -189,6 +195,10 @@ if (Encore.isDev()) {
 
 module.exports = Encore.getWebpackConfig();
 
+//Enable webassembly support
+module.exports.experiments = module.exports.experiments || {};
+module.exports.experiments.asyncWebAssembly = true;
+
 //Enable webpack auto public path (this only works in combination with WebpackAutoPathSubscriber!!)
 //We do it here to supress a warning caused by webpack Encore
 module.exports.output.publicPath = 'auto';

yarn.lock

@@ -1932,6 +1932,16 @@
   resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.2.0.tgz#cccaab758af56761eb7bf37af6f03f326dd798ad"
   integrity sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==
 
+"@types/[email protected]":
+  version "0.1.11"
+  resolved "https://registry.yarnpkg.com/@types/dom-webcodecs/-/dom-webcodecs-0.1.11.tgz#2e36e5cc71789551f107e2fe15d956845fa19567"
+  integrity sha512-yPEZ3z7EohrmOxbk/QTAa0yonMFkNkjnVXqbGb7D4rMr+F1dGQ8ZUFxXkyLLJuiICPejZ0AZE9Rrk9wUCczx4A==
+
+"@types/emscripten@^1.39.13":
+  version "1.39.13"
+  resolved "https://registry.yarnpkg.com/@types/emscripten/-/emscripten-1.39.13.tgz#afeb1648648dc096efe57983e20387627306e2aa"
+  integrity sha512-cFq+fO/isvhvmuP/+Sl4K4jtU6E23DoivtbO4r50e3odaxAiVdbfSYRDdJ4gCdxx+3aRjhphS5ZMwIH4hFy/Cw==
+
 "@types/eslint-scope@^3.7.7":
   version "3.7.7"
   resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.7.tgz#3108bd5f18b0cdb277c867b3dd449c9ed7079ac5"
@@ -2401,6 +2411,14 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
+barcode-detector@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/barcode-detector/-/barcode-detector-2.3.1.tgz#91d0d4e3b913d87f94bae5d024b6b9b5cedc420c"
+  integrity sha512-D9KEtrquS1tmBZduxBZl8qublIKnRrFqD8TAHDYcLCyrHQBo+vitIxmjMJ61LvXjXyAMalOlO7q0Oh/9Rl2PbQ==
+  dependencies:
+    "@types/dom-webcodecs" "0.1.11"
+    zxing-wasm "1.3.4"
+
 [email protected]:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.3.1.tgz#58ece8cb75dd07e71ed08c736abc5fac4dbf8df1"
@@ -6959,3 +6977,10 @@ yocto-queue@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-1.1.1.tgz#fef65ce3ac9f8a32ceac5a634f74e17e5b232110"
   integrity sha512-b4JR1PFR10y1mKjhHY9LaGo6tmrgjit7hxVIeAmyMw3jegXR4dhYqLaQF5zMXZxY7tLpMyJeLjr1C4rLmkVe8g==
+
+[email protected]:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/zxing-wasm/-/zxing-wasm-1.3.4.tgz#4bc45b78dc3594278bb0c24233bfb035ca9efab1"
+  integrity sha512-9l0QymyATF19FmI92QHe7Dayb+BUN7P7zFAt5iDgTnUf0dFWokz6GVA/W9EepjW5q8s3e89fIE/7uxpX27yqEQ==
+  dependencies:
+    "@types/emscripten" "^1.39.13"