Added scanning barcodes with a camera
This commit is contained in:
402
quagga2/quagga2-1.12.1/docs/examples/live_w_locator.js
Normal file
402
quagga2/quagga2-1.12.1/docs/examples/live_w_locator.js
Normal file
@@ -0,0 +1,402 @@
|
||||
$(function() {
|
||||
var resultCollector = Quagga.ResultCollector.create({
|
||||
capture: true,
|
||||
capacity: 20,
|
||||
blacklist: [{
|
||||
code: "WIWV8ETQZ1", format: "code_93"
|
||||
}, {
|
||||
code: "EH3C-%GU23RK3", format: "code_93"
|
||||
}, {
|
||||
code: "O308SIHQOXN5SA/PJ", format: "code_93"
|
||||
}, {
|
||||
code: "DG7Q$TV8JQ/EN", format: "code_93"
|
||||
}, {
|
||||
code: "VOFD1DB5A.1F6QU", format: "code_93"
|
||||
}, {
|
||||
code: "4SO64P4X8 U4YUU1T-", format: "code_93"
|
||||
}],
|
||||
filter: function(codeResult) {
|
||||
// only store results which match this constraint
|
||||
// e.g.: codeResult
|
||||
return true;
|
||||
}
|
||||
});
|
||||
var App = {
|
||||
_initDebounceTimer: null,
|
||||
_pendingReinit: false,
|
||||
init: function() {
|
||||
var self = this;
|
||||
Quagga.init(this.state, function(err) {
|
||||
if (err) {
|
||||
return self.handleError(err);
|
||||
}
|
||||
//Quagga.registerResultCollector(resultCollector);
|
||||
App.attachListeners();
|
||||
Quagga.start();
|
||||
App.initCameraSelection();
|
||||
App.checkCapabilities();
|
||||
// Sync UI checkboxes to match actual state after init
|
||||
$('input[name="locate"]').prop('checked', App.state.locate);
|
||||
});
|
||||
},
|
||||
reinit: function() {
|
||||
// Debounced reinit: cancel pending and schedule a new one
|
||||
console.log('[App.reinit] Called, current timer:', App._initDebounceTimer !== null, 'Current state.locate:', App.state.locate);
|
||||
if (App._initDebounceTimer) {
|
||||
console.log('[App.reinit] Cancelling pending init');
|
||||
clearTimeout(App._initDebounceTimer);
|
||||
}
|
||||
App._initDebounceTimer = setTimeout(function() {
|
||||
console.log('[App.reinit] Debounce expired, calling init() with state.locate:', App.state.locate);
|
||||
App._initDebounceTimer = null;
|
||||
App._pendingReinit = false;
|
||||
App.init();
|
||||
}, 250);
|
||||
},
|
||||
handleError: function(err) {
|
||||
console.log(err);
|
||||
// If we attempted to open a specific device and failed, revert to last known-good constraints
|
||||
try {
|
||||
var attempted = (App.state && App.state.inputStream && App.state.inputStream.constraints) || {};
|
||||
var hadSpecificDevice = attempted && attempted.deviceId;
|
||||
if (hadSpecificDevice) {
|
||||
// Detach to avoid stacked handlers
|
||||
// Try reinitializing to restore a working stream
|
||||
Quagga.stop();
|
||||
App.init();
|
||||
}
|
||||
} catch(e2) {
|
||||
// Ignore and leave UI available for user to pick another device
|
||||
}
|
||||
},
|
||||
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 = Quagga.CameraAccess.getActiveStreamLabel();
|
||||
var selectedDeviceId = null;
|
||||
try {
|
||||
// Prefer explicit deviceId from current state if present
|
||||
var constraints = (this.state && this.state.inputStream && this.state.inputStream.constraints) || {};
|
||||
if (constraints.deviceId) {
|
||||
selectedDeviceId = (typeof constraints.deviceId === 'object' && constraints.deviceId.exact) ? constraints.deviceId.exact : constraints.deviceId;
|
||||
} else {
|
||||
selectedDeviceId = null;
|
||||
}
|
||||
} catch(e) {}
|
||||
|
||||
return Quagga.CameraAccess.enumerateVideoDevices()
|
||||
.then(function(devices) {
|
||||
function pruneText(text) {
|
||||
return text.length > 30 ? text.substr(0, 30) : text;
|
||||
}
|
||||
var $deviceSelection = document.getElementById("deviceSelection");
|
||||
while ($deviceSelection.firstChild) {
|
||||
$deviceSelection.removeChild($deviceSelection.firstChild);
|
||||
}
|
||||
devices.forEach(function(device) {
|
||||
var $option = document.createElement("option");
|
||||
$option.value = device.deviceId || device.id;
|
||||
$option.appendChild(document.createTextNode(pruneText(device.label || device.deviceId || device.id)));
|
||||
// Preserve explicit selection by deviceId when available; fallback to stream label
|
||||
if (selectedDeviceId) {
|
||||
$option.selected = ($option.value === selectedDeviceId);
|
||||
} else {
|
||||
$option.selected = (streamLabel === device.label);
|
||||
}
|
||||
$deviceSelection.appendChild($option);
|
||||
});
|
||||
});
|
||||
},
|
||||
attachListeners: function() {
|
||||
var self = this;
|
||||
|
||||
console.log('[App.attachListeners] Called - this should only happen once per init');
|
||||
self.initCameraSelection();
|
||||
|
||||
// Remove any existing handlers to prevent stacking
|
||||
$(".controls").off("click", "button.stop");
|
||||
$(".controls .reader-config-group").off("change", "input, select");
|
||||
|
||||
$(".controls").on("click", "button.stop", function(e) {
|
||||
e.preventDefault();
|
||||
Quagga.stop();
|
||||
self._printCollectedResults();
|
||||
});
|
||||
|
||||
$(".controls .reader-config-group").on("change", "input, select", function(e) {
|
||||
e.preventDefault();
|
||||
var $target = $(e.target),
|
||||
value = $target.attr("type") === "checkbox" ? $target.prop("checked") : $target.val(),
|
||||
name = $target.attr("name"),
|
||||
state = self._convertNameToState(name);
|
||||
|
||||
console.log("Value of "+ state + " changed to " + value, "checkbox checked prop:", $target.prop("checked"), "target type:", $target.attr("type"));
|
||||
self.setState(state, value);
|
||||
});
|
||||
},
|
||||
_printCollectedResults: function() {
|
||||
var results = resultCollector.getResults(),
|
||||
$ul = $("#result_strip ul.collector");
|
||||
|
||||
results.forEach(function(result) {
|
||||
var $li = $('<li><div class="thumbnail"><div class="imgWrapper"><img /></div><div class="caption"><h4 class="code"></h4></div></div></li>');
|
||||
|
||||
$li.find("img").attr("src", result.frame);
|
||||
$li.find("h4.code").html(result.codeResult.code + " (" + result.codeResult.format + ")");
|
||||
$ul.prepend($li);
|
||||
});
|
||||
},
|
||||
_accessByPath: function(obj, path, val) {
|
||||
var parts = path.split('.'),
|
||||
depth = parts.length,
|
||||
setter = (typeof val !== "undefined") ? true : false;
|
||||
|
||||
return parts.reduce(function(o, key, i) {
|
||||
if (setter && (i + 1) === depth) {
|
||||
if (typeof o[key] === "object" && typeof val === "object") {
|
||||
Object.assign(o[key], val);
|
||||
} else {
|
||||
o[key] = val;
|
||||
}
|
||||
}
|
||||
return key in o ? o[key] : {};
|
||||
}, obj);
|
||||
},
|
||||
_convertNameToState: function(name) {
|
||||
return name.replace("_", ".").split("-").reduce(function(result, value) {
|
||||
return result + value.charAt(0).toUpperCase() + value.substring(1);
|
||||
});
|
||||
},
|
||||
detachListeners: 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) {
|
||||
var self = this;
|
||||
|
||||
console.log('[App.setState] ENTRY: path=', path, 'value=', value, 'current state.locate=', self.state.locate);
|
||||
|
||||
if (typeof self._accessByPath(self.inputMapper, path) === "function") {
|
||||
value = self._accessByPath(self.inputMapper, path)(value);
|
||||
}
|
||||
|
||||
if (path.startsWith('settings.')) {
|
||||
var setting = path.substring(9);
|
||||
return self.applySetting(setting, value);
|
||||
}
|
||||
// If switching cameras, replace constraints entirely with { deviceId: { exact } }
|
||||
if (path === 'inputStream.constraints' && value && typeof value === 'object' && 'deviceId' in value && Object.keys(value).length === 1) {
|
||||
if (!self.state.inputStream) self.state.inputStream = {};
|
||||
var dev = value.deviceId;
|
||||
self.state.inputStream.constraints = { deviceId: (typeof dev === 'object' ? dev : { exact: dev }) };
|
||||
} else {
|
||||
self._accessByPath(self.state, path, value);
|
||||
}
|
||||
|
||||
console.log('[App.setState] AFTER _accessByPath: state.locate=', self.state.locate);
|
||||
console.log(JSON.stringify(self.state));
|
||||
|
||||
console.log('[App.setState] path:', path, 'pending:', App._pendingReinit);
|
||||
// Prevent overlapping stop/reinit sequences
|
||||
if (App._pendingReinit) {
|
||||
// Already stopping/reiniting, just update the debounce timer
|
||||
console.log('[App.setState] Already pending, just updating debounce');
|
||||
App.reinit();
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('[App.setState] Calling stop and scheduling reinit');
|
||||
App._pendingReinit = true;
|
||||
App.detachListeners();
|
||||
var stopResult = Quagga.stop();
|
||||
if (stopResult && typeof stopResult.then === 'function') {
|
||||
stopResult.then(function(){
|
||||
console.log('[App.setState] Stop completed (promise), calling reinit');
|
||||
App.reinit();
|
||||
});
|
||||
} else {
|
||||
// Older sync stop; reinit with debounce
|
||||
console.log('[App.setState] Stop completed (sync), calling reinit');
|
||||
App.reinit();
|
||||
}
|
||||
},
|
||||
inputMapper: {
|
||||
inputStream: {
|
||||
constraints: function(value){
|
||||
if (/^(\d+)x(\d+)$/.test(value)) {
|
||||
var values = value.split('x');
|
||||
// Update resolution while preserving any existing deviceId selection
|
||||
var current = App.state && App.state.inputStream && App.state.inputStream.constraints || {};
|
||||
var next = {
|
||||
width: {min: parseInt(values[0])},
|
||||
height: {min: parseInt(values[1])}
|
||||
};
|
||||
if (current.deviceId) {
|
||||
next.deviceId = current.deviceId;
|
||||
}
|
||||
return next;
|
||||
}
|
||||
// Switching camera: use ONLY deviceId with exact match to avoid conflicting constraints
|
||||
return { deviceId: { exact: value } };
|
||||
}
|
||||
},
|
||||
decoder: {
|
||||
readers: function(value) {
|
||||
if (value === 'ean_extended') {
|
||||
return [{
|
||||
format: "ean_reader",
|
||||
config: {
|
||||
supplements: [
|
||||
'ean_5_reader', 'ean_2_reader'
|
||||
]
|
||||
}
|
||||
}];
|
||||
}
|
||||
return [{
|
||||
format: value + "_reader",
|
||||
config: {}
|
||||
}];
|
||||
}
|
||||
}
|
||||
},
|
||||
state: {
|
||||
inputStream: {
|
||||
type : "LiveStream",
|
||||
constraints: {
|
||||
width: {min: 640},
|
||||
height: {min: 480},
|
||||
facingMode: "environment",
|
||||
aspectRatio: {min: 1, max: 2}
|
||||
},
|
||||
area: {
|
||||
top: "30%",
|
||||
right: "10%",
|
||||
left: "10%",
|
||||
bottom: "30%",
|
||||
// borderColor: "#0F0",
|
||||
// borderWidth: 2,
|
||||
backgroundColor: "rgba(255,0,0,0.15)"
|
||||
}
|
||||
},
|
||||
locator: {
|
||||
patchSize: "medium",
|
||||
halfSample: true
|
||||
},
|
||||
frequency: 10,
|
||||
decoder: {
|
||||
readers : [{
|
||||
format: "code_128_reader",
|
||||
config: {}
|
||||
}]
|
||||
},
|
||||
locate: true
|
||||
},
|
||||
lastResult : null
|
||||
};
|
||||
|
||||
console.log('[Startup] Calling initial App.reinit()');
|
||||
App.reinit();
|
||||
|
||||
var processedCount = 0;
|
||||
Quagga.onProcessed(function(result) {
|
||||
processedCount++;
|
||||
/*
|
||||
console.log('onProcessed #' + processedCount + ':', result ? {
|
||||
hasBox: !!result.box,
|
||||
boxLength: result.box ? result.box.length : 0,
|
||||
hasBoxes: !!result.boxes,
|
||||
boxesLength: result.boxes ? result.boxes.length : 0,
|
||||
codeResult: !!result.codeResult
|
||||
} : 'null result');
|
||||
*/
|
||||
var drawingCtx = Quagga.canvas.ctx.overlay,
|
||||
drawingCanvas = Quagga.canvas.dom.overlay;
|
||||
|
||||
if (result) {
|
||||
if (result.boxes) {
|
||||
drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.getAttribute("height")));
|
||||
result.boxes.filter(function (box) {
|
||||
return box !== result.box;
|
||||
}).forEach(function (box) {
|
||||
Quagga.ImageDebug.drawPath(box, {x: 0, y: 1}, drawingCtx, {color: "orange", lineWidth: 2});
|
||||
});
|
||||
}
|
||||
|
||||
if (result.box) {
|
||||
Quagga.ImageDebug.drawPath(result.box, {x: 0, y: 1}, drawingCtx, {color: "#00F", lineWidth: 2});
|
||||
}
|
||||
|
||||
if (result.codeResult && result.codeResult.code) {
|
||||
Quagga.ImageDebug.drawPath(result.line, {x: 'x', y: 'y'}, drawingCtx, {color: 'red', lineWidth: 3});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Quagga.onDetected(function(result) {
|
||||
var code = result.codeResult.code;
|
||||
|
||||
if (App.lastResult !== code) {
|
||||
App.lastResult = code;
|
||||
var $node = null, canvas = Quagga.canvas.dom.image;
|
||||
|
||||
$node = $('<li><div class="thumbnail"><div class="imgWrapper"><img /></div><div class="caption"><h4 class="code"></h4></div></div></li>');
|
||||
$node.find("img").attr("src", canvas.toDataURL());
|
||||
$node.find("h4.code").html(code);
|
||||
$("#result_strip ul.thumbnails").prepend($node);
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user