最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - quaggaJS: how to "pause" the decoder - Stack Overflow

programmeradmin2浏览0评论

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?

Share Improve this question edited Apr 18, 2017 at 16:14 Mark asked Apr 18, 2017 at 15:23 MarkMark 5,15210 gold badges72 silver badges151 bronze badges
Add a ment  | 

4 Answers 4

Reset to default 1

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);
});
发布评论

评论列表(0)

  1. 暂无评论