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
Turns out I had to use
https://cdnjs.cloudflare.com/ajax/libs/quagga/0.12.1/quagga.min.jsinstead.