agritheory
[mobile] Camera to Barcode
Resolves
https://github.com/agritheory/beam/issues/293
Dependency
I chose to use the html5-qrcode dependency based on its download count and documentation quality.
I also reviewed vue-barcode-reader and @zxing/browser. The first one has only ~5k downloads compared to html5-qrcode's ~248k, and it does not seem to have the same level of support.
@zxing/browser could also be a good alternative, but I decided to proceed with html5-qrcode.
How to test
To access the device camera, the app must be served over HTTPS. For this reason, I used ngrok (I believe we used it before): https://dashboard.ngrok.com/get-started/setup/windows
Once ngrok is installed, open a new terminal and run: ngrok http 8000 (in my case I used port 8004)
Demo
For now, I only implemented the camera on the Move page.
On my computer, I do not have a camera installed, so the button to open the camera does not appear:
On my phone:
Live Demo
https://github.com/user-attachments/assets/07c4b1a5-c27a-40b9-89b0-2f07d6fe85f2
