Detecting barcode from the browser!!!

Background

I have just arranged for my first ever concert that is going to happen in mid-December in Hong Kong. As I was sorting out the logistics for ticket sales, I decided to build a simple system for myself. People can go on the stripe payment link to purchase the ticket. Then a webhook will be triggered which generates an email with a QR code. The QR code then will be scanned for entry on the day of concert at the door. As I was looking for solution for QR code detection, I discovered this beautiful Barcode Detection API

I didn't see many tutorials about it yet, so I have decided to make a note about my exploration. Hope you will enjoy!

Article Synopsis

This article will split into 2 parts:

1. Getting feed from camera
2. Detect barcode from camera feed

Part 1: Getting feed from camera

In this section, our goal is to put the camera stream onto the page.

First, we need a <video> element to show the camera stream.

<video id="stream" style="width: 100vw; height: 100vh;" />

Then, we can simply use getUserMedia to grab the media stream; pass that stream directly to the video element.

const stream = await navigator.mediaDevices.getUserMedia({
  video: {
    facingMode: { ideal: 'environment' }
  },
  audio: false
});
const videoEl = document.querySelector('#stream');
videoEl.srcObject = stream;
await videoEl.play();

Note that, the { ideal: 'environment' } option is provided so the back camera on a phone is used. Find out more here.

With these few lines of code, we capture the camera feed and displayed it on the screen. See codepen.

Part 2: Detect barcode from camera feed

The barcode detection api provides a simple API for barcode detection. All you need is new BarcodeDetector(...) then barcodeDetector.detect(videoElement).

So we will add these two lines:

/* code from part one */


const barcodeDetector = new BarcodeDetector({formats: ['qr_code']});
const barcodes = await barcodeDetector.detect(videoEl)

Now the barcode detector will be activated at the exact moment the video starts streaming. We probably won't expect to find any QR code at the moment people turn on their camera. So we will need to continuously look at the video stream and call .detect(...) until we got some barcodes.

In order to do that, we can .detect every X ms until we got some barcodes. Simply use window.setInterval for this.

/* code from part one */

const barcodeDetector = new BarcodeDetector({formats: ['qr_code']});
window.setInterval(async () => {
  const barcodes = await barcodeDetector.detect(videoEl);
  if (barcodes.length <= 0) return;
  alert(barcodes.map(barcode => barcode.rawValue));
}, 1000)

Now the camera will look for barcode every second! See codepen and try to load up a QR code to test! Here is an QR code for "hello world".

END

Final results (codepen):

<video id="stream" style="width: 100vw; height: 100vh;"/>

(async () => {
const stream = await navigator.mediaDevices.getUserMedia({
  video: {
    facingMode: {
      ideal: "environment"
    }
  },
  audio: false
});
const videoEl = document.querySelector("#stream");
videoEl.srcObject = stream;
await videoEl.play();

const barcodeDetector = new BarcodeDetector({formats: ['qr_code']});
window.setInterval(async () => {
  const barcodes = await barcodeDetector.detect(videoEl);
  if (barcodes.length <= 0) return;
  alert(barcodes.map(barcode => barcode.rawValue));
}, 1000)
})();

Happy coding!

Comments

[GrahamTheDev]

Great introduction to the API. ❤

Just bear in mind that if you use this in production you need to check the browser supports it first as support is very poor for the Browser Detection API and inconsistent at the moment and will result in an error otherwise.

[artydev]

Thank you very much

[xulihang]

Still not many browsers support this API. There are some polyfills like this one: npmjs.com/package/barcode-detection, which can enable this API in all major browsers.