Reader of Qrcode Javascript

Question

I’m using the QR Scanner to try to read QR codes through device cameras mobile, however the device’s camera is detected but does not show any camera image in the application.

Device has camera: true

I downloaded the minified files specified below and modified the path of each one in the module as in the code below.

qr-scanner.min.js

qr-scanner-worker.min.js

My document is only with the sample code they present, yet nothing is shown and no error is shown on the console. Someone could help me?

<script type="module">
  import QrScanner from "../../Scripts/QRScanner/qr-scanner.min.js";
  QrScanner.WORKER_PATH = '../../Scripts/QRScanner/qr-scanner-worker.min.js';


  const video = document.getElementById('qr-video');
  const debugCheckbox = document.getElementById('debug-checkbox');
  const debugCanvas = document.getElementById('debug-canvas');
  const debugCanvasContext = debugCanvas.getContext('2d');
  const camHasCamera = document.getElementById('cam-has-camera');
  const camQrResult = document.getElementById('cam-qr-result');
  const fileSelector = document.getElementById('file-selector');
  const fileQrResult = document.getElementById('file-qr-result');

  function setResult(label, result) {
    label.textContent = result;
    label.style.color = 'teal';
    clearTimeout(label.highlightTimeout);
    label.highlightTimeout = setTimeout(() => label.style.color = 'inherit', 100);
  }

  // ####### Web Cam Scanning #######

  QrScanner.hasCamera().then(hasCamera => camHasCamera.textContent = hasCamera);

  const scanner = new QrScanner(video, result => setResult(camQrResult, result));
  scanner.start();

  document.getElementById('inversion-mode-select').addEventListener('change', event => {
    scanner.setInversionMode(event.target.value);
  });

  // ####### File Scanning #######

  fileSelector.addEventListener('change', event => {
    const file = fileSelector.files[0];
    if (!file) {
      return;
    }
    QrScanner.scanImage(file)
      .then(result => setResult(fileQrResult, result))
      .catch(e => setResult(fileQrResult, e || 'No QR code found.'));
  });


  // ####### debug mode related code #######

  debugCheckbox.addEventListener('change', () => setDebugMode(debugCheckbox.checked));

  function setDebugMode(isDebug) {
    const worker = scanner._qrWorker;
    worker.postMessage({
      type: 'setDebug',
      data: isDebug
    });
    if (isDebug) {
      debugCanvas.style.display = 'block';
      worker.addEventListener('message', handleDebugImage);
    } else {
      debugCanvas.style.display = 'none';
      worker.removeEventListener('message', handleDebugImage);
    }
  }

  function handleDebugImage(event) {
    const type = event.data.type;
    if (type === 'debugImage') {
      const imageData = event.data.data;
      if (debugCanvas.width !== imageData.width || debugCanvas.height !== imageData.height) {
        debugCanvas.width = imageData.width;
        debugCanvas.height = imageData.height;
      }
      debugCanvasContext.putImageData(imageData, 0, 0);
    }
  }
</script>
<style>
  canvas {
    display: none;
  }

  hr {
    margin-top: 32px;
  }

  input[type="file"] {
    display: block;
    margin-bottom: 16px;
  }
</style>
<h1>Scan from WebCam:</h1>
<div>
  <b>Device has camera: </b>
  <span id="cam-has-camera"></span>
  <br>
  <video id="qr-video"></video>
  <canvas id="debug-canvas"></canvas>
</div>
<div>
  <select id="inversion-mode-select">
    <option value="original">Scan original (dark QR code on bright background)</option>
    <option value="invert">Scan with inverted colors (bright QR code on dark background)</option>
    <option value="both">Scan both</option>
  </select>
  <br>
  <input type="checkbox" id="debug-checkbox">
  <label for="debug-checkbox">Show debug image</label>
</div>
<b>Detected QR code: </b>
<span id="cam-qr-result">None</span>
<hr>

<h1>Scan from File:</h1>
<input type="file" id="file-selector">
<b>Detected QR code: </b>
<span id="file-qr-result">None</span>

Note: Reading QR Code through a preselected image file works perfectly.

Obs2: I did some tests on different devices and saw that it is a particularity of Android the rule of not showing any image.

Obs3: Finally I chose to remove the code because I could not support all types of devices, but I would still like to know the answer