Cancel scanning; improving start/stop behavior

src/input/CameraSource.js

@@ -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;
             }

src/input/SourceInterface.js

@@ -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();
+        },
     };
 };

src/quagga.js

@@ -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) {

src/scanner.js

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