implementing quagga scanning barcodes

Question

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 !

Egis

Answer 1

Include <div id="interactive" class="viewport"></div> into your markup.

Orangewood

Answer 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>

Cataclysm

Answer 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.

Jaggy

Answer 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.

Whiteman

How about the select Barcode Type from Dropdownlist? – Chastise

Answer 5

Add a div element like this in your markup:

<div id="barcode_canvas"></div>

Then include the target in your input stream like this: target: document.querySelector('#barcode_canvas')

          Quagga.init({
              inputStream : {
                name : 'Live',
                type : 'LiveStream',
                target: document.querySelector('#barcode_canvas')
              },
              decoder : {
                readers : ['ean_reader']
              }
            }, function(err) {
                if (err) {
                    console.log(err);
                    return
                }
                console.log('Initialization finished. Ready to start');
                Quagga.start();                     
            }); 

Inaction