Live scan feature

[rugk]

It would be nice if this lib could have a live scan/live stream feature - just like this lib for barcodes -, so you can easily use it to read QR codes in real time.

Also related to/required for https://github.com/edi9999/jsqrcode/issues/29

[rugk]

Actually a problem for this is how to efficiently get the image data from a video element without saving it in a canvas first. @edi9999, do you have any suggestions/ideas?

[rugk]

Okay, I found some ways, but actually decoding does not work at all on mobile devices (tested with Firefox for Android). It always fails with: Couldn't find enough finder patterns:0 patterns found

The code I used is here: https://gist.github.com/rugk/44e9cd89f3b67adfcb229843fffed02

And even when using your test file on the desktop with some photos of a QR code and some surrounding elements, only 2 of 4 images were recognized in my case. (If you want the test pics, I can mail them to you)

[edi9999]

The URL file gist is a 404.

Yes, I'd be interested in the images, but if possible, it would be good to add them in the testsuite. Do you have confidential data on those images ?

[rugk]

No, but it's easy to create new images. (I only wanted to share them, so you can reproduce the issues…) The real link is https://gist.github.com/rugk/44e9cd89f3b67adfcb229843fffed02f.

[Lucassifoni]

Here's what I'm using to live-scan (extracted and approximately rewritten from my vue files, it's now pseudo-code for some parts and I messed up indentation when pasting), I'm mid-development and will refactor & temper everything, so it's a mess right now.

Edit : see comment below

[rugk]

Is there a proof of concept one can use to test it?

[Lucassifoni]

I'll make a github page with a runnable version this afternoon.

[Lucassifoni]

@rugk here's a demo : https://lucassifoni.github.io/qr-code-live-scan/ I'm really sorry for the packaging though, you currently both have to run

npm run watch

And serve it accordingly, with

php -S localhost:8080

or

caddy

or whatever suits your use. Without mentioning that the code is currently a mess and needs to be refactored, and that my package.json includes way too much things. I added qrcode-reader to the repo, because I removed a case invoking new Image() in my worker script, that made it fail.

Regardless, the demo works, and is configured to run at 45 FPS and ask for a scan (if the worker isn't busy) every 17 frames. With this setup, my testing Motorola G (1gb ram, quite weak computing power) manages to keep everything fluid.

Feel free to ask anything, I'll have to elaborate on this and cover more use-cases for a current project, this is our first draft.

[GaylPy]

Salut Lucas, ta démo avec support WebRTC fonctionne très bien. J'ai besoin de ce système pour un projet mais je n'y arrive pas avec le projet de LazarSoft, c'est très instable. Alors que ta démo me détecte facilement et rapidement les QRCodes ! Merci beaucoup, je vais récupérer tes sources, on verras si j'arrive à le faire fonctionner :)

[Lucassifoni]

Le repo est très sale parce que je n'arrivais pas à configurer webpack pour compiler mon worker séparément avec la base fournie par vue-cli, d'où les dépendances demandées par vue-cli ET laravel-mix (qui n'est qu'un wrapper autour de webpack). J'ai l'impression que réécrire la lib en s'inspirant de ça https://github.com/cozmo/jsQR/pull/25 pourrait être bon pour les perfs, cependant. C'est pour un gros soft interne, donc c'est possible que je prenne le temps de le faire.

//

The repository is really messy because I couldn't configure webpack to separately compile my worker with the vue-cli generated configuration, so that's why both vue-cli/webpack & laravel-mix dependencies are required. Anyway, laravel-mix is only a webpack wrapper. I feel like rewriting the library following this trail https://github.com/cozmo/jsQR/pull/25 could improve performance. We'll maybe put the time for it.