javascript - BarcodeDetector DOMException: Barcode detection service unavailable (in Chrome) - Stack Overflow

admin管理员组

文章数量:1024914

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

Share Improve this question Follow edited Nov 27, 2020 at 17:29 BenMorel 36.8k5252 gold badges206206 silver badges337337 bronze badges asked Jun 14, 2017 at 15:02 BairDevBairDev 3,23155 gold badges3939 silver badges5858 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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.');
}

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

Share Improve this question Follow edited Nov 27, 2020 at 17:29 BenMorel 36.8k5252 gold badges206206 silver badges337337 bronze badges asked Jun 14, 2017 at 15:02 BairDevBairDev 3,23155 gold badges3939 silver badges5858 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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.');
}

本文标签： javascriptBarcodeDetector DOMException Barcode detection service unavailable (in Chrome)Stack Overflow