Build QR code scanner using only web technologies

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

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Leko

Leko

Software developer. I love JavaScript and TypeScript.