How to turn off Blackscreen in IOS Web View

253 views Asked by At

Using Quagga.js, we are working on barcode recognition in web view. It works fine on the mobile web, but it happens on the APP. The problem is two things below.

  1. The target div provided by Quagga does not contain the camera, but switches to the full screen. Problem 1 Image
  2. After barcode recognition, the camera remains in the Blackscreen state, not off. Problem 1 Image

Already unpacked permissions from info.plist.

  1. Privacy - Camera Usage Description
  2. Privacy - Photo Library Additions Usage Description

Below is my code.

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

I would like to ask for your help if there is anything else I need to do in the info.plist or how I can solve the problem.

0

There are 0 answers