使用 QuaggaJS 停止后如何启动相机答案

【问题标题】：How to start camera after stopping with QuaggaJS使用 QuaggaJS 停止后如何启动相机
【发布时间】：2021-01-31 05:02:00
【问题描述】：

我可以使用 QuaggaJS 扫描条形码。但是，一旦检测到条形码，我就使用Quagga.stop(); 停止它，然后继续我的功能。如果我的函数返回 false，那么我必须再次启动相机，并且我正在使用 Quagga.start()，但它无法正常工作。给我留下了错误信息

typeerror 无法读取未定义的属性“数据”

如果我重新初始化该功能，那么它可以工作，但是移动浏览器 flickr 3-4 秒然后就稳定了。

这是我的代码

$(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);
  });
}

【问题讨论】：

嗨@Rahul，我确实有同样的问题。你找到解决办法了吗？
不。为了解决这个问题，根据他们的文档，我不得不调用初始化相机并启动它的函数。
感谢您的回答@Rahul，我最终得出了相同的结论。

标签： javascript jquery barcode-scanner quaggajs

【解决方案1】：

您只需要在 Quagga.stop

之后使用所需的参数调用 Quagga.init

例如，在您的情况下，您应该调用：

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

【讨论】：