HTML5 QR Code for Vaadin | Vaadin

A Vaadin 23 component which wraps the HTML5 QR Code Scanner.

This is a Vaadin Java component which wraps the html5-qrcode Javascript library derived from the project at:

html5-qrcode

Note the decoder used for the QR code reading is from :

Zxing-js

Refer to the following blog for a full description:

HTML5 QR Code scanner

This add-on was developed because the existing QR code add-ons in the Vaadin directory (e.g ZXingVaadin) were found to be non-functional under Vaadin 23.

For the component to work the host application must have a route to the download location of the Javascript library, i.e. an internet connection is required and offline usage is not possible.

Some effort was expended in attempting to package it in the form of a Lit Template in conjunction with an npm package, as a more natural package format. However, this failed due to the scanner not initialising in the view although it appeared to be present in the page (confirmed using Chrome Developer tools). The problem seemed to be similar to those encountered while testing other Vaadin QR add-ons.

I hope this component is of use to other Vaadin developers. Note I have only fully evaluated this component on the following configuration:

html5-qrcode 2.2.1, Vaadin 23.0.7, Java 17 and SpringBoot 2.6.7

and no guarantees (or support) can be offered for other configurations. My smartphone is a Motorola G7 Play running Android 10.

Install

Link to this version
TestedReleased 01 September 2022Apache License 2.0
Framework Support
Vaadin platform 23
Browser Compatibility
Install with
Release notes - Version 1.0.2

Changed the groupId (and refactored package names) for compatibility with Vaadin Directory validation