Merge branch 'detector-api-polyfill'

Author: jbtronics

assets/controllers/pages/barcode_scan_controller.js

@@ -20,7 +20,7 @@
 import {Controller} from "@hotwired/stimulus";
 //import * as ZXing from "@zxing/library";
 
-import {Html5QrcodeScanner, Html5Qrcode} from "html5-qrcode";
+import {Html5QrcodeScanner, Html5Qrcode} from "@part-db/html5-qrcode";
 
 /* stimulusFetch: 'lazy' */
 export default class extends Controller {
@@ -50,7 +50,7 @@ export default class extends Controller {
         });
 
         this._scanner = new Html5QrcodeScanner(this.element.id, {
-            fps: 2,
+            fps: 10,
             qrbox: qrboxFunction,
             experimentalFeatures: {
                 //This option improves reading quality on android chrome
@@ -61,6 +61,11 @@ export default class extends Controller {
         this._scanner.render(this.onScanSuccess.bind(this));
     }
 
+    disconnect() {
+        this._scanner.pause();
+        this._scanner.clear();
+    }
+
     onScanSuccess(decodedText, decodedResult) {
         //Put our decoded Text into the input box
         document.getElementById('scan_dialog_input').value = decodedText;

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",
@@ -87,7 +88,7 @@
         "dompurify": "^3.0.3",
         "emoji.json": "^15.0.0",
         "exports-loader": "^5.0.0",
-        "html5-qrcode": "^2.2.1",
+        "@part-db/html5-qrcode": "^3.0.0",
         "json-formatter-js": "^2.3.4",
         "jszip": "^3.2.0",
         "katex": "^0.16.0",

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

@@ -1874,6 +1874,11 @@
   resolved "https://registry.yarnpkg.com/@orchidjs/unicode-variants/-/unicode-variants-1.1.2.tgz#1fd71791a67fdd1591ebe0dcaadd3964537a824e"
   integrity sha512-5DobW1CHgnBROOEpFlEXytED5OosEWESFvg/VYmH0143oXcijYTprRYJTs+55HzGM4IqxiLFSuqEzu9mPNwVsA==
 
+"@part-db/html5-qrcode@^3.0.0":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@part-db/html5-qrcode/-/html5-qrcode-3.0.1.tgz#3eafb7b4cb24eab8a4b815800756814f1d10c8bb"
+  integrity sha512-NAbXfrW7pEyK3+ZkL14+pHHq3vjBPn7WWvd82OG0BHbiZ5P3XHJnx33WBUaoUAt2pRRAFYVwQNw8OyNUSE8aeg==
+
 "@polka/url@^1.0.0-next.24":
   version "1.0.0-next.28"
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.28.tgz#d45e01c4a56f143ee69c54dd6b12eade9e270a73"
@@ -1932,6 +1937,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 +2416,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"
@@ -4019,11 +4042,6 @@ html-escaper@^2.0.2:
   resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
   integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
 
-html5-qrcode@^2.2.1:
-  version "2.3.8"
-  resolved "https://registry.yarnpkg.com/html5-qrcode/-/html5-qrcode-2.3.8.tgz#0b0cdf7a9926cfd4be530e13a51db47592adfa0d"
-  integrity sha512-jsr4vafJhwoLVEDW3n1KvPnCCXWaQfRng0/EEYk1vNcQGcG/htAdhJX0be8YyqMoSz7+hZvOZSTAepsabiuhiQ==
-
 htmlparser2@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-6.1.0.tgz#c4d762b6c3371a05dbe65e94ae43a9f845fb8fb7"
@@ -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"