QR Code scanning

Flow
1

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?

2

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

3

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

4

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

5

Thanks @secure-leopard and @quirky-zebra !

6

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 */ }, );

7

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

8

Agreed, it’ll be easier to maintain that way

9

@disciplined-goat did you eventually get it working?

10

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

11

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

12

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

13

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

14

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

15

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

16

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

17

Using Chrome on an Android device.

18

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

19

image.png

20

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