HTML5 QR Code for Vaadin

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

View larger

Close

View larger

Close

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.

Sample code

        Map<String, Object> options = new HashMap<>();

        options.put(Option.fps.name(), 10);
        options.put(Option.qrbox.name(), 250);
        options.put(Option.supportedScanTypes.name(), "[Html5QrcodeScanType.SCAN_TYPE_CAMERA]");

        Html5Qrcode component = new Html5Qrcode(sc -> {
            LOGGER.info("uuid = " + sc.getValue());
        }, options);

Links

• View on GitHub

Compatibility