Breaking News: Grepper is joining You.com. Read the official announcement!

html barcode scanner example

Add Answer

OHIOLee answered on May 13, 2022 Popularity 9/10 Helpfulness 4/10

answer html barcode scanner example

related html barcode scanner example

related html barcode scanner

html barcode scanner example

Comment

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
    }

    .wrapper {
      margin: 0 auto;
      max-width: 1000px;
      display: flex;
      /* justify-content: center; */
    }

    .content {
      margin-right: 30px;
    }

    .scanner-cam {
      border: 5px solid red;
      width: 640px;
      height: 480px;
    }

    .scanner-cam--scanned {
      border-color: green;
    }
    </style>
    <title>Document</title>
</head>
<body>
  <div class="wrapper">
  <div class="content">
    <h1>Barcode scanner prototype</h1>
    <p><strong>Instructions:</strong></p>
    <ul>
      <li>Search for "<strong>128 barcode</strong>" on <strong>Google.com</strong> on your phone. Click to view any barcode and point your screen towards the camera. You should hear a beep!</li>
      <li>Once the border on the right is red, the scanner is ready for another barcode.</li>
      <li>If you're trying to scan a barcode and the border on the right is still green, move the barcode out of the camera view and back again.</li>
    </ul>
    <p><strong>Important notes:</strong></p>
    <ul>
      <li>Make sure to allow the browser to access your camera.</li>
      <li>You may see incorrect readings listed below when scanning, these can be filtered out later on, this just a scanning prototype.</li>
    </ul>
    <strong>Scanned codes:</strong>
    <ul class="codes-list"></ul>
  </div>

  <div class="scanner-cam"></div>
</div> 

<script>
var scanBeep = new Audio('./scan-beep.mp3');
var scannerCamEl = document.getElementsByClassName('scanner-cam')[0];
var App = {
    init: function() {
        var self = this;

        Quagga.init(this.config, function(err) {
            if (err) {
                return self.handleError(err);
            }
            Quagga.start();
        });
    },
    handleError: function(err) {
        console.log(err);
    },
    config: {
        inputStream: {
            target: scannerCamEl,
            type : "LiveStream",
            constraints: {
                width: {min: 640},
                height: {min: 480},
                facingMode: "environment",
                aspectRatio: {min: 1, max: 2}
            }
        },
        locator: {
            patchSize: "medium",
            halfSample: true
        },
        numOfWorkers: 2,
        frequency: 10,
        decoder: {
            readers : [{
                format: "code_128_reader",
                config: {}
            }]
        },
        locate: true
    }
};

App.init();

function scanItem(code) {
  scanBeep.play();
  var el = document.createElement('li');
  el.innerText = code;
  document.getElementsByClassName('codes-list')[0].appendChild(el);
  scannerCamEl.classList.add('scanner-cam--scanned');
}

var debouncedScanner = _.debounce(scanItem, 1000, true);
var styleTimer;

Quagga.onDetected((result) => {
  var code = result.codeResult.code;

  if (!code.match(/[0-9]+\/[0-9]+\/[A-Z]+\/[0-9]+/g)) { console.log(code); return; }
  debouncedScanner(code);
  clearTimeout(styleTimer);

  styleTimer = setTimeout(function() {
    scannerCamEl.classList.remove('scanner-cam--scanned');
  }, 1000);
});

</script>
</body>
</html>

Popularity 9/10 Helpfulness 4/10 Language html

Source: Grepper

Tags: barcode-scanner html

Link to this answer
Share Copy Link

Contributed on Oct 11 2022

OHIOLee

0 Answers Avg Quality 2/10

Closely Related Answers

html barcode scanner example

Comment

$ npm install --save-dev html5-qrcode

Popularity 9/10 Helpfulness 4/10 Language shell

Source: Grepper

Tags: barcode-scanner

Link to this answer
Share Copy Link

Contributed on Oct 11 2022

OHIOLee

0 Answers Avg Quality 2/10

html barcode scanner

Comment

npm install --save-dev html5-qrcode

Popularity 9/10 Helpfulness 2/10 Language html

Source: Grepper

Tags: barcode-scanner

Link to this answer
Share Copy Link

Contributed on May 13 2022

HandsomeOldGod5355

0 Answers Avg Quality 2/10

html barcode scanner

Comment

npm install --save-dev html5-qrcode

Popularity 9/10 Helpfulness 1/10 Language html

Source: Grepper

Tags: barcode-scanner

Link to this answer
Share Copy Link

Contributed on May 13 2022

HandsomeOldGod5355

0 Answers Avg Quality 2/10

html barcode scanner example

Contents

More Related Answers

html barcode scanner example

Closely Related Answers

html barcode scanner example

html barcode scanner

html barcode scanner

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.