Using JavaScripts Built-In Barcode Detection API

What we will be making?

In this article, I’m going to show you how to create a Real-time QR code scanner with JavaScript using no libraries, frameworks, packages or node.js just plain vanilla JavaScript that runs on the browser. You can implement this into any framework you prefer using such as React, Vue, Angular and more.

See what we are making

How is it going to work?

We will be using the Barcode Detection API in JavaScript to make this possible if you have a quick look through the MDN documentation you’ll see you are not just restricted to scanning QR codes.

Preview Of What We Are Creating

In this part of the article, we will be creating the scanning functionality and learning how to access the camera to detect barcodes & QR codes in realtime in the next part of this article we will be learning how to create the outline around the code we are detecting/scanning and creating a previously scanned section that uses custom web components and proxies.

This series will start quite basic and become more difficult towards the end having a good knowledge of JavaScript can help with understanding some parts of these articles as proxies and web components can be hard to wrap your head around at first.

All the code is on my GitHub you may want to reference it for CSS if you want to make a carbon copy of this project I will be going over some of the CSS that makes the outlines around the barcodes possible but that’s about it for CSS as this is more focused on the JavaScript than the styling of the page.

#qr-code #programming #javascript #vanilla-javascript