QR Code scanning

Hi. I searched through Vaadin directory for a QR code scanner addon and tested both of them. Addons are not as reliable as native android app. What are your experiences with qr scanning in Vaadin, if any?

Marcus had a video about it for hilla / fusion that could be theoretically adopted to flow with a custom component https://youtube.com/watch?v=WC179bmycnI

Thanks for response. But I have no knowledge on Hilla. I’ll check it out.

You could combine it with this video to create a Flow API for that component https://www.youtube.com/watch?v=E31ei5zklb8

Thanks @secure-leopard and @quirky-zebra !

How can I call JS constructor from Java

const qrScanner = new QrScanner( videoElem, result => console.log('decoded qr code:', result), { /* your options or returnDetailedScanResult: true if you're not specifying any other options */ }, );

I would create a lit component doing all the JavaScript magic and don’t fiddle with such low level on the server side

Agreed, it’ll be easier to maintain that way

@disciplined-goat did you eventually get it working?

@secure-leopard any idea whether things have changed in this direction since then?

For instance: https://vaadin.com/directory/component/qr-scanner … this one only works with the front camera, and haven’t been able to actually decode QR codes so far

Also tried this one: https://vaadin.com/directory/component/zxingvaadin … but even in their demo the app seems to be loading constantly… my app keep reloading each time I attempt to load the view with this component on it

So, wondering whether someone was able to get this working so far… I’d expect Vaadin Flow to be quite mature, with reliable components, given that it’s around for such a long time now

@adorable-crane Could you possibly give a helping hand, please?

The demo is working on iPhone 12 Pro. Can you please post the error message in dev tools of your browser?

On my smartphone, it only displays the rectangle. No video feed.

Using Chrome on an Android device.

Unsure how to provide you with dev tool details from the device.


This is how it looks on the simulator. Please note the blinking “loading” bar at the top.