Qr & Barcode Reader javascript documentation for html5

Question

I want to make an input where it can be automatically filled in after scanning a QR or barcode scanner using a webcam or phone cam.

for the script I imagined something like this

<video autoplay = "true" id = "video-webcam">
</video>

<input type = "text" id = "scanresult">

<script>
external or internal script for scan qr or barcode. save result in variable = result

html DOM getElementById ('scanresult'). value (result);
</script>

I hope anyone can give me suggestions or feedback for my problem. Thank you

your script isn't valid ... and why do you have spaces around the `=` in the markup? that's not how HTML is done either — Jaromanda X, Dec 16 '20 at 07:22
as for barcodes ... search for zxing or quagga ... very simple libraries to use — Jaromanda X, Dec 16 '20 at 07:24

score 1 · Accepted Answer · answered Dec 17 '20 at 02:59

Before it thank you for JaromandaX, i have found script for barcode scanner on Html5 using webcam.

this is my index.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="style.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>

qsCodeScanner.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);
  }
}

style.css

html {
  height: 100%;
}

body {
  font-family: sans-serif;
  padding: 0 10px;
  height: 100%;
  background: black;
  margin: 0;
}

h1 {
  color: white;
  margin: 0;
  padding: 15px;
}

#container {
  text-align: center;
  margin: 0;
}

#qr-canvas {
  margin: auto;
  width: calc(100% - 20px);
  max-width: 400px;
}

#btn-scan-qr {
  cursor: pointer;
}

#btn-scan-qr img {
  height: 10em;
  padding: 15px;
  margin: 15px;
  background: white;
}

#qr-result {
  font-size: 1.2em;
  margin: 20px auto;
  padding: 20px;
  max-width: 700px;
  background-color: white;
}

score 1 · Answer 2 · edited Feb 25 '21 at 07:40

There are lots of better libraries out there for doing this, but I'd personally recommend QrScanner because of its simplicity and intuitiveness. Your live QrCode Scanner would be like this...

scanner.html

<div id="holder">
    <h3>Scan QR Code from Camera</h3>
    <div class="make">
        <video id="scan"></video>
    </div>
    <div>
        <input type = "text" id = "scanresult"><br>
        <button id="start">Start</button>
        <button id="stop">Stop</button>
    </div>
</div>

Then add a little CSS as:

style.css

#holder{
    width: 30%;
    margin:auto;
}

#holder .make {
    width: 99%;
    height: 30vh;
    margin-bottom: 15px;
    text-align: center;
}

video {
    width: 99%;
    margin:auto;
}

Then add your QrScanner code as:

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

       // Scanner Object
       const scanner    = new QrScanner(
                              document.getElementById("scan"), 
                              function(result){
                                   document.getElementById("scanresult").value = result;
                              } 
                           );
       
       document.getElementById("start").onclick = e => scanner.start();
       document.getElementById("stop").onclick = e => scanner.stop();

</script>

Then connect your camera and click start button...

Qr & Barcode Reader javascript documentation for html5

2 Answers2

scanner.html

style.css