ReactJS QR Code Scanner

Last month, I was tempted to develop my own QR Code Scanner using ReactJS web application which runs on HTML5 supported browsers. So far, I was not able to find any suitable components / samples in public repository for me to us.

So let me share what I have done in this article. For those of you who like to get the code, help yourself to fork my code https://github.com/Cyder-SG/reactjs-qrcode-scanner.

Basically there are 2 parts of the solution:

1. Web application, written in ReactJS, https://github.com/Cyder-SG/reactjs-qrcode-scanner/tree/main/web, and
2. Web API, written in SprintBoot, https://github.com/Cyder-SG/reactjs-qrcode-scanner/tree/main/api

The following illustrates the solution flow, which I explain below.

1. Image reader

The image reader is made up of few components.

First is the HTML5 video (https://github.com/Cyder-SG/reactjs-qrcode-scanner/blob/main/web/src/qrReader.js), see below.

The key thing is the video device ID recognition. In my use case, I use mobile device, so I am only interested in the ‘back’ camera, so this is how I get the correct video device ID

How does it start the video?

2. Now it is time to upload the file to server. You might notice that the ReactJS component does not parse image and try to decode the QR Code out of the scanned image. Yes, that’s true, we leverage backend API to provide the image recognition algorithm and get the QR code and parse it.

3. The ReactJS web app job is done, now it is the API take the input image, try to find QR Code, and decode it.

4. If you notice, I use BoofCV to detect QR code and decode it.

5. The response part if quite simple, it just gets the parse text and show it to the screen

6. Showing the last scanned QR Code

Feel free to let me know if you have any feedback, comment, issues?