QuaggaJS

                    
    var App = {
        _scanner: null,
        init: function() {
            this.attachListeners();
        },
        activateScanner: function() {
            var scanner = this.configureScanner('.overlay__content'),
                onDetected = function (result) {
                    document.querySelector('input.isbn').value = result.codeResult.code;
                    stop();
                }.bind(this),
                stop = function() {
                    scanner.stop();  // should also clear all event-listeners?
                    scanner.removeEventListener('detected', onDetected);
                    this.hideOverlay();
                    this.attachListeners();
                }.bind(this);

            this.showOverlay(stop);
            scanner.addEventListener('detected', onDetected).start();
        },
        attachListeners: function() {
            var self = this;

            document.querySelector('.input-field input + button.scan')
                .addEventListener("click", function onClick(e) {
                    e.preventDefault();
                    e.target.removeEventListener("click", onClick);
                    self.activateScanner();
                });
        },
        showOverlay: function(cancelCb) {
            if (!this._overlay) {
                var content = document.createElement('div'),
                    closeButton = document.createElement('div');

                closeButton.appendChild(document.createTextNode('X'));
                content.className = 'overlay__content';
                closeButton.className = 'overlay__close';
                this._overlay = document.createElement('div');
                this._overlay.className = 'overlay';
                this._overlay.appendChild(content);
                content.appendChild(closeButton);
                closeButton.addEventListener('click', function closeClick(e) {
                    e.target.removeEventListener('click', closeClick);
                    cancelCb();
                });
                document.body.appendChild(this._overlay);
            } else {
                var closeButton = document.querySelector('.overlay__close');
                closeButton.addEventListener('click', cancelCb);
            }
            this._overlay.style.display = "block";
        },
        hideOverlay: function() {
            if (this._overlay) {
                this._overlay.style.display = "none";
            }
        },
        configureScanner: function(selector) {
            if (!this._scanner) {
                this._scanner = Quagga
                    .decoder({readers: ['ean_reader']})
                    .locator({patchSize: 'medium'})
                    .fromVideo({
                        target: selector,
                        constraints: {
                            width: 800,
                            height: 600,
                            facingMode: "environment"
                        }
                    });
            }
            return this._scanner;
        }
    };
    App.init();
                    
                

                    
<form>
    <div class="input-field">
        <label for="isbn_input">EAN:</label>
        <input id="isbn_input" class="isbn" type="text" />
        <button type="button" class="icon-barcode button scan"> </button>
    </div>
</form>