halfmoonui
commented
9 months ago @crypto-rizzo So I've dove into the libraries vs what we do with our existing setup. The following are some important points to note. Would like to get your thoughts here.
The library we currently use (html5-qrcode) is very widely adopted and supported. This is of course not the most important thing, but we are currently using a config which is less than ideal. Mainly, we set fps to 1 (default is 2, and all examples on their docs use 10). From the docs:
A.K.A frame per second, the default value for this is 2, but it can be increased to get faster scanning. Increasing too high value could affect performance. Value >1000 will simply fail.
Therefore, we are intentionally making our scanner slower for some reason. From some initial testing, setting fps to 10 and adding a QR box (see pic below), the bottleneck for the scanner becomes the server request, as in HTMX sending and getting back the notification. At the very least, the performance difference on the scanning only is most likely going to be negligible here (compared to the WASM libs). At this point, I would recommend sticking to our current setup, increasing fps to 10, and adding a QR box for better UX.
Also another thing that's worth noting, the WASM libraries would need manual implementation on our side. As in, we would have to write code to start webcam/camera, capture the image and then scan. From my understanding, those libraries don't support auto initialization like html5-qrcode.
EDIT: Honestly not sure if the QR box is better for UX or not. From some initial testing, I think it's better because it helps me quickly understand where to point the camera. But again, open to feedback/changes.
https://github.com/undecaf/zbar-wasm https://github.com/maslick/koder