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

Added scan-to-input example

Browse Source
This commit is contained in:
Christoph Oberhofer
2016-07-31 15:57:43 +02:00
parent 6d05be3a44
commit db6e0e8632
8 changed files with 1270 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
v1.0.0-beta.1/examples/scan-to-input/index.html
+136
View File
@@ -0,0 +1,136 @@
---
layout: examples
title: Demo with live-stream
showInMenu: false
---
<link rel="stylesheet" type="text/css" href="{{ site.url }}{{ site.baseurl }}/stylesheets/prism.css" />
<section id="container" class="container">
<h3>Scan barcode to input-field</h3>
<p>Click the <strong>button</strong> next to the input-field
to start scanning an <strong>EAN-13</strong> barcode</p>
<div>
<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">&nbsp;</button>
</div>
</form>
</div>
<p>This example demonstrates the following features:
<ul>
<li>Access to user's camera</li>
<li>Configuring EAN-Reader</li>
<li>Use custom mount-point (Query-Selector)</li>
<li>Start/Stop scanning based on certain events</li>
</ul>
</p>
<div class="source-code">
<h4>Source</h4>
<div class="collapsable-source">
<pre>
<code class="language-javascript">
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();
</code>
</pre>
</div>
<div class="collapsable-source">
<pre>
<code class="language-html">
&lt;form&gt;
&lt;div class="input-field"&gt;
&lt;label for="isbn_input"&gt;EAN:&lt;/label&gt;
&lt;input id="isbn_input" class="isbn" type="text" /&gt;
&lt;button type="button" class="icon-barcode button scan"&gt;&nbsp;&lt;/button&gt;
&lt;/div&gt;
&lt;/form&gt;
</code>
</pre>
</div>
</div>
</section>
<script src="../js/quagga.js" type="text/javascript"></script>
<script src="index.js" type="text/javascript"></script>
<script src="../js/prism.js"></script>
v1.0.0-beta.1/examples/scan-to-input/index.js
+81
View File
@@ -0,0 +1,81 @@
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'})
.fromSource({
target: selector,
constraints: {
width: 800,
height: 600,
facingMode: "environment"
}
});
}
return this._scanner;
}
};
App.init();