I run an online craft fair with consolidated shipping. That means that when the fair ends, the vendors send their goods to my office where my team has to assemble the items into one shipping box per shopper.

Taking the time to go to a computer and update the order status each time is an IMMENSE hassle. However, I figured that scanning the order slip and updating the order status from my phone would eliminate that waste.

I crafted a rudimentary web app to do exactly this, scan a barcode on the order slip and interface with my Point Of Sale API. There are lots of JavaScript libraries for scanning QR and Barcodes but I like spec-defined native APIs whenever possible. It turns out that there is such a thing now in the wonder that is HTML5 – The Barcode Detection API.

The BarcodeDetector interface of the Barcode Detection API allows detection of linear and two dimensional barcodes in images.

https://developer.mozilla.org/en-US/docs/Web/API/BarcodeDetector

Learn more about the Barcode Detection WebAPI on MDN Web Docs.

Using the Barcode Detection API

The Barcode Detection API is very straightforward in itself.

1. Instantiate a BarcodeDetector instance with a configuration of formats to scan for.
2. Call the detect method on an image bitmap source. Among things, this can be an Element or an image Blob.
3. Await the returned Promise’s resolution and process the payload of data found.

// Prepare the image source
const imgEl = document.getElementById('my_image')

// Create a BarcodeDetector instance
const barcodeDetectorFormats = {formats: ['qr_code', 'code_128']}
let barcodeDetector
try {
  barcodeDetector = new BarcodeDetector(barcodeDetectorFormats)
} catch(e) {
  console.log('Browser does not support BarcodeDetector :(')
}

/*
If the barcodeDetector instance is good, attempt to process
our image source. The detect method can detect multiple barcodes,
and returns an array of all barcodes detected.
*/
if(barcodeDetector) {
  barcodeDetector.detect(imageEl)
    .then(barcodes => {
      // Enumerate the detected barcodes
      barcodes.forEach(barcode => {
        console.log(barcode.format, barcode.rawData)
      })
    })
}

This is the crux of how to use the Barcode Detection API. Its true value comes from the range of sources that the detect method can receive – notably a Video element.

Video source – the next level

My rudimentary app prepared a video feed by leveraging my cellphone’s front camera. This is accomplished by using navigator.mediaDevices and pointing the feed to a Video element. From there, I was able to feed this Video element to the detect method.

Full example of BarcodeDetector reading from a video source on GitHub.

What I did in this approach is to wrap the detect method in a generator function. The generator yields a promise awaiting the detection of a barcode, polled on a 1 second interval. This allowed me to streamline the app code into reading from a barcode stream, and simply wave my phone around until a barcode comes into clear view.