I'm currently facing a challenge with implementing barcode scanning functionality into my website using vanilla JavaScript. I've been trying to utilize the Quagga JavaScript library, but I seem to be stuck at the initial step. Here's the code snippet I have so far:
<!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>
However, I'm encountering the following error message:
Uncaught TypeError: Quagga.init is not a function
Is there anyone who can advise on how to successfully execute the first step of barcode scanning using the Quagga library in vanilla JavaScript?
I'm also unsure whether this snippet:
const Quagga = require('quagga').default; // Common JS (important: default)
is related to the issue, as it triggers the error:
Uncaught ReferenceError: require is not defined