QuaggaJs: Browser compatibility issue for barcode scanner

Question

I am using QuaggaJs to scan the barcode. Everything is good and smooth for desktop version of scanner. But it gets broken when coming to mobile version of website and that too mainly on iPhone.

I tested in both safari and Chrome and for different phone it behaves differently. For some phone camera gets hang and for some camera didn't start at all.

Also, the canvas size is not setting up in the parent div. camera is getting outside the DOM.

Here is what I did.

HTML

<div class="scanner-box">
    <div id="scanner-container" class="main_scanner"></div>
</div>

JS

$(document).ready(function(){
    if($(".scanner-box").length > 0){
        var canvas_width        = $(".scanner-box").width();
        var canvas_height       = $(".scanner-box").height();
        if (_scannerIsRunning) {
            Quagga.stop();
        } else {
            startScanner(canvas_width,canvas_height);
        }
    }
}

var _scannerIsRunning = false;
function startScanner(canvasRatio,canvasHeight) {
    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{
                    checkBarCode(barcode,canvasRatio,canvasHeight);
                    if (_scannerIsRunning) {
                            Quagga.stop();
                    }
            }
            console.log("Barcode detected and processed : [" + result.codeResult.code + "]", result);
    });
}

CSS

.scanner-box{width:480px;height:320px;background-color:#9a9a9a;position:relative;margin-top:10px;}
#scanner-container{position:relative;height:inherit;}

Answer 1

#scanner-container canvas{
    position: absolute;
    left : 0px;
    top: 0px;
}

this css is just like the sample form https://serratus.github.io/quaggaJS/v1.0.0-beta.1/examples/file_input/

it makes the canvas area which draws windows cover the camera steam area .