javascript - QuaggaJs:条码扫描仪的浏览器兼容性问题

Question

我正在使用 QuaggaJs 扫描条形码。对于桌面版扫描仪，一切都很好，很流畅。但是当进入移动版本的网站时它就坏了，而且主要是在 iPhone 上。

我在 safari 和 Chrome 中都进行了测试，对于不同的手机，它的行为不同。对于一些手机摄像头挂起，对于一些摄像头根本没有启动。

此外， Canvas 大小未在父 div 中设置。相机在 DOM 之外。

这是我做的。

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;
}

这个 css 就像示例表单 https://serratus.github.io/quaggaJS/v1.0.0-beta.1/examples/file_input/

它使绘制窗口的 Canvas 区域覆盖相机 Steam 区域。