Skip to content

Update QR code scan library

Branch: qr-code-scanner

The library we currently use for scanning QR codes, zxing-js, needs to be replaced as it is no longer maintained. (Apologies, I started writing this in German before migrating to GitLab Issues)

Anforderungen

  • JavaScript/TypeScript-Bibliothek, die QR Codes lesen kann.
  • Wann möglich, soll die Bibliothek auf eingebaute Browser-Features zurückgreifen. In Browsern wird gerade QR Scanning nativ eingebaut, d.h. langfristig wollen wir sowieso von externen Bibliotheken weg. Bis dahin müssen wir auf externe Funktionalität zurückgreifen – aber eben nur, wo nötig. (Möglicherweise kann man das auch selbst implementieren?)
  • The user must be able to manually select a camera, if need be.
  • Library to be used is still maintained
  • No CommonJS, aka should have as little impact as possible on the bundle size.
  • Möglichst geringe Größe. zxing-js/library hat 66 MB.
  • MIT-Lizenz.

Technische Anforderungen von zxing-js

  • The browser layer is using the MediaDevices web API which is not supported by older browsers.
  • Also, note that the library is using the TypedArray (Int32Array, Uint8ClampedArray, etc.) which are not available in older browsers (e.g. Android 4 default browser).

Lösungsansätze

ericblade/Quagga2

https://github.com/ericblade/quagga2 36 MB

  • Last commit: 09/2022, active releases
  • Einigermaßen bekannt

nimiq/qr-scanner

https://github.com/nimiq/qr-scanner 60 kB (!)

  • Last commit: 06/2022, no releases
  • Based on cozmo/jsqr (zxing port, wird wohl nicht mehr maintained)
  • Uses the browser's native BarcodeDetector if available

➝ STATUS: Implementiert, scheint zu funktionieren

Native browser

Bisher: MediaDevices, von allen Browsern unterstützt. WICG (Web Platform Incubator Community Group, Google) entwickelt gerade Shape Detector API. Diese soll Barcodes, Text und Gesichter erkennen können, ist aber nicht Teil des W3C-Standards. Aktuell ist nur Barcode Detector API für macOS (Chrome, Opera) verfügbar. Diese soll etwa doppelt so schnell wie zxing sein.

Früher scheinbar: In Canvas-Element Kamerabild reinlegen, Canvas auslesen, mit Library QR Code aus Kamerbild auswerten Implementierung

  1. https://www.jsnow.io/p/javascript/creating-a-real-time-qr-code-scanner-with-vanilla-javascript-part-1
  2. https://daily-dev-tips.com/posts/detecting-barcodes-from-the-webcam/

Todos

  • Install qr-scanner in features workspace
  • Find out if there's a way to select the correct camera using only qr-scanner
  • See how much of the old code in scan-modal.component you can get rid of
  • Linting
  • Uninstall zxing
  • (Nice-to-have) Use RC color scheme for highlightScanRegion

Known issues

  • I'm having trouble getting the camera selection to work, see my WIP commit. I'm loading the HCP version on my laptop and Pat version on my smartphone and transmitting a symptom check. The scanner will default to one of the rear cameras. Selecting another camera from the drop-down menu either does nothing or disables the camera altogether and throws a console error "No camera found". Sometimes it does work perfectly when reloading, sometimes even just letting the opened scanner sit for a few minutes makes it work.
Edited by Andreas Pittrich