How to start camera after stopping with QuaggaJS

Question

I am able to scan the barcode using QuaggaJS. However, as soon as barcode detected i stopped it using Quagga.stop(); and then proceed my functionality. If my function returns false then i have to start the camera again and I am using Quagga.start() and it is not working. left me with error message

typeerror cannot read property 'data' of undefined

if I reinitialize the function then it worked but then mobile browser flickr for 3-4 seconds and then get stable.

here is my code

$(document).ready(function(){
    if($(".scanner-box").length > 0){
        if (_scannerIsRunning) {
            Quagga.stop();
        } else {
            startScanner();
        }
    }
}

var _scannerIsRunning = false;
function startScanner() {
Quagga.init({
        inputStream: {
                name: "Live",
                type: "LiveStream",
                target: document.querySelector('#scanner-container'),
                constraints: {
                        width: "100%",
                        height: "100%",
                        facingMode: "environment"
                },
        },
        decoder: {
                readers: [
                        "ean_reader",
                        "ean_8_reader"
                ],
                debug: {
                        showCanvas: true,
                        showPatches: true,
                        showFoundPatches: true,
                        showSkeleton: true,
                        showLabels: true,
                        showPatchLabels: true,
                        showRemainingPatchLabels: true,
                        boxFromPatches: {
                                showTransformed: true,
                                showTransformedBox: true,
                                showBB: true
                        }
                }
        },
},
function (err) {
        if (err) {
                $("#error").text(err);
                return
        }
        console.log("Initialization finished. Ready to start");
        Quagga.start();
        _scannerIsRunning = true;
});
Quagga.onProcessed(function (result) {
        var drawingCtx = Quagga.canvas.ctx.overlay,
        drawingCanvas = Quagga.canvas.dom.overlay;

        if (result) {
                if (result.boxes) {
                        drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.getAttribute("height")));
                        result.boxes.filter(function (box) {
                                return box !== result.box;
                        }).forEach(function (box) {
                                Quagga.ImageDebug.drawPath(box, { x: 0, y: 1 }, drawingCtx, { color: "green", lineWidth: 2 });
                        });
                }
                if (result.box) {
                        Quagga.ImageDebug.drawPath(result.box, { x: 0, y: 1 }, drawingCtx, { color: "#00F", lineWidth: 2 });
                }
                if (result.codeResult && result.codeResult.code) {
                        Quagga.ImageDebug.drawPath(result.line, { x: 'x', y: 'y' }, drawingCtx, { color: 'red', lineWidth: 3 });
                }
        }
});
Quagga.onDetected(function (result) {
        var barcodeResult = $("#result").text(result.codeResult.code);
        var barcode     = result.codeResult.code;
        if(barcode.toString().length < '13'){
                
        }else{
                if (_scannerIsRunning) {
                        Quagga.stop();
                }
                var checkCode = checkBarCode(barcode,canvasRatio,canvasHeight);
                if(!checkCode){
                      Quagga.start();
                      //startScanner(); //other option
                }   
        }
        console.log("Barcode detected and processed : [" + result.codeResult.code + "]", result);
  });
}

Answer 1

You just need to call Quagga.init with your desired parameters after Quagga.stop

For example in your case you should call:

Quagga.init({
        inputStream: {
                name: "Live",
                type: "LiveStream",
                target: document.querySelector('#scanner-container'),
                constraints: {
                        width: "100%",
                        height: "100%",
                        facingMode: "environment"
                },
        },
        decoder: {
                readers: [
                        "ean_reader",
                        "ean_8_reader"
                ],
                debug: {
                        showCanvas: true,
                        showPatches: true,
                        showFoundPatches: true,
                        showSkeleton: true,
                        showLabels: true,
                        showPatchLabels: true,
                        showRemainingPatchLabels: true,
                        boxFromPatches: {
                                showTransformed: true,
                                showTransformedBox: true,
                                showBB: true
                        }
                }
        },
},
function (err) {
        if (err) {
                $("#error").text(err);
                return
        }
        console.log("Initialization finished. Ready to start");
        Quagga.start();
        _scannerIsRunning = true;
});