Cancel scanning; improving start/stop behavior

2026-08-13 05:31:37 +08:00 · 2017-04-06 16:10:52 +02:00
parent 255e5a6937
commit efb3b6c5bc
7 changed files with 116 additions and 121 deletions
@@ -48,6 +48,7 @@
 }

 .overlay {
+    display: none;
    overflow: hidden;
    position: fixed;
    top: 0;
@@ -58,7 +59,7 @@
    background-color: rgba(0, 0, 0, 0.3);
 }

-.overlay__content {
+.overlay__container {
    top: 50%;
    position: absolute;
    left: 50%;
@@ -52,22 +52,24 @@ var App = {
    _scanner: null,
    init: function() {
        this.attachListeners();
+        this._overlay = document.querySelector('.overlay');
    },
    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();
+        this.configureScanner('.overlay__content')
+        .then(function(scanner) {
+            this.showOverlay(scanner.stop.bind(scanner));
+            return scanner.detect();
+        }.bind(this))
+        .then(function(result) {
+            document.querySelector('input.isbn').value = result.codeResult.code;
+        })
+        .catch((e) => {
+            console.log(e);
+        })
+        .then(function() {
+            this.hideOverlay();
+            this.attachListeners();
+        }.bind(this));
    },
    attachListeners: function() {
        var self = this,
@@ -80,29 +82,11 @@ var App = {
        });
    },
    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();
-            });
-        }
+        var closeButton = document.querySelector('.overlay__close');
+        closeButton.addEventListener('click', function closeClick() {
+            closeButton.removeEventListener('click', closeClick);
+            cancelCb();
+        });
        this._overlay.style.display = "block";
    },
    hideOverlay: function() {
@@ -111,20 +95,18 @@ var App = {
        }
    },
    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"
-                    }
-                });
+        if (this._scanner) {
+            return Promise.resolve(this._scanner);
        }
-        return this._scanner;
+
+        return Quagga.fromCamera({
+            decoder: {readers: ['ean_reader']},
+            target: selector,
+        })
+        .then((scanner) => {
+            this._scanner = scanner;
+            return scanner;
+        });
    }
 };
 App.init();
@@ -141,6 +123,12 @@ App.init();
        &lt;button type="button" class="icon-barcode button scan"&gt;&nbsp;&lt;/button&gt;
    &lt;/div&gt;
 &lt;/form&gt;
+&lt;div class=&quot;overlay&quot;&gt;
+  &lt;div class=&quot;overlay__container&quot;&gt;
+      &lt;div class=&quot;overlay__close&quot;&gt;X&lt;/div&gt;
+      &lt;div class=&quot;overlay__content&quot; /&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
                    </code>
                </pre>
            </div>
@@ -151,7 +139,12 @@ App.init();
          &copy; Copyright by Christoph Oberhofer
        </p>
      </footer>
-
+      <div class="overlay">
+          <div class="overlay__container">
+              <div class="overlay__close">X</div>
+              <div class="overlay__content" />
+          </div>
+      </div>
    <script src="//webrtc.github.io/adapter/adapter-latest.js" type="text/javascript"></script>
    <script src="../../dist/quagga.js" type="text/javascript"></script>
    <script src="index.js" type="text/javascript"></script>
@@ -3,22 +3,24 @@ var App = {
    _scanner: null,
    init: function() {
        this.attachListeners();
+        this._overlay = document.querySelector('.overlay');
    },
    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();
+        this.configureScanner('.overlay__content')
+        .then(function(scanner) {
+            this.showOverlay(scanner.stop.bind(scanner));
+            return scanner.detect();
+        }.bind(this))
+        .then(function(result) {
+            document.querySelector('input.isbn').value = result.codeResult.code;
+        })
+        .catch((e) => {
+            console.log(e);
+        })
+        .then(function() {
+            this.hideOverlay();
+            this.attachListeners();
+        }.bind(this));
    },
    attachListeners: function() {
        var self = this,
@@ -31,29 +33,11 @@ var App = {
        });
    },
    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();
-            });
-        }
+        var closeButton = document.querySelector('.overlay__close');
+        closeButton.addEventListener('click', function closeClick() {
+            closeButton.removeEventListener('click', closeClick);
+            cancelCb();
+        });
        this._overlay.style.display = "block";
    },
    hideOverlay: function() {
@@ -62,20 +46,18 @@ var App = {
        }
    },
    configureScanner: function(selector) {
-        if (!this._scanner) {
-            this._scanner = Quagga
-                .decoder({readers: ['ean_reader']})
-                .locator({patchSize: 'medium'})
-                .fromSource({
-                    target: selector,
-                    constraints: {
-                        width: 800,
-                        height: 600,
-                        facingMode: "environment"
-                    }
-                });
+        if (this._scanner) {
+            return Promise.resolve(this._scanner);
        }
-        return this._scanner;
+
+        return Quagga.fromCamera({
+            decoder: {readers: ['ean_reader']},
+            target: selector,
+        })
+        .then((scanner) => {
+            this._scanner = scanner;
+            return scanner;
+        });
    }
 };
 App.init();
@@ -208,6 +208,12 @@ export function fromCamera(constraints, {target, scope = Scope.EXTERNAL} = {}) {
            stop() {
                track.stop();
            },
+            waitUntilReady() {
+                if (track.readyState === "live") {
+                    return Promise.resolve();
+                }
+                return this.applyConstraints(constraints);
+            },
            getScope() {
                return scope;
            }
@@ -9,6 +9,9 @@ class Source {
    getLabel() {}
    stop() {}
    getScope() {}
+    waitUntilReady() {
+        return Promise.resolve();
+    }
 }

 export {Source};
@@ -23,5 +26,8 @@ export function generateSourceInterface() {
        getLabel() {},
        stop() {},
        getScope() {},
+        waitUntilReady() {
+            return Promise.resolve();
+        },
    };
 };
@@ -23,6 +23,7 @@ function fromConfig(pixelCapturer, config) {
    let currentConfig = config;
    let pendingStart = null;
    let initialized = false;
+    let cancelRequested = false;
    return {
        addEventListener(eventType, cb) {
            scanner.subscribe(eventType, cb);
@@ -52,6 +53,7 @@ function fromConfig(pixelCapturer, config) {
            return pendingStart;
        },
        stop() {
+            cancelRequested = true;
            scanner.stop();
            initialized = false;
            return this;
@@ -59,28 +61,27 @@ function fromConfig(pixelCapturer, config) {
        detect() {
            if (source.type === 'CAMERA'
                    || source.type === 'VIDEO') {
-                let cancelRequested = false;
-                return {
-                    cancel() {
-                        cancelRequested = true;
-                    },
-                    promise: new Promise((resolve, reject) => {
+                cancelRequested = false;
+                return this.start()
+                .then(() => {
+                    return new Promise((resolve, reject) => {
                        function onProcessed(result) {
                            if (result && result.codeResult && result.codeResult.code) {
                                scanner.stop();
                                scanner.unsubscribe("processed", onProcessed);
+                                scanner.unsubscribe("stopped", onProcessed);
                                resolve(result);
                            }
                            if (cancelRequested) {
-                                scanner.stop();
                                scanner.unsubscribe("processed", onProcessed);
+                                scanner.unsubscribe("stopped", onProcessed);
                                reject("cancelled!");
                            }
                        }
                        scanner.subscribe("processed", onProcessed);
-                        this.start();
-                    })
-                };
+                        scanner.subscribe("stopped", onProcessed, true);
+                    });
+                });
            } else {
                let pendingDecodeSingle = Promise.resolve();
                if (!initialized) {
@@ -61,6 +61,7 @@ function createScanner(pixelCapturer) {

        $drawable.style.width = `${zoom * 100}%`;
        $drawable.style.transform = `translate(${translate}%, ${translate}%)`;
+        $drawable.style.position = 'absolute';
        $viewport.style.paddingBottom = `${(viewport.height * 100 / viewport.width).toFixed(5)}%`;
        $viewport.style.overflow = "hidden";
        $viewport.style.height = 0;
@@ -233,8 +234,6 @@ function createScanner(pixelCapturer) {
            return pixelCapturer.grabFrameData({clipping: calculateClipping})
            .then((bitmap) => {
                if (bitmap) {
-                    //console.log(bitmap.dimensions);
-                    // adjust image size!
                    if (availableWorker) {
                        availableWorker.imageData = bitmap.data;
                        availableWorker.dimensions = bitmap.dimensions;
@@ -428,13 +427,16 @@ function createScanner(pixelCapturer) {
            if (imageWrapper) {
                _onUIThread = false;
                initBuffers(imageWrapper);
-                return Promise.resolve();
-            } else {
-                adjustWorkerPool(0);
-                return setup(_config);
            }
+            return Promise.resolve();
        },
        start: function() {
+            if (_onUIThread) {
+                adjustWorkerPool(0);
+                return source.waitUntilReady()
+                .then(setup.bind(null, _config))
+                .then(start);
+            }
            start();
        },
        isRunning: function() {
@@ -447,6 +449,7 @@ function createScanner(pixelCapturer) {
            if (source.getScope() === Scope.INTERNAL) {
                source.stop();
            }
+            _events.publish("stopped");
        },
        applyConfig(newConfig) {
            return this.init(newConfig);
@@ -454,8 +457,11 @@ function createScanner(pixelCapturer) {
        pause: function() {
            _stopped = true;
        },
-        subscribe(eventName, callback) {
-            _events.subscribe(eventName, callback);
+        subscribe(eventName, callback, once = false) {
+            if (!once) {
+                return _events.subscribe(eventName, callback);
+            }
+            _events.once(eventName, callback);
        },
        unsubscribe(eventName, callback) {
            _events.unsubscribe(eventName, callback);
@@ -474,7 +480,7 @@ function createScanner(pixelCapturer) {
                    }
                    return reject(result);
                }, true);
-                start();
+                this.start();
            });
        },
        canvas: _canvasContainer