We are currently trying to use the native BarcodeDetector in the latest Chrome (59). It is available under the enabled flag chrome://flags/#enable-experimental-web-platform-features.

You can have look at another example here.

We are checking for the native BarcodeDetector like this:

typeof window.BarcodeDetector === 'function'

But even when we fall into this branch and we finally manage to pour some image data into the detector we only get an exception:

DOMException: Barcode detection service unavailable.

I've googled that, but was not very successful. The most promising hint is this one, but it seems to be an odd Webkit fork.

What we are doing is the following (pseudocode!):

window.createImageBitmap(canvasContext.canvas) // from canvasEl.getContext('2d')
  .then(function(data)
  {
    window.BarcodeDetector.detect(data);
  });
  // go on: catch the exception

Has anybody ever heard of this and can share some experiences with the BarcodeDetector?

We are currently trying to use the native BarcodeDetector in the latest Chrome (59). It is available under the enabled flag chrome://flags/#enable-experimental-web-platform-features.

You can have look at another example here.

We are checking for the native BarcodeDetector like this:

typeof window.BarcodeDetector === 'function'

But even when we fall into this branch and we finally manage to pour some image data into the detector we only get an exception:

DOMException: Barcode detection service unavailable.

I've googled that, but was not very successful. The most promising hint is this one, but it seems to be an odd Webkit fork.

What we are doing is the following (pseudocode!):

window.createImageBitmap(canvasContext.canvas) // from canvasEl.getContext('2d')
  .then(function(data)
  {
    window.BarcodeDetector.detect(data);
  });
  // go on: catch the exception

Has anybody ever heard of this and can share some experiences with the BarcodeDetector?

• javascript
• google-chrome
• dom
• qr-code

3 Answers 3

I've had the same error using the desktop version of Chrome. I guess at the moment it is only implemented in the mobile version.

Here is an example that worked for me (Android 5.0.2, Chrome 59 with chrome://flags/#enable-experimental-web-platform-features enabled): https://jsfiddle/daniilkovalev/341u3qxz/

navigator.mediaDevices.enumerateDevices().then((devices) => {
  let id = devices.filter((device) => device.kind === "videoinput").slice(-1).pop().deviceId;
  let constrains = {video: {optional: [{sourceId: id }]}};

  navigator.mediaDevices.getUserMedia(constrains).then((stream) => {
    let capturer = new ImageCapture(stream.getVideoTracks()[0]);
    step(capturer);
  });
});

function step(capturer) {
    capturer.grabFrame().then((bitmap) => {
      let canvas = document.getElementById("canvas");
      let ctx = canvas.getContext("2d");
      ctx.drawImage(bitmap, 0, 0, bitmap.width, bitmap.height, 0, 0, canvas.width, canvas.height);
      var barcodeDetector = new BarcodeDetector();
      barcodeDetector.detect(bitmap)
        .then(barcodes => {
          document.getElementById("barcodes").innerHTML = barcodes.map(barcode => barcode.rawValue).join(', ');
          step(capturer);
        })
        .catch((e) => {
          console.error(e);
        });
    });
}

Reviving an old thread here. It is not supported in desktop browsers, only mobile browsers.

Here's my working code:

getImage(event) {

   let file: File = event.target.files[0];
   let myReader: FileReader = new FileReader();

   let barcode = window['BarcodeDetector'];
   let pdf = new barcode(["pdf417"]);

   createImageBitmap(file)
     .then(img => pdf.detect(img))
     .then(resp => {
       alert(resp[0].rawValue);
   });
}

It took some back and forth, but we finally have reliable feature detection for this API, see the article for full details. This is the relevant code snippet:

await BarcodeDetector.getSupportedFormats();
/* On a macOS puter logs
  [
    "aztec",
    "code_128",
    "code_39",
    "code_93",
    "data_matrix",
    "ean_13",
    "ean_8",
    "itf",
    "pdf417",
    "qr_code",
    "upc_e"
  ]
*/

This allows you to detect the specific feature you need, for example, QR code scanning:

if (('BarcodeDetector' in window) &&
    ((await BarcodeDetector.getSupportedFormats()).includes('qr_code'))) {
  console.log('QR code scanning is supported.');
}