QuaggaJS

An advanced barcode-scanner written in JavaScript

Scan barcode to input-field

Click the button next to the input-field to start scanning an EAN-13 barcode

An overlay will pop-up showing the users's back-facing camera if access is granted.

Source

                

var scanner = Quagga
   .decoder({readers: ['ean_reader']})
   .locator({patchSize: 'medium'})
   .fromVideo({
       target: '.overlay__content',
       constraints: {
           width: 800,
           height: 600,
           facingMode: "environment"
       }
   });

document.querySelector('.input-field input + button.scan')
   .addEventListener("click", function onClick(e) {
       e.preventDefault();
       e.target.removeEventListener("click", onClick);

       // Start scanning
       scanner.addEventListener('detected', function detected(result) {
           // show result and stop scanner
          document.querySelector('input.isbn').value = result.codeResult.code;
          scanner.stop();
          scanner.removeEventListener('detected', detected);
       }).start();
   });