[enhancement] Using web workers for barcode decoding about quaggajs

[serratus]

Web workers would indeed make a lot of sense in this context. The main problem to solve when using web workers is how to pass the image-data into the worker. Sure, there is the option to use Transferables, but then I lose access to the already allocated memory and have to re-allocate the buffer for every new frame. And copying the entire buffer to the web worker context does only waste resources. Do you have experience in working with web workers? Do you know how to solve this problem in a memory- and CPU efficient way?

[pushplay]

Worker.postMessage works in both directions, including the list of Transferables. So you can get your buffer back. It doesn't make sense to even try to process frames while the web worker is going so just ignore those frames until the web worker returns.

[SunboX]

I would do something like this:

var video = document.querySelector('#video'),
    canvas = document.createElement('canvas');

navigator.getMedia(
    {
        video: true,
        audio: false
    },
    function(stream) {

        if (navigator.mozGetUserMedia) {

            video.mozSrcObject = stream;

        } else {

            var vendorURL = window.URL || window.webkitURL;
            video.src = vendorURL ? vendorURL.createObjectURL(stream) : stream;

        }

        video.play();

        decodeBarcode();
    },
    function(err) {
        console.log('An error occured! ' + err);
    }
);

var workerCount = 0,
    ctx = canvas.getContext('2d')

function decodeBarcode() {
    if (workerCount === 0) {
        if (decodeWorker === null) {
            decodeWorker = new Worker('decoder.js');
            decodeWorker.onmessage = receiveMessage;
        }
        workerCount++;

        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

        decodeWorker.postMessage({
            imageData: ctx.getImageData(0, 0, canvas.width, canvas.height).data,
            width: canvas.width,
            height: canvas.height
        });
    }
}

function receiveMessage(e) {

    workerCount--;

    if (e.data.success === true) {

        alert(e.data.result);
    }

    decodeBarcode();
}

[serratus]

Finally, after multiple iterations of different approaches, I managed to find a good solution which works for most use-cases. If you are interested, take a look at the issue-1a branch. Feedback is greatly appreciated.

[serratus]

This issue should be solved with #12