UnknownObject/quaggaJS
1
0
Fork 0
mirror of https://github.com/serratus/quaggaJS.git synced 2026-08-13 05:31:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

Cancel scanning; improving start/stop behavior

Browse Source
This commit is contained in:
Christoph Oberhofer
2017-04-06 16:10:52 +02:00
parent 255e5a6937
commit efb3b6c5bc
7 changed files with 116 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/css/styles.css
+2 -1
View File
@@ -48,6 +48,7 @@
} }
.overlay { .overlay {
display: none;
overflow: hidden; overflow: hidden;
position: fixed; position: fixed;
top: 0; top: 0;
@@ -58,7 +59,7 @@
background-color: rgba(0, 0, 0, 0.3); background-color: rgba(0, 0, 0, 0.3);
} }
.overlay__content { .overlay__container {
top: 50%; top: 50%;
position: absolute; position: absolute;
left: 50%; left: 50%;
example/scan-to-input/index.html
+44 -51
View File
@@ -52,22 +52,24 @@ var App = {
_scanner: null, _scanner: null,
init: function() { init: function() {
this.attachListeners(); this.attachListeners();
this._overlay = document.querySelector('.overlay');
}, },
activateScanner: function() { activateScanner: function() {
var scanner = this.configureScanner('.overlay__content'), this.configureScanner('.overlay__content')
onDetected = function (result) { .then(function(scanner) {
document.querySelector('input.isbn').value = result.codeResult.code; this.showOverlay(scanner.stop.bind(scanner));
stop(); return scanner.detect();
}.bind(this), }.bind(this))
stop = function() { .then(function(result) {
scanner.stop(); // should also clear all event-listeners? document.querySelector('input.isbn').value = result.codeResult.code;
scanner.removeEventListener('detected', onDetected); })
this.hideOverlay(); .catch((e) => {
this.attachListeners(); console.log(e);
}.bind(this); })
.then(function() {
this.showOverlay(stop); this.hideOverlay();
scanner.addEventListener('detected', onDetected).start(); this.attachListeners();
}.bind(this));
}, },
attachListeners: function() { attachListeners: function() {
var self = this, var self = this,
@@ -80,29 +82,11 @@ var App = {
}); });
}, },
showOverlay: function(cancelCb) { showOverlay: function(cancelCb) {
if (!this._overlay) { var closeButton = document.querySelector('.overlay__close');
var content = document.createElement('div'), closeButton.addEventListener('click', function closeClick() {
closeButton = document.createElement('div'); closeButton.removeEventListener('click', closeClick);
cancelCb();
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"; this._overlay.style.display = "block";
}, },
hideOverlay: function() { hideOverlay: function() {
@@ -111,20 +95,18 @@ var App = {
} }
}, },
configureScanner: function(selector) { configureScanner: function(selector) {
if (!this._scanner) { if (this._scanner) {
this._scanner = Quagga return Promise.resolve(this._scanner);
.decoder({readers: ['ean_reader']})
.locator({patchSize: 'medium'})
.fromVideo({
target: selector,
constraints: {
width: 800,
height: 600,
facingMode: "environment"
}
});
} }
return this._scanner;
return Quagga.fromCamera({
decoder: {readers: ['ean_reader']},
target: selector,
})
.then((scanner) => {
this._scanner = scanner;
return scanner;
});
} }
}; };
App.init(); App.init();
@@ -141,6 +123,12 @@ App.init();
<button type="button" class="icon-barcode button scan"> </button> <button type="button" class="icon-barcode button scan"> </button>
</div> </div>
</form> </form>
<div class="overlay">
<div class="overlay__container">
<div class="overlay__close">X</div>
<div class="overlay__content" />
</div>
</div>
</code> </code>
</pre> </pre>
</div> </div>
@@ -151,7 +139,12 @@ App.init();
&copy; Copyright by Christoph Oberhofer &copy; Copyright by Christoph Oberhofer
</p> </p>
</footer> </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="//webrtc.github.io/adapter/adapter-latest.js" type="text/javascript"></script>
<script src="../../dist/quagga.js" type="text/javascript"></script> <script src="../../dist/quagga.js" type="text/javascript"></script>
<script src="index.js" type="text/javascript"></script> <script src="index.js" type="text/javascript"></script>
example/scan-to-input/index.js
+32 -50
View File
@@ -3,22 +3,24 @@ var App = {
_scanner: null, _scanner: null,
init: function() { init: function() {
this.attachListeners(); this.attachListeners();
this._overlay = document.querySelector('.overlay');
}, },
activateScanner: function() { activateScanner: function() {
var scanner = this.configureScanner('.overlay__content'), this.configureScanner('.overlay__content')
onDetected = function (result) { .then(function(scanner) {
document.querySelector('input.isbn').value = result.codeResult.code; this.showOverlay(scanner.stop.bind(scanner));
stop(); return scanner.detect();
}.bind(this), }.bind(this))
stop = function() { .then(function(result) {
scanner.stop(); // should also clear all event-listeners? document.querySelector('input.isbn').value = result.codeResult.code;
scanner.removeEventListener('detected', onDetected); })
this.hideOverlay(); .catch((e) => {
this.attachListeners(); console.log(e);
}.bind(this); })
.then(function() {
this.showOverlay(stop); this.hideOverlay();
scanner.addEventListener('detected', onDetected).start(); this.attachListeners();
}.bind(this));
}, },
attachListeners: function() { attachListeners: function() {
var self = this, var self = this,
@@ -31,29 +33,11 @@ var App = {
}); });
}, },
showOverlay: function(cancelCb) { showOverlay: function(cancelCb) {
if (!this._overlay) { var closeButton = document.querySelector('.overlay__close');
var content = document.createElement('div'), closeButton.addEventListener('click', function closeClick() {
closeButton = document.createElement('div'); closeButton.removeEventListener('click', closeClick);
cancelCb();
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"; this._overlay.style.display = "block";
}, },
hideOverlay: function() { hideOverlay: function() {
@@ -62,20 +46,18 @@ var App = {
} }
}, },
configureScanner: function(selector) { configureScanner: function(selector) {
if (!this._scanner) { if (this._scanner) {
this._scanner = Quagga return Promise.resolve(this._scanner);
.decoder({readers: ['ean_reader']})
.locator({patchSize: 'medium'})
.fromSource({
target: selector,
constraints: {
width: 800,
height: 600,
facingMode: "environment"
}
});
} }
return this._scanner;
return Quagga.fromCamera({
decoder: {readers: ['ean_reader']},
target: selector,
})
.then((scanner) => {
this._scanner = scanner;
return scanner;
});
} }
}; };
App.init(); App.init();
src/input/CameraSource.js
+6
View File
@@ -208,6 +208,12 @@ export function fromCamera(constraints, {target, scope = Scope.EXTERNAL} = {}) {
stop() { stop() {
track.stop(); track.stop();
}, },
waitUntilReady() {
if (track.readyState === "live") {
return Promise.resolve();
}
return this.applyConstraints(constraints);
},
getScope() { getScope() {
return scope; return scope;
} }
src/input/SourceInterface.js
+6
View File
@@ -9,6 +9,9 @@ class Source {
getLabel() {} getLabel() {}
stop() {} stop() {}
getScope() {} getScope() {}
waitUntilReady() {
return Promise.resolve();
}
} }
export {Source}; export {Source};
@@ -23,5 +26,8 @@ export function generateSourceInterface() {
getLabel() {}, getLabel() {},
stop() {}, stop() {},
getScope() {}, getScope() {},
waitUntilReady() {
return Promise.resolve();
},
}; };
}; };
src/quagga.js
+11 -10
View File
@@ -23,6 +23,7 @@ function fromConfig(pixelCapturer, config) {
let currentConfig = config; let currentConfig = config;
let pendingStart = null; let pendingStart = null;
let initialized = false; let initialized = false;
let cancelRequested = false;
return { return {
addEventListener(eventType, cb) { addEventListener(eventType, cb) {
scanner.subscribe(eventType, cb); scanner.subscribe(eventType, cb);
@@ -52,6 +53,7 @@ function fromConfig(pixelCapturer, config) {
return pendingStart; return pendingStart;
}, },
stop() { stop() {
cancelRequested = true;
scanner.stop(); scanner.stop();
initialized = false; initialized = false;
return this; return this;
@@ -59,28 +61,27 @@ function fromConfig(pixelCapturer, config) {
detect() { detect() {
if (source.type === 'CAMERA' if (source.type === 'CAMERA'
|| source.type === 'VIDEO') { || source.type === 'VIDEO') {
let cancelRequested = false; cancelRequested = false;
return { return this.start()
cancel() { .then(() => {
cancelRequested = true; return new Promise((resolve, reject) => {
},
promise: new Promise((resolve, reject) => {
function onProcessed(result) { function onProcessed(result) {
if (result && result.codeResult && result.codeResult.code) { if (result && result.codeResult && result.codeResult.code) {
scanner.stop(); scanner.stop();
scanner.unsubscribe("processed", onProcessed); scanner.unsubscribe("processed", onProcessed);
scanner.unsubscribe("stopped", onProcessed);
resolve(result); resolve(result);
} }
if (cancelRequested) { if (cancelRequested) {
scanner.stop();
scanner.unsubscribe("processed", onProcessed); scanner.unsubscribe("processed", onProcessed);
scanner.unsubscribe("stopped", onProcessed);
reject("cancelled!"); reject("cancelled!");
} }
} }
scanner.subscribe("processed", onProcessed); scanner.subscribe("processed", onProcessed);
this.start(); scanner.subscribe("stopped", onProcessed, true);
}) });
}; });
} else { } else {
let pendingDecodeSingle = Promise.resolve(); let pendingDecodeSingle = Promise.resolve();
if (!initialized) { if (!initialized) {
src/scanner.js
+15 -9
View File
@@ -61,6 +61,7 @@ function createScanner(pixelCapturer) {
$drawable.style.width = `${zoom * 100}%`; $drawable.style.width = `${zoom * 100}%`;
$drawable.style.transform = `translate(${translate}%, ${translate}%)`; $drawable.style.transform = `translate(${translate}%, ${translate}%)`;
$drawable.style.position = 'absolute';
$viewport.style.paddingBottom = `${(viewport.height * 100 / viewport.width).toFixed(5)}%`; $viewport.style.paddingBottom = `${(viewport.height * 100 / viewport.width).toFixed(5)}%`;
$viewport.style.overflow = "hidden"; $viewport.style.overflow = "hidden";
$viewport.style.height = 0; $viewport.style.height = 0;
@@ -233,8 +234,6 @@ function createScanner(pixelCapturer) {
return pixelCapturer.grabFrameData({clipping: calculateClipping}) return pixelCapturer.grabFrameData({clipping: calculateClipping})
.then((bitmap) => { .then((bitmap) => {
if (bitmap) { if (bitmap) {
//console.log(bitmap.dimensions);
// adjust image size!
if (availableWorker) { if (availableWorker) {
availableWorker.imageData = bitmap.data; availableWorker.imageData = bitmap.data;
availableWorker.dimensions = bitmap.dimensions; availableWorker.dimensions = bitmap.dimensions;
@@ -428,13 +427,16 @@ function createScanner(pixelCapturer) {
if (imageWrapper) { if (imageWrapper) {
_onUIThread = false; _onUIThread = false;
initBuffers(imageWrapper); initBuffers(imageWrapper);
return Promise.resolve();
} else {
adjustWorkerPool(0);
return setup(_config);
} }
return Promise.resolve();
}, },
start: function() { start: function() {
if (_onUIThread) {
adjustWorkerPool(0);
return source.waitUntilReady()
.then(setup.bind(null, _config))
.then(start);
}
start(); start();
}, },
isRunning: function() { isRunning: function() {
@@ -447,6 +449,7 @@ function createScanner(pixelCapturer) {
if (source.getScope() === Scope.INTERNAL) { if (source.getScope() === Scope.INTERNAL) {
source.stop(); source.stop();
} }
_events.publish("stopped");
}, },
applyConfig(newConfig) { applyConfig(newConfig) {
return this.init(newConfig); return this.init(newConfig);
@@ -454,8 +457,11 @@ function createScanner(pixelCapturer) {
pause: function() { pause: function() {
_stopped = true; _stopped = true;
}, },
subscribe(eventName, callback) { subscribe(eventName, callback, once = false) {
_events.subscribe(eventName, callback); if (!once) {
return _events.subscribe(eventName, callback);
}
_events.once(eventName, callback);
}, },
unsubscribe(eventName, callback) { unsubscribe(eventName, callback) {
_events.unsubscribe(eventName, callback); _events.unsubscribe(eventName, callback);
@@ -474,7 +480,7 @@ function createScanner(pixelCapturer) {
} }
return reject(result); return reject(result);
}, true); }, true);
start(); this.start();
}); });
}, },
canvas: _canvasContainer canvas: _canvasContainer