mirror of
https://github.com/serratus/quaggaJS.git
synced 2026-08-13 05:31:37 +08:00
Merged master and fixed integrationtests
This commit is contained in:
Christoph Oberhofer
+36
-28
@@ -1,6 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
|
||||
@@ -8,24 +9,22 @@
|
||||
<meta name="description" content="" />
|
||||
<meta name="author" content="Christoph Oberhofer" />
|
||||
|
||||
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
|
||||
<meta name="viewport" content="width=device-width; initial-scale=1.0; user-scalable=no" />
|
||||
<link rel="stylesheet" type="text/css" href="css/styles.css" />
|
||||
</head>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div class="headline">
|
||||
<h1>QuaggaJS</h1>
|
||||
<h2>An advanced barcode-scanner written in JavaScript</h2>
|
||||
</div>
|
||||
</header>
|
||||
<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>The user's camera</h3>
|
||||
<p>If your platform supports the <strong>getUserMedia</strong> API call, you can try the real-time locating and decoding features.
|
||||
Simply allow the page to access your web-cam and point it to a barcode. You can switch between <strong>Code128</strong>
|
||||
and <strong>EAN</strong> to test different scenarios.
|
||||
It works best if your camera has built-in auto-focus.
|
||||
</p>
|
||||
<p>If your platform supports the <strong>getUserMedia</strong> API call, you can try the real-time locating and decoding
|
||||
features. Simply allow the page to access your web-cam and point it to a barcode. You can switch between <strong>Code128</strong> and <strong>EAN</strong> to test different scenarios. It works best if your camera has built-in auto-focus.
|
||||
</p>
|
||||
<div class="controls">
|
||||
<fieldset class="input-group">
|
||||
<button class="stop">Stop</button>
|
||||
@@ -49,7 +48,7 @@
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
<span>Resolution (long side)</span>
|
||||
<span>Resolution (width)</span>
|
||||
<select name="input-stream_constraints">
|
||||
<option value="320x240">320px</option>
|
||||
<option selected="selected" value="640x480">640px</option>
|
||||
@@ -96,25 +95,34 @@
|
||||
<option value="2">2x</option>
|
||||
</select>
|
||||
</label>
|
||||
<label style="display: none">
|
||||
<span>Zoom</span>
|
||||
<select name="settings_zoom"></select>
|
||||
</label>
|
||||
<label style="display: none">
|
||||
<span>Torch</span>
|
||||
<input type="checkbox" name="settings_torch" />
|
||||
</label>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div id="result_strip">
|
||||
<ul class="thumbnails"></ul>
|
||||
<ul class="collector"></ul>
|
||||
</div>
|
||||
<div id="interactive" class="viewport">
|
||||
<canvas class="drawing" />
|
||||
</div>
|
||||
<div id="result_strip">
|
||||
<ul class="thumbnails"></ul>
|
||||
<ul class="collector"></ul>
|
||||
</div>
|
||||
<div id="interactive" class="viewport">
|
||||
<canvas class="drawing" />
|
||||
</div>
|
||||
</section>
|
||||
<footer>
|
||||
<footer>
|
||||
<p>
|
||||
© Made with ❤️ by Christoph Oberhofer
|
||||
© Made with ❤️ by Christoph Oberhofer
|
||||
</p>
|
||||
</footer>
|
||||
</footer>
|
||||
|
||||
<script src="vendor/jquery-1.9.0.min.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="live_w_locator.js" type="text/javascript"></script>
|
||||
</body>
|
||||
</html>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -22,7 +22,7 @@ $(function() {
|
||||
}
|
||||
});
|
||||
var App = {
|
||||
init : function() {
|
||||
init: function() {
|
||||
this.overlay = document.querySelector('#interactive canvas.drawing');
|
||||
|
||||
Quagga.fromCamera({
|
||||
@@ -45,10 +45,66 @@ $(function() {
|
||||
console.error(err);
|
||||
});
|
||||
}.bind(this));
|
||||
|
||||
Quagga.init(this.state, function(err) {
|
||||
if (err) {
|
||||
return self.handleError(err);
|
||||
}
|
||||
//Quagga.registerResultCollector(resultCollector);
|
||||
App.attachListeners();
|
||||
App.checkCapabilities();
|
||||
Quagga.start();
|
||||
});
|
||||
},
|
||||
handleError: function(err) {
|
||||
console.log(err);
|
||||
},
|
||||
checkCapabilities: function() {
|
||||
var track = Quagga.CameraAccess.getActiveTrack();
|
||||
var capabilities = {};
|
||||
if (typeof track.getCapabilities === 'function') {
|
||||
capabilities = track.getCapabilities();
|
||||
}
|
||||
this.applySettingsVisibility('zoom', capabilities.zoom);
|
||||
this.applySettingsVisibility('torch', capabilities.torch);
|
||||
},
|
||||
updateOptionsForMediaRange: function(node, range) {
|
||||
console.log('updateOptionsForMediaRange', node, range);
|
||||
var NUM_STEPS = 6;
|
||||
var stepSize = (range.max - range.min) / NUM_STEPS;
|
||||
var option;
|
||||
var value;
|
||||
while (node.firstChild) {
|
||||
node.removeChild(node.firstChild);
|
||||
}
|
||||
for (var i = 0; i <= NUM_STEPS; i++) {
|
||||
value = range.min + (stepSize * i);
|
||||
option = document.createElement('option');
|
||||
option.value = value;
|
||||
option.innerHTML = value;
|
||||
node.appendChild(option);
|
||||
}
|
||||
},
|
||||
applySettingsVisibility: function(setting, capability) {
|
||||
// depending on type of capability
|
||||
if (typeof capability === 'boolean') {
|
||||
var node = document.querySelector('input[name="settings_' + setting + '"]');
|
||||
if (node) {
|
||||
node.parentNode.style.display = capability ? 'block' : 'none';
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (window.MediaSettingsRange && capability instanceof window.MediaSettingsRange) {
|
||||
var node = document.querySelector('select[name="settings_' + setting + '"]');
|
||||
if (node) {
|
||||
this.updateOptionsForMediaRange(node, capability);
|
||||
node.parentNode.style.display = 'block';
|
||||
}
|
||||
return;
|
||||
}
|
||||
},
|
||||
initCameraSelection: function() {
|
||||
var streamLabel = this.scanner.getSource().getLabel();
|
||||
|
||||
var streamLabel = this.scanner.getSource().getLabel();
|
||||
return Quagga.CameraAccess.enumerateVideoDevices()
|
||||
.then(function(devices) {
|
||||
function pruneText(text) {
|
||||
@@ -114,14 +170,27 @@ $(function() {
|
||||
$(".controls").off("click", "button.stop");
|
||||
$(".controls .reader-config-group").off("change", "input, select");
|
||||
},
|
||||
applySetting: function(setting, value) {
|
||||
var track = Quagga.CameraAccess.getActiveTrack();
|
||||
if (track && typeof track.getCapabilities === 'function') {
|
||||
switch (setting) {
|
||||
case 'zoom':
|
||||
return track.applyConstraints({advanced: [{zoom: parseFloat(value)}]});
|
||||
case 'torch':
|
||||
return track.applyConstraints({advanced: [{torch: !!value}]});
|
||||
}
|
||||
}
|
||||
},
|
||||
setState: function(path, value) {
|
||||
if (typeof this._accessByPath(this.inputMapper, path) === "function") {
|
||||
value = this._accessByPath(this.inputMapper, path)(value, this.state);
|
||||
}
|
||||
|
||||
this._accessByPath(this.state, path, value);
|
||||
|
||||
console.log(JSON.stringify(this.state));
|
||||
if (path.startsWith('settings.')) {
|
||||
var setting = path.substring(9);
|
||||
return self.applySetting(setting, value);
|
||||
}
|
||||
self._accessByPath(self.state, path, value);
|
||||
|
||||
this.scanner
|
||||
.applyConfig({
|
||||
|
||||
Reference in New Issue
Block a user