I'm using quaggaJS () to read barcodes in a web application. It works very well, and this is my initialization code:

Quagga.init({
    inputStream: {
        name: "Live",
        type: "LiveStream",
        constraints: {
            width: 1280,
            height: 720,
            facingMode: "environment"
        }
    },
    decoder: {
        readers: ["code_39_reader"],
        debug: {
            drawBoundingBox: true,
            showFrequency: false,
            drawScanline: true,
            showPattern: true
        },
        multiple: false
    },
    locator: {
        halfSample: true,
        patchSize: "medium"
    }
}, function (err) {
    if (err) {
        alert(err);
        return;
    }
    Quagga.registerResultCollector(resultCollector);
    Quagga.start();
});

here the handling of the onDetected event:

Quagga.onDetected(function (data) {
    Quagga.stop();  // <-- I want to "pause"
    // dialog to ask the user to accept or reject
});

What does that mean? When it recognize a barcode I need to ask the user if he wants to accept or reject the decoded value - and therefore repeat the process.

It would be nice to leave the captured image so he can actually see what he just captured.

Quagga.stop() works in most cases but it's not reliable because sometimes the canvas will turn black. I guess this is due the behavior of the stop() method:

the decoder does not process any more images. Additionally, if a camera-stream was requested upon initialization, this operation also disconnects the camera.

For this reason I'm looking for a way to pause the decoding, so the last frame is still there and the camera has not disconnected yet.

Any suggestion how to achieve this?

I'm using quaggaJS (https://github./serratus/quaggaJS) to read barcodes in a web application. It works very well, and this is my initialization code:

Quagga.init({
    inputStream: {
        name: "Live",
        type: "LiveStream",
        constraints: {
            width: 1280,
            height: 720,
            facingMode: "environment"
        }
    },
    decoder: {
        readers: ["code_39_reader"],
        debug: {
            drawBoundingBox: true,
            showFrequency: false,
            drawScanline: true,
            showPattern: true
        },
        multiple: false
    },
    locator: {
        halfSample: true,
        patchSize: "medium"
    }
}, function (err) {
    if (err) {
        alert(err);
        return;
    }
    Quagga.registerResultCollector(resultCollector);
    Quagga.start();
});

here the handling of the onDetected event:

Quagga.onDetected(function (data) {
    Quagga.stop();  // <-- I want to "pause"
    // dialog to ask the user to accept or reject
});

What does that mean? When it recognize a barcode I need to ask the user if he wants to accept or reject the decoded value - and therefore repeat the process.

It would be nice to leave the captured image so he can actually see what he just captured.

Quagga.stop() works in most cases but it's not reliable because sometimes the canvas will turn black. I guess this is due the behavior of the stop() method:

the decoder does not process any more images. Additionally, if a camera-stream was requested upon initialization, this operation also disconnects the camera.

For this reason I'm looking for a way to pause the decoding, so the last frame is still there and the camera has not disconnected yet.

Any suggestion how to achieve this?

• javascript
• quaggajs

4 Answers 4

A better way to do it would be to first pause the video and then call Quagga.stop() so that the video element that Quagga creates for you will be paused and you don't see the blacked out image. Additionally, you can also have a restart/re-scan button to resume or rather restart the scanning process.

To get the view element you can do something like below:

    Quagga.onDetected(function (result) {
        var cameraFeed = document.getElementById("cameraFeedContainer")
        cameraFeed.getElementsByTagName("video")[0].pause();
        return;
    });

The best way that I found, which I think is what you want, is by using Quagga.stop() and Quagga.pause()

From what I read in the documentation, the stop() method should already close the camera. I think it's a bug that sometimes it only stops the decoder but doesn't close the camera, that's why I also call the pause() method.

Hope this helps :)

You need to call the events Quagga.offProcessed(); Quagga.offDetected();

Example:

Quagga.onDetected(function (data) {
    Quagga.offProcessed();
    Quagga.offDetected();
    Quagga.stop();  // <-- I want to "pause"
    // dialog to ask the user to accept or reject
});

to be able to stop Quagga

to restart the scan just call Quagga.init again!

You can get the image frame via Quagga.canvas.dom.image. With that, you can overlay the videostream.

HTML

<div class="scanArea">
    <div id="interactive" class="viewport"></div>
    <div class="scanArea__freezedFrame"></div>
</div>

CSS

.scanArea {
    position: relative;
}
.scanArea__freezedFrame {
    position: absolute;
    left: 0;
    top: 0;
}

JavaScript

Quagga.onDetected(function(result) {
    var canvas = Quagga.canvas.dom.image;
    var $img = $('<img/>');
    $img.attr("src", canvas.toDataURL());
    $('.scanArea__freezedFrame').html($img);
});