implementing quagga scanning barcodes
Solution 1
Include <div id="interactive" class="viewport"></div>
into your markup.
Solution 2
It's a few months old question but Eugene's answer is not full. For me, to make QuaggaJS work I had to add video tag as well:
<div id="interactive" class="viewport">
<video autoplay="true" preload="auto"></video>
</div>
Solution 3
Have you checked your console?
Using "Livestream" (Access to Camera) requires you to have a SSL certified website.
It means the additional "s" in https://
You can read more about it here: https://support.google.com/adwords/answer/2580401?hl=sv
You should also know that you can get a free SSL certificat, but you need to have access to your server. Most hosting services can help you with this.
Solution 4
Add in html
<div id="barcode-scanner" class="size"> </div>
Add in JavaScript
Quagga.init({
inputStream : {
name : "Live",
type : "LiveStream",
target: document.querySelector('#barcode-scanner'),
constraints: {
width: 520,
height: 400,
facingMode: "user" //"environment" for back camera, "user" front camera
}
},
decoder : {
readers : ["code_128_reader","code_39_reader"]
}
}, function(err) {
if (err) {
esto.error = err;
console.log(err);
return
}
Quagga.start();
Quagga.onDetected(function(result) {
var last_code = result.codeResult.code;
console.log("last_code ");
});
});
Works for me in Vue.
![Bart Van der Linden](https://lh3.googleusercontent.com/-3CvuhyIu258/AAAAAAAAAAI/AAAAAAAAABg/wz4UJTnRUYs/photo.jpg?sz=256)
Bart Van der Linden
Updated on June 13, 2022Comments
-
Bart Van der Linden about 2 years
I am making an online scan application just with HTML5 and javascript using Quagga.js.
I need to get the webcam working for searching barcodes and imported quagga.js :
On the web page of quagga you'll find a method called Quagga.init. to initialize the webcam view. I entered in the script tags this code :
Quagga.init({ inputStream : { name : "Live", type : "LiveStream" }, decoder : { readers : ["code_128_reader"] } }, function() { console.log("Initialization finished. Ready to start"); Quagga.start(); });
But nothing happened. What do I need to do to get this webcam working? Any other opinions to create a web-based application for scanning barcodes ?
Thank you for answering !
-
Eng Soon Cheah almost 5 yearsHow about the select Barcode Type from Dropdownlist?