fix(ui): scanning of small QR codes (#3946)

Co-authored-by: Daniel Lando <daniel.sorridi@gmail.com>

package.json

@@ -70,6 +70,7 @@
     "ansi_up": "^6.0.2",
     "archiver": "^7.0.1",
     "axios": "^1.7.2",
+    "barcode-detector": "^2.2.11",
     "connect-history-api-fallback": "2.0.0",
     "cookie-parser": "^1.4.6",
     "cors": "^2.8.5",
@@ -111,7 +112,8 @@
     "vuetify": "^2.7.2",
     "winston": "^3.13.0",
     "winston-daily-rotate-file": "^5.0.0",
-    "zwave-js": "^13.9.0"
+    "zwave-js": "^13.9.0",
+    "zxing-wasm": "^1.2.15"
   },
   "devDependencies": {
     "@actions/github": "^6.0.0",

src/components/custom/QrReader.vue

@@ -133,12 +133,29 @@
 	</div>
 </template>
 <script>
-import QrScanner from 'qr-scanner'
+// The BarcodeDetector Web API is not yet supported in all browsers,
+// and "qr-scanner" defaults to a suboptimal implementation if it is not available.
+// The following import makes a better implementation available that is based on a
+// WebAssembly port of ZXing:
+import { setZXingModuleOverrides } from 'barcode-detector'
 import { wait } from '../../lib/utils.js'
 import logger from '../../lib/logger'
 
 const log = logger.get('QrReader')
 
+import QrScanner from 'qr-scanner'
+
+setZXingModuleOverrides({
+	locateFile: (path, prefix) => {
+		if (path.endsWith('.wasm')) {
+			// This file has been copied from node_modules/zxing-wasm/dist/reader/ to public/
+			// Don't forget to update the file when updating the node_module
+			return 'zxing_reader.wasm'
+		}
+		return prefix + path
+	},
+})
+
 export default {
 	props: {
 		qrbox: {