JavaScript qrcode reader

I am using QR Scanner to try to read QR codes through cameras of devices mobile, but the camera of the device is detected but does not show any image of the camera in the application.

Device has camera: true

I downloaded the minified files specified below and modified the path correctly 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 presented and no error is shown in the console. Could anyone 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 pre-selected image file works perfectly.

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

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

Author: Comunidade, 2019-02-06