fix(ui): scanning of small QR codes

[AlCalzone]

https://github.com/nimiq/qr-scanner uses the native BarcodeDetector if available in browsers (essentially only Chrome), otherwise defaults to a JS port of ZXing. That port seems to be suboptimal, since it really struggles with the small Z-Wave QR codes.

https://www.npmjs.com/package/barcode-detector is a polyfill based on the WASM version of ZXing, which works much, much better. I was able to scan a tiny, blurry, distorted QR code in a second, without having to select "small QR code", or aiming a lot.

We need to decide how to include the wasm module though, since we don't want to download it at runtime, see https://github.com/Sec-ant/barcode-detector?tab=readme-ov-file#setzxingmoduleoverrides

[coveralls]

Pull Request Test Coverage Report for Build 11344607116

Details

• 0 of 0 changed or added relevant lines in 0 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage remained the same at 21.021%

---

Totals
Change from base Build 11341592356:	0.0%
Covered Lines:	3925
Relevant Lines:	19852

---

💛 - Coveralls

[robertsLando]

@AlCalzone You mean this?

// src/index.ts
import wasmFile from "../node_modules/zxing-wasm/dist/reader/zxing_reader.wasm?url";

import {
  setZXingModuleOverrides,
  BarcodeDetector,
} from "barcode-detector/pure";

setZXingModuleOverrides({
  locateFile: (path, prefix) => {
    if (path.endsWith(".wasm")) {
      return wasmFile;
    }
    return prefix + path;
  },
});

const barcodeDetector = new BarcodeDetector();

// detect barcodes
// ...

[AlCalzone]

Yes, minus the const barcodeDetector = ...

[AlCalzone]

Suggested change

	import { setZXingModuleOverrides } from 'barcode-detector/pure'
	import 'barcode-detector/side-effects'
	import { setZXingModuleOverrides } from 'barcode-detector'

should work as well