javascriptbarcode-scannerquaggajsquagga

Quagga javascript barcode scanner - Uncaught TypeError: Quagga.init is not a function

I'm trying to write some vanilla javascript code to do barcode scanning from my website, however I can't even get past the first step using the Quagga javascript library. My code is currently this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Quagga Test</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width; initial-scale=1.0; user-scalable=no" />
    <script src="https://code.jquery.com/jquery-1.9.0.min.js" integrity="sha256-f6DVw/U4x2+HjgEqw5BZf67Kq/5vudRZuRkljnbF344=" crossorigin="anonymous"></script>
    <script src="https://webrtc.github.io/adapter/adapter-latest.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/quagga/1.0.0-beta.1/quagga.js"></script>
  </head>
  <body>
    <div id="interactive" class="viewport">
        <video autoplay="true" preload="auto"></video>
    </div>
    <script type="text/javascript">
      Quagga.init({
        inputStream : {
          name : "Live",
          type : "LiveStream",
          target: document.querySelector('#interactive'),
          constraints: {
            width: 520,
            height: 400,
            facingMode: "environment"  //"environment" for back camera, "user" front camera
          }
        },
        decoder : {
           readers : ["code_39_reader"]
        }
      }, function(err) {
        if (err) {
          console.log(err);
          return
        }
        console.log("Initialization finished. Ready to start");
        Quagga.start();
        Quagga.onDetected(function(result) {
          console.log(result.codeResult.code);
        });
      });
    </script>
  </body>
</html>

which gives me the error:

Uncaught TypeError: Quagga.init is not a function

Does anyone know what I need to do to make the initial step in the Quagga website work in vanilla Javascript?

Not sure if it relates to this:

const Quagga = require('quagga').default; // Common JS (important: default)

but that gives the error:

Uncaught ReferenceError: require is not defined
Solution

  • Turns out I had to use https://cdnjs.cloudflare.com/ajax/libs/quagga/0.12.1/quagga.min.js instead.