From 4b09a321ad2145aa608669949bbf9115ec6d86be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20B=C3=B6hmer?= Date: Sat, 4 Jan 2025 16:49:17 +0100 Subject: [PATCH 1/4] Polyfill BarcodeDetector API for improved performance of Html5QRcodeScanner --- assets/js/app.js | 19 ++++++++++++++++++- package.json | 1 + webpack.config.js | 10 ++++++++++ yarn.lock | 25 +++++++++++++++++++++++++ 4 files changed, 54 insertions(+), 1 deletion(-) diff --git a/assets/js/app.js b/assets/js/app.js index fd7db935..7d9bd164 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -44,4 +44,21 @@ import "./register_events"; import "./tristate_checkboxes"; //Define jquery globally -window.$ = window.jQuery = require("jquery") \ No newline at end of file +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"; \ No newline at end of file diff --git a/package.json b/package.json index 1fdf69d8..dccbc4c3 100644 --- a/package.json +++ b/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", diff --git a/webpack.config.js b/webpack.config.js index d5243897..77cab81e 100644 --- a/webpack.config.js +++ b/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'; diff --git a/yarn.lock b/yarn.lock index 9982fee9..f4f2a881 100644 --- a/yarn.lock +++ b/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/dom-webcodecs@0.1.11": + 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" + base64-js@1.3.1: 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== + +zxing-wasm@1.3.4: + 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" From 53dcd2421680aab28dc52c4324ddb71b47bcb36b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20B=C3=B6hmer?= Date: Sat, 4 Jan 2025 16:57:41 +0100 Subject: [PATCH 2/4] Improved scanning FPS to 10 --- assets/controllers/pages/barcode_scan_controller.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/controllers/pages/barcode_scan_controller.js b/assets/controllers/pages/barcode_scan_controller.js index 5f82a39e..5fadc1ad 100644 --- a/assets/controllers/pages/barcode_scan_controller.js +++ b/assets/controllers/pages/barcode_scan_controller.js @@ -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 From 0c627a563649f3a988a5e3ce010a25856ed95f99 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20B=C3=B6hmer?= Date: Sat, 4 Jan 2025 18:09:56 +0100 Subject: [PATCH 3/4] Use forked version of html5-qrcode to avoid including zxing-js which will never be used then --- assets/controllers/pages/barcode_scan_controller.js | 2 +- package.json | 2 +- yarn.lock | 10 +++++----- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/assets/controllers/pages/barcode_scan_controller.js b/assets/controllers/pages/barcode_scan_controller.js index 5fadc1ad..7698cbed 100644 --- a/assets/controllers/pages/barcode_scan_controller.js +++ b/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 { diff --git a/package.json b/package.json index dccbc4c3..ad541432 100644 --- a/package.json +++ b/package.json @@ -88,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", diff --git a/yarn.lock b/yarn.lock index f4f2a881..7072f031 100644 --- a/yarn.lock +++ b/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" @@ -4037,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" From 22fba37d281488ff2935d7beafbd3df5baaeae50 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jan=20B=C3=B6hmer?= Date: Sat, 4 Jan 2025 18:10:26 +0100 Subject: [PATCH 4/4] Pause the camera and scanner, when navigating away from the scanner page, so that the camera feed is closed --- assets/controllers/pages/barcode_scan_controller.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/assets/controllers/pages/barcode_scan_controller.js b/assets/controllers/pages/barcode_scan_controller.js index 7698cbed..368fef43 100644 --- a/assets/controllers/pages/barcode_scan_controller.js +++ b/assets/controllers/pages/barcode_scan_controller.js @@ -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;