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

fromCamera working; experimenting with zoom

Browse Source
This commit is contained in:
Christoph Oberhofer
2017-03-23 13:47:01 +01:00
parent 242c275571
commit eb858d0c63
9 changed files with 110 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/file_input.html
+1 -1
View File
@@ -77,7 +77,7 @@
</label>
<label>
<span>Half-Sample</span>
<input type="checkbox" name="locator_half-sample" />
<input checked="checked" type="checkbox" name="locator_half-sample" />
</label>
<label>
<span>Single Channel</span>
example/live_w_locator.js
+14 -9
View File
@@ -3,9 +3,13 @@ $(function() {
init : function() {
this.overlay = document.querySelector('#interactive canvas.drawing');
this.scanner = Quagga
.fromConfig(this.state);
this.state.inputStream.constraints.zoom = {exact: 2};
Quagga.fromCamera({
constraints: this.state.inputStream.constraints,
locator: this.state.locator,
decoder: this.state.decoder,
}).then(function(scanner) {
this.scanner = scanner;
this.scanner
.addEventListener("processed", drawResult.bind(this, this.scanner))
.addEventListener("detected", addToResults.bind(this, this.scanner));
@@ -16,11 +20,12 @@ $(function() {
this.attachListeners();
}.bind(this))
.catch(function(err) {
console.log("Error: " + err);
console.error(err);
});
}.bind(this));
},
initCameraSelection: function() {
var streamLabel = Quagga.CameraAccess.getActiveStreamLabel();
var streamLabel = this.scanner.getSource().getLabel();
return Quagga.CameraAccess.enumerateVideoDevices()
.then(function(devices) {
@@ -106,8 +111,8 @@ $(function() {
if (/^(\d+)x(\d+)$/.test(value)) {
var values = value.split('x');
return {
width: {min: parseInt(values[0])},
height: {min: parseInt(values[1])}
width: {ideal: parseInt(values[0])},
height: {ideal: parseInt(values[1])}
};
}
return {
@@ -141,8 +146,8 @@ $(function() {
inputStream: {
type : "LiveStream",
constraints: {
width: {min: 640},
height: {min: 480},
width: {ideal: 640},
height: {ideal: 480},
facingMode: "environment",
aspectRatio: {min: 1, max: 2}
}
src/common/utils.js
+10
View File
@@ -4,3 +4,13 @@ export function sleep(millis) {
window.setTimeout(resolve, millis);
});
}
export function getViewport(target) {
if (target && target.nodeName && target.nodeType === 1) {
return target;
} else {
// Use '#interactive.viewport' as a fallback selector (backwards compatibility)
var selector = typeof target === 'string' ? target : '#interactive.viewport';
return document.querySelector(selector);
}
}
src/config/config.dev.js
+1 -1
View File
@@ -30,7 +30,7 @@ module.exports = {
}
},
locator: {
halfSample: false,
halfSample: true,
patchSize: "medium", // x-small, small, medium, large, x-large
debug: {
showCanvas: false,
src/input/PixelCapture.js
+2 -11
View File
@@ -2,6 +2,7 @@ import {
computeGray
} from '../common/cv_utils';
import {sleep} from '../common/utils';
import {getViewport} from '../common/utils';
function adjustCanvasSize(input, canvas) {
if (input instanceof HTMLVideoElement) {
@@ -25,18 +26,8 @@ function adjustCanvasSize(input, canvas) {
}
}
function getViewPort(target) {
if (target && target.nodeName && target.nodeType === 1) {
return target;
} else {
// Use '#interactive.viewport' as a fallback selector (backwards compatibility)
var selector = typeof target === 'string' ? target : '#interactive.viewport';
return document.querySelector(selector);
}
}
function getOrCreateCanvas(source, target) {
const $viewport = getViewPort(target);
const $viewport = getViewport(target);
let $canvas = $viewport.querySelector("canvas.imgBuffer");
if (!$canvas) {
$canvas = document.createElement("canvas");
src/input/Source.js
+31 -12
View File
@@ -1,21 +1,40 @@
import {clone} from 'lodash';
import {determineOrientation, PORTRAIT} from '../common/device';
import CameraAccess from './camera_access';
import {getViewport} from '../common/utils';
function getOrCreateVideo(source, target) {
const $viewport = getViewport(target);
if ($viewport) {
let $video = $viewport.querySelector("video");
if (!$video) {
$video = document.createElement("video");
$viewport.appendChild($video);
}
return $video;
}
return document.createElement("video");
}
export function fromCamera(constraints) {
if (!constraints) {
constraints = {width: {ideal: 540}, height: {ideal: 540}, aspectRatio: {ideal: 1}, facingMode: 'environment'};
}
var orientation = determineOrientation();
var videoConstraints = constraints;
var videoConstraints = clone(constraints);
if (orientation === PORTRAIT) {
constraints = Object.assign({}, constraints, {
width: constraints.height,
height: constraints.width,
videoConstraints = Object.assign({}, videoConstraints, {
width: videoConstraints.height,
height: videoConstraints.width,
});
}
const video = document.querySelector('video');
CameraAccess.request(videoConstraints, video)
if (videoConstraints.zoom && videoConstraints.zoom.exact > 1) {
videoConstraints.width.ideal = Math.floor(videoConstraints.width.ideal * videoConstraints.zoom.exact);
videoConstraints.height.ideal = Math.floor(videoConstraints.height.ideal * videoConstraints.zoom.exact);
delete videoConstraints.zoom;
}
console.log(videoConstraints);
const video = getOrCreateVideo();
return CameraAccess.request(video, videoConstraints)
.then(function(mediastream) {
const track = mediastream.getVideoTracks()[0];
return {
@@ -39,8 +58,8 @@ export function fromCamera(constraints) {
return {
viewport,
canvas: {
width: constraints.width, // AR
height: constraints.height, // AR
width: viewport.width, // AR
height: viewport.height, // AR
},
};
},
@@ -65,7 +84,7 @@ export function fromCamera(constraints) {
constraints.height.ideal = Math.floor(constraints.height.ideal * constraints.zoom.exact);
delete constraints.zoom;
}
return CameraAccess.request(videoConstraints, video);
return CameraAccess.request(video, videoConstraints);
},
getLabel: function() {
return track.label;
src/input/camera_access.js
+2 -2
View File
@@ -10,7 +10,7 @@ var streamRef;
function waitForVideo(video, stream) {
return new Promise((resolve, reject) => {
let attempts = 10;
let attempts = 20;
function checkVideo() {
if (attempts > 0) {
@@ -20,7 +20,7 @@ function waitForVideo(video, stream) {
}
resolve(stream);
} else {
window.setTimeout(checkVideo, 500);
window.setTimeout(checkVideo, 200);
}
} else {
reject('Unable to play video stream. Is webcam working?');
src/quagga.js
+26 -3
View File
@@ -5,13 +5,14 @@ import ImageDebug from './common/image_debug';
import ResultCollector from './analytics/result_collector';
import Config from './config/config';
import {merge} from 'lodash';
import {createConfigForImage} from './input/config_factory';
import CameraAccess from './input/camera_access';
import * as PixelCapture from './input/PixelCapture';
import * as Source from './input/Source';
function fromConfig(pixelCapturer, config) {
const scanner = createScanner(pixelCapturer);
const source = pixelCapturer.getSource();
let currentConfig = config;
let pendingStart = null;
let initialized = false;
return {
@@ -35,7 +36,7 @@ function fromConfig(pixelCapturer, config) {
return Promise.resolve(true);
}
pendingStart = new Promise((resolve, reject) => {
scanner.init(config, (error) => {
scanner.init(currentConfig, (error) => {
if (error) {
console.log(error);
reject(error);
@@ -80,7 +81,7 @@ function fromConfig(pixelCapturer, config) {
};
} else {
return new Promise((resolve, reject) => {
scanner.decodeSingle(config, (result) => {
scanner.decodeSingle(currentConfig, (result) => {
if (result && result.codeResult && result.codeResult.code) {
return resolve(result);
}
@@ -95,6 +96,21 @@ function fromConfig(pixelCapturer, config) {
getCanvas() {
return pixelCapturer.getCanvas();
},
applyConfig(newConfig) {
// during runtime?
// running scanners must know that!
// apply constraints to source, only if changed
const normalizedConfig = merge({}, Config, newConfig);
this.stop();
currentConfig = normalizedConfig;
return source.applyConstraints(currentConfig.constraints)
.then(() => this.start());
},
getSource() {
return pixelCapturer.getSource();
}
};
}
@@ -116,6 +132,12 @@ function createApi() {
.fromImage(image, config.constraints)
.then(fromSource.bind(null, config));
},
fromCamera(options) {
const config = merge({}, Config, options);
return Source
.fromCamera(config.constraints)
.then(fromSource.bind(null, config));
},
fromSource(src, inputConfig) {
return fromSource(configuration, src, inputConfig);
},
@@ -134,6 +156,7 @@ function createApi() {
config(conf) {
return createApi(merge({}, configuration, conf));
},
CameraAccess,
ImageWrapper,
ImageDebug,
ResultCollector,
src/scanner.js
+12 -8
View File
@@ -209,10 +209,11 @@ function createScanner(pixelCapturer) {
} else {
//_framegrabber.attachData(_inputImageWrapper.data);
}
pixelCapturer.grabFrameData()
return pixelCapturer.grabFrameData()
.then((bitmap) => {
_inputImageWrapper.data = bitmap.data;
if (bitmap) {
_inputImageWrapper.data = bitmap.data;
if (availableWorker) {
availableWorker.busy = true;
availableWorker.worker.postMessage({
@@ -226,15 +227,15 @@ function createScanner(pixelCapturer) {
})
.catch(err => {
console.error(err);
})
} else {
locateAndDecode();
});
}
return locateAndDecode();
}
function startContinuousUpdate() {
var next = null,
delay = 1000 / (_config.frequency === 0 ? 60 : (_config.frequency || 60));
delay = 1000 / (_config.frequency === 0 ? 10 : (_config.frequency || 10));
_stopped = false;
(function frame(timestamp) {
@@ -242,9 +243,12 @@ function createScanner(pixelCapturer) {
if (!_stopped) {
if (timestamp >= next) {
next += delay;
update();
}
update().then(() => {
window.requestAnimFrame(frame);
});
} else {
window.requestAnimFrame(frame);
}
}
}(performance.now()));
}