How WebWorker Waved our React.js QR Code Scanner Component
About a year ago we started development of Web based mobile application development targeting to run in mobile web browsers. In short mobile app was about having some tool to locate specific warehouse inventory by scanning QR codes.
Here is the main flow for our application
- Open device native camera from requesting browser HTML5 permission
- Capture QR code and get text from that image
- Send scanned text to the server
- If code exists in database, navigate to that inventory details page.
Seems pretty simple, and it is!
The beginning
We started this project as a simple React.js app, and used jsQR library to get QR code text out of captured image.
On desktop it worked perfectly. Whenever we tried to scan QR code from laptop webcam, it worked instantly without any issue. So we thought that’s it! BUT it turns out on mobile device processing of captured images with window.requestAnimationFrame frequency was a hard task for mobile device CPU. So we started to think about tweaking somehow this process to get maximum performance without freezing UI thread.
