fixed web-workers

feature/image-source
Christoph Oberhofer 8 years ago
parent eb858d0c63
commit 4a56fff2cb

@ -3,11 +3,11 @@ $(function() {
init : function() { init : function() {
this.overlay = document.querySelector('#interactive canvas.drawing'); this.overlay = document.querySelector('#interactive canvas.drawing');
this.state.inputStream.constraints.zoom = {exact: 2};
Quagga.fromCamera({ Quagga.fromCamera({
constraints: this.state.inputStream.constraints, constraints: this.state.inputStream.constraints,
locator: this.state.locator, locator: this.state.locator,
decoder: this.state.decoder, decoder: this.state.decoder,
numOfWorkers: this.state.numOfWorkers,
}).then(function(scanner) { }).then(function(scanner) {
this.scanner = scanner; this.scanner = scanner;
this.scanner this.scanner

@ -73,7 +73,7 @@ export function fromSource(source, {target = "#interactive.viewport"} = {}) {
} }
return { return {
grabFrameData: function grabFrameData() { grabFrameData: function grabFrameData({buffer, clipping}) {
const {viewport, canvas: canvasSize} = source.getDimensions(); const {viewport, canvas: canvasSize} = source.getDimensions();
const sx = viewport.x; const sx = viewport.x;
const sy = viewport.y; const sy = viewport.y;
@ -93,12 +93,12 @@ export function fromSource(source, {target = "#interactive.viewport"} = {}) {
ctx.drawImage(drawable, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); ctx.drawImage(drawable, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
} }
var imageData = ctx.getImageData(0, 0, $canvas.width, $canvas.height).data; var imageData = ctx.getImageData(0, 0, $canvas.width, $canvas.height).data;
var buffer = nextAvailableBuffer(); var imageBuffer = buffer ? buffer : nextAvailableBuffer();
computeGray(imageData, buffer); computeGray(imageData, imageBuffer);
return Promise.resolve({ return Promise.resolve({
width: $canvas.width, width: $canvas.width,
height: $canvas.height, height: $canvas.height,
data: buffer, data: imageBuffer,
}); });
}, },
getSource: function() { getSource: function() {
@ -107,5 +107,9 @@ export function fromSource(source, {target = "#interactive.viewport"} = {}) {
getCanvas: function() { getCanvas: function() {
return $canvas; return $canvas;
}, },
getCaptureSize() {
return source.getDimensions().canvas;
},
}; };
} }

@ -35,53 +35,43 @@ function createScanner(pixelCapturer) {
_config = {}, _config = {},
_events = createEventedElement(), _events = createEventedElement(),
_locator; _locator;
const source = pixelCapturer.getSource();
function initializeData(imageWrapper) {
initBuffers(imageWrapper);
_decoder = BarcodeDecoder.create(_config.decoder, _inputImageWrapper);
}
const source = pixelCapturer ? pixelCapturer.getSource() : {};
function setup() {
function canRecord(cb) {
// checkImageConstraints(_inputStream, _config.locator); // checkImageConstraints(_inputStream, _config.locator);
// initCanvas(); return adjustWorkerPool(_config.numOfWorkers)
// _framegrabber = FrameGrabber.create(_inputStream, _canvasContainer.dom.image); .then(() => {
adjustWorkerPool(_config.numOfWorkers, function() {
if (_config.numOfWorkers === 0) { if (_config.numOfWorkers === 0) {
initializeData(); initializeData();
} }
ready(cb);
}); });
} }
function ready(cb){ function initializeData(imageWrapper) {
// _inputStream.play(); initBuffers(imageWrapper);
cb(); _decoder = BarcodeDecoder.create(_config.decoder, _inputImageWrapper);
} }
function initBuffers(imageWrapper) { function initBuffers(imageWrapper) {
// if (imageWrapper) { if (imageWrapper) {
// _inputImageWrapper = imageWrapper; _inputImageWrapper = imageWrapper;
// } else { } else {
const {canvas} = source.getDimensions(); const captureSize = pixelCapturer.getCaptureSize();
_inputImageWrapper = new ImageWrapper({ _inputImageWrapper = new ImageWrapper({
x: canvas.width, x: captureSize.width,
y: canvas.height, y: captureSize.height,
}); });
// } }
// if (ENV.development) {
// if (ENV.development) { console.log(_inputImageWrapper.size);
// console.log(_inputImageWrapper.size); }
// } _boxSize = [
// _boxSize = [ vec2.clone([0, 0]),
// vec2.clone([0, 0]), vec2.clone([0, _inputImageWrapper.size.y]),
// vec2.clone([0, _inputImageWrapper.size.y]), vec2.clone([_inputImageWrapper.size.x, _inputImageWrapper.size.y]),
// vec2.clone([_inputImageWrapper.size.x, _inputImageWrapper.size.y]), vec2.clone([_inputImageWrapper.size.x, 0])
// vec2.clone([_inputImageWrapper.size.x, 0]) ];
// ];
_locator = createLocator(_inputImageWrapper, _config.locator); _locator = createLocator(_inputImageWrapper, _config.locator);
} }
@ -201,19 +191,14 @@ function createScanner(pixelCapturer) {
availableWorker = _workerPool.filter(function(workerThread) { availableWorker = _workerPool.filter(function(workerThread) {
return !workerThread.busy; return !workerThread.busy;
})[0]; })[0];
if (availableWorker) { if (!availableWorker) {
//_framegrabber.attachData(availableWorker.imageData); return Promise.resolve();
} else {
return; // all workers are busy
} }
} else {
//_framegrabber.attachData(_inputImageWrapper.data);
} }
const buffer = availableWorker ? availableWorker.imageData : _inputImageWrapper.data;
return pixelCapturer.grabFrameData() return pixelCapturer.grabFrameData({buffer})
.then((bitmap) => { .then((bitmap) => {
if (bitmap) { if (bitmap) {
_inputImageWrapper.data = bitmap.data;
if (availableWorker) { if (availableWorker) {
availableWorker.busy = true; availableWorker.busy = true;
availableWorker.worker.postMessage({ availableWorker.worker.postMessage({
@ -230,7 +215,7 @@ function createScanner(pixelCapturer) {
}); });
} }
return locateAndDecode(); return Promise.resolve(locateAndDecode());
} }
function startContinuousUpdate() { function startContinuousUpdate() {
@ -262,14 +247,14 @@ function createScanner(pixelCapturer) {
} }
function initWorker(cb) { function initWorker(cb) {
var blobURL, const captureSize = pixelCapturer.getCaptureSize();
workerThread = { const workerThread = {
worker: undefined, worker: undefined,
imageData: new Uint8Array(_inputStream.getWidth() * _inputStream.getHeight()), imageData: new Uint8Array(captureSize.width * captureSize.height),
busy: true busy: true
}; };
blobURL = generateWorkerBlob(); const blobURL = generateWorkerBlob();
workerThread.worker = new Worker(blobURL); workerThread.worker = new Worker(blobURL);
workerThread.worker.onmessage = function(e) { workerThread.worker.onmessage = function(e) {
@ -294,7 +279,7 @@ function createScanner(pixelCapturer) {
workerThread.worker.postMessage({ workerThread.worker.postMessage({
cmd: 'init', cmd: 'init',
size: {x: _inputStream.getWidth(), y: _inputStream.getHeight()}, size: {x: captureSize.width, y: captureSize.height},
imageData: workerThread.imageData, imageData: workerThread.imageData,
config: configForWorker(_config) config: configForWorker(_config)
}, [workerThread.imageData.buffer]); }, [workerThread.imageData.buffer]);
@ -375,10 +360,11 @@ function createScanner(pixelCapturer) {
} }
} }
function adjustWorkerPool(capacity, cb) { function adjustWorkerPool(capacity) {
return new Promise((resolve) => {
const increaseBy = capacity - _workerPool.length; const increaseBy = capacity - _workerPool.length;
if (increaseBy === 0) { if (increaseBy === 0) {
return cb && cb(); return resolve();
} }
if (increaseBy < 0) { if (increaseBy < 0) {
const workersToTerminate = _workerPool.slice(increaseBy); const workersToTerminate = _workerPool.slice(increaseBy);
@ -389,7 +375,7 @@ function createScanner(pixelCapturer) {
} }
}); });
_workerPool = _workerPool.slice(0, increaseBy); _workerPool = _workerPool.slice(0, increaseBy);
return cb && cb(); return resolve();
} else { } else {
for (var i = 0; i < increaseBy; i++) { for (var i = 0; i < increaseBy; i++) {
initWorker(workerInitialized); initWorker(workerInitialized);
@ -398,10 +384,11 @@ function createScanner(pixelCapturer) {
function workerInitialized(workerThread) { function workerInitialized(workerThread) {
_workerPool.push(workerThread); _workerPool.push(workerThread);
if (_workerPool.length >= capacity){ if (_workerPool.length >= capacity){
cb && cb(); resolve();
} }
} }
} }
});
} }
return { return {
@ -413,7 +400,7 @@ function createScanner(pixelCapturer) {
initializeData(imageWrapper); initializeData(imageWrapper);
return cb(); return cb();
} else { } else {
canRecord(cb); return setup().then(cb);
} }
}, },
start: function() { start: function() {

Loading…
Cancel
Save