--- layout: examples.v1.0.0-beta.1 title: Demo with live-stream showInMenu: false ---

### Scan barcode to input-field

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

EAN:

This example demonstrates the following features:

- Access to user's camera
- Configuring EAN-Reader
- Use custom mount-point (Query-Selector)
- Start/Stop scanning based on certain events

#### Source

    var Quagga = window.Quagga;
    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,
                button = document.querySelector('.input-field input + button.scan');

            button.addEventListener("click", function onClick(e) {
                e.preventDefault();
                button.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() {
                    closeButton.removeEventListener('click', closeClick);
                    cancelCb();
                });
                document.body.appendChild(this._overlay);
            } else {
                var closeButton = document.querySelector('.overlay__close');
                closeButton.addEventListener('click', function closeClick() {
                    closeButton.removeEventListener('click', closeClick);
                    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>