Have you tried to build a QR scanner using only web technologies? If you did it a few years ago, you had to use some OCR library (ex. Tesseract.js) or use some HTTP APIs I guess. Now we can build a QR code scanner using only web technologies. I’ll explain what are the necessary APIs and how they work. Then I’ll introduce the demo application called QRamen (https://qramen.app).
TL;DR
- Barcode Detection API gives us the ability to recognize barcodes in a few lines.
- I build a QR scanner as a web application. Try https://qramen.app and read the source for more details.
Barcode Detection API
Barcode Detection API gives us the ability to recognize barcodes in a few lines. It can recognize not only QRCode but also other barcode formats. And The specification is under Draft. It works on chromium-based browsers.
BarcodeDetector API: detect | Can I use…
The API is very simple. We don’t have to know the detecting logic well. What we need is just calling BarcodeDetector#detect method.
BarcodeDetector#detect can take a value of ImageBitmapSource, Blob,ImageData,<img/>and <video/> as the first argument. You can use it in various use cases.
Working example
I’ll put a working example in case of the combination of navigator.mediaDevices.getUserMedia and HTMLVideoElement.
QRamen is a privacy-first QR code scanner
Finally, let me introduce the app. I created a web application that is a privacy-first QR code scanner called “QRamen”. It’s used the technologies that I explained in this article.
The core motivation is for Android phones. There’s a lot of QR scanner app in the Google Play Store as there’s no QR code scanner in the Android Camera app. And popular QR scanner apps in the store sometimes become “evil”. And it is not easy to verify whether the app we’re using now is evil or not. I need a non-evil QR code scanner.
- Open-source
- Do not send scanned data anywhere
- No need to install (It’s a web application)
- Works offline
Try https://qramen.app if you’re interested in it.
Conclusion
To summarize, There’s an API to detect barcodes named BarcodeDetector that is under the Draft phase. It can recognize various barcode formats. We can build a QR code scanner by it and a few existing technologies. For example, combine with video element and MediaStream.
