1

使用 Quagga.js，我们正在 Web 视图中进行条码识别。它在移动网络上运行良好，但它发生在 APP 上。问题在于以下两点。

  1. Quagga 提供的目标 div 不包含摄像头，而是切换到全屏。 问题 1 图片
  2. 条码识别后，相机保持黑屏状态，不关闭。 问题 1 图片

已经从 info.plist 解压权限。

  1. 隐私 - 相机使用说明
  2. 隐私 - 照片库添加使用说明

下面是我的代码。

openItem.addEventListener("click", () => {
  document.querySelector(".barcode_Camera").style.bottom = "0px";

 /* Barcode Scan Script */
  Quagga.init({
  inputStream: {
    type : "LiveStream",
    target: document.querySelector('#camera_Area'),    // Or '#yourElement' (optional)
    constraints: {
       width: {min: 1280},
       height: {min: 480},
    facingMode: "environment",
    aspectRatio: {min: 1, max: 2}
  }
},
locator: {
  patchSize: "small",
  halfSample: true
},
numOfWorkers: 4,
frequency: 10,
decoder: {
  readers : [{
    format: "code_93_reader",
    config: {}
  }],
  debug: {
    drawBoundingBox: false,
    showFrequency: false,
    drawScanline: false,
    showPattern: false
  },
  multiple: false
},
  }, function (err) {
    if (err) {
      console.log(err);
        return
    }
    console.log("Initialization finished. Ready to start");
    Quagga.start();
  });

}); /*Close*/

Quagga.onProcessed(function (result) {
  let drawingCtx = Quagga.canvas.ctx.overlay,
  drawingCanvas = Quagga.canvas.dom.overlay;

  if (result) {
    if (result.boxes) {
      drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), 
parseInt(drawingCanvas.getAttribute("height")));
  result.boxes.filter(function (box) {
    return box !== result.box;
  }).forEach(function (box) {
    Quagga.ImageDebug.drawPath(box, {x: 0, y: 1}, drawingCtx, {color: "#88d147", lineWidth: 2});
  });
}
  }
});

Quagga.onDetected(function (data) {
  document.querySelector('#barcode').value = data.codeResult.code;
  let closeTarget = closeItem.closest(".barcode_Camera");
  document.querySelector(".barcode_Camera").style.bottom = "-100%";
Quagga.stop();
});

如果我需要在 info.plist 中做任何其他事情或如何解决问题，我想寻求您的帮助。

4

0 回答 0