You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
154 lines
5.1 KiB
HTML
154 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
|
|
|
<title>index</title>
|
|
<meta name="description" content="" />
|
|
<meta name="author" content="Christoph Oberhofer" />
|
|
|
|
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
|
|
<link rel="stylesheet" type="text/css" href="../css/fonts.css" />
|
|
<link rel="stylesheet" type="text/css" href="../css/styles.css" />
|
|
<link rel="stylesheet" type="text/css" href="../css/prism.css" />
|
|
</head>
|
|
|
|
<body>
|
|
<header>
|
|
<div class="headline">
|
|
<h1>QuaggaJS</h1>
|
|
<h2>An advanced barcode-scanner written in JavaScript</h2>
|
|
</div>
|
|
</header>
|
|
<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"> </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();
|
|
this._overlay = document.querySelector('.overlay');
|
|
},
|
|
activateScanner: function() {
|
|
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,
|
|
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) {
|
|
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) {
|
|
return Promise.resolve(this._scanner);
|
|
}
|
|
|
|
return Quagga.fromCamera({
|
|
decoder: {readers: ['ean_reader']},
|
|
target: selector,
|
|
})
|
|
.then((scanner) => {
|
|
this._scanner = scanner;
|
|
return scanner;
|
|
});
|
|
}
|
|
};
|
|
App.init();
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
<div class="collapsable-source">
|
|
<pre>
|
|
<code class="language-html">
|
|
<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>
|
|
<div class="overlay">
|
|
<div class="overlay__container">
|
|
<div class="overlay__close">X</div>
|
|
<div class="overlay__content" />
|
|
</div>
|
|
</div>
|
|
</code>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<footer>
|
|
<p>
|
|
© 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>
|
|
<script src="../vendor/prism.js"></script>
|
|
</body>
|
|
</html>
|