Improve performance with WebAssembly

[gruhn]

Scanning a frame for QR codes is a rather expensive operation. The library responsible for this job (jsQR) also makes up a major part of the bundle size. Maybe performance could be increased by using a WebAssembly module instead. This component depends on modern browser features anyway so browser support shouldn't suffer too bad?

[radar155]

Thank you for your awesome library and your awesome support! Switching to WebAssebly would be a killer feature, both to have better performance and to reduce bundle size. Moreover, it seems that support from major browser it's almost the same both for WebAssembly and getUserMedia/Stream API.

Have you ever thought about using WebWorkers? Should they improve performance in this scenario? Maybe using concurrency.. I admit I know nothing about the qr decoding algorithm, I don't know if it can be implemented concurrenlty.

[gruhn]

Thanks 😁

I have no in depth knowledge about QR code processing either. I thought there might be a library that's using WebAssembly out of the box. I haven't found one yet but quirc-js looks promising. It's build with asm.js (I think) and shows pretty decent performance. I really like to get position tracking smoother and quirc-js seems to do this pretty well. My previous attempts to migrate to quirc-js caused bad memory leaks though and I don't know why. I can open a pull request to show you my work if your interested. Bundle impact of quirc.js is also heavier compared to jsQR.

Web Workers would also be a good idea. I don't even think they have to be used internally in the scanning process. Maybe it's already beneficial to wrap everything scanning related in a worker and communicate results with the UI. I wanted to checkout this package for a long time anyway.

However, I'm rather busy at the moment but pull requests are welcome if you like to help 😁👍

[radar155]

quirc.js is pretty fast! Maybe I could debug that memory leaks but I'm very busy too. If you want, open a PR, I will take a look in few weeks.

[gruhn]

I just discovered AssemblyScript which compiles TypeScript to WebAssembly. jsQR is written in TypeScript so this might yield some performance gain.

[StefanFeederle]

Do you know about the Shape Detection API? It's using native modules to scan for barcodes (and text and faces). This way we could avoid shipping huge js/webassembly bundles.
https://github.com/WICG/shape-detection-api
https://www.chromestatus.com/feature/4757990523535360

[gruhn]

Yeah, I heard of it. I hope this becomes usable soon.

[qnp]

Hello,
I would appreciate an example of a working Worker using quirc-js, if someone acheived to do it ?