QR Code reader does not ask for camera and won't continue

I am trying to test the qr-code-scanner as explained in the https://www.sitepoint.com/create-qr-code-reader-mobile-website/ tutorial. I copied the code exactly as shown in the sandbox with mods to reflect my structure .
When I run the sandbox either on my android 9 mobile or desktop it work perfectly.
When I run my implementation it never asks for camera permission and won’t move forward.

The website is on a Linux box with apache.
This is the url:
https://ziggys.com/qrcode/QRtest.html

I am not particularly adept at javascript.
Any help would be greatly appreciated.

While I am at it does anyone know if this can be adapted to read other barcode formats?
Thank you for your help.

QRtest.html

<!DOCTYPE html>
<html>
<head>
    <title>QR Code Scanner</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
    <link rel="stylesheet" href="QRStyles.css" />
    <script src="https://rawgit.com/sitepoint-editors/jsqrcode/master/src/qr_packed.js"></script>
</head>

<body>
<div id="container">
    <h1>QR Code Scanner</h1>

    <a id="btn-scan-qr">
        <img src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2017/07/1499401426qr_icon.svg">
        <a/>

        <canvas hidden="" id="qr-canvas"></canvas>

        <div id="qr-result" hidden="">
            <b>Data:</b> <span id="outputData"></span>
        </div>
</div>

<script src="qrCodeScanner.js"></script>
</body>
</html>pe or paste code here

qrCodeScanner.js

const qrcode = window.qrcode;

const video = document.createElement("video");
const canvasElement = document.getElementById("qr-canvas");
const canvas = canvasElement.getContext("2d");

const qrResult = document.getElementById("qr-result");
const outputData = document.getElementById("outputData");
const btnScanQR = document.getElementById("btn-scan-qr");

let scanning = false;

qrcode.callback = res => {
  if (res) {
    outputData.innerText = res;
    scanning = false;

    video.srcObject.getTracks().forEach(track => {
      track.stop();
    });

    qrResult.hidden = false;
    canvasElement.hidden = true;
    btnScanQR.hidden = false;
  }
};

btnScanQR.onclick = () => {
  navigator.mediaDevices
    .getUserMedia({ video: { facingMode: "environment" } })
    .then(function(stream) {
      scanning = true;
      qrResult.hidden = true;
      btnScanQR.hidden = true;
      canvasElement.hidden = false;
      video.setAttribute("playsinline", true); // required to tell iOS safari we don't want fullscreen
      video.srcObject = stream;
      video.play();
      tick();
      scan();
    });
};

function tick() {
  canvasElement.height = video.videoHeight;
  canvasElement.width = video.videoWidth;
  canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);

  scanning && requestAnimationFrame(tick);
}

function scan() {
  try {
    qrcode.decode();
  } catch (e) {
    setTimeout(scan, 300);
  }
}

UPDATE: Chrome was reporting the qrcode was already defined. If I comment out the first line in qrCodeScanner.js (const qrcode = window.qrcode;) then the application works.

I would still like to know if this can be made to work with other bar code formats.

Thanks

1 Like