Question

我们目前正在尝试使用最新Chrome中的原生BarcodeDetector（59）。它在启用标记chrome://flags/#enable-experimental-web-platform-features下可用。

您可以查看另一个示例here。

我们正在检查本机BarcodeDetector，如下所示：

typeof window.BarcodeDetector === 'function'

但即使我们落入这个分支并且我们最终设法将一些图像数据倒入探测器中，我们也只能得到一个例外：

DOMException：条形码检测服务不可用。

我用Google搜索了，但不太成功。最有希望的提示是this one，但它似乎是一个奇怪的Webkit分支。

我们正在做的是以下（伪代码！）：

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

有没有人听过这个，可以与BarcodeDetector分享一些经验？

Answer 1

我使用桌面版Chrome时遇到了同样的错误。我想目前它只在移动版本中实现。

这是一个适合我的示例（Android 5.0.2，Chrome 59，带有chrome：// flags / #enable-experimental-web-platform-features enabled）：https://jsfiddle.net/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);
        });
    });
}

Answer 2

在这里恢复旧线程。台式机浏览器不支持此功能，仅移动浏览器支持。

这是我的工作代码：

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);
   });
}

Answer 3

花费了一些时间，但是我们终于有了此API的可靠功能检测，有关详细信息，请参见article。这是相关的代码片段：

 android:focusable="true"
 android:focusableInTouchMode="true"

这可让您检测所需的特定功能，例如QR码扫描：

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

BarcodeDetector DOMException：条形码检测服务不可用（在Chrome中）

3 个答案: