8

我正在使用quaggaJS（https://github.com/serratus/quaggaJS）读取 Web 应用程序中的条形码。它工作得很好，这是我的初始化代码：

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

这里是onDetected事件的处理：

Quagga.onDetected(function (data) {
    Quagga.stop();  // <-- I want to "pause"
    // dialog to ask the user to accept or reject
});

这意味着什么？当它识别出条形码时，我需要询问用户是否要接受或拒绝解码值 - 因此重复该过程。

留下捕获的图像会很好，这样他就可以真正看到他刚刚捕获的内容。

Quagga.stop()在大多数情况下都有效，但它不可靠，因为有时画布会变黑。我想这是由于该stop()方法的行为：

解码器不再处理任何图像。此外，如果在初始化时请求了摄像头流，则此操作也会断开摄像头的连接。

出于这个原因，我正在寻找一种暂停解码的方法，因此最后一帧仍然存在并且相机尚未断开连接。

任何建议如何实现这一目标？

4

2 回答 2

1

一个更好的方法是首先暂停视频，然后调用 Quagga.stop() 以便 Quagga 为您创建的视频元素将被暂停，并且您看不到涂黑的图像。此外，您还可以使用重新启动/重新扫描按钮来恢复或重新启动扫描过程。

要获取视图元素，您可以执行以下操作：

    Quagga.onDetected(function (result) {
        var cameraFeed = document.getElementById("cameraFeedContainer")
        cameraFeed.getElementsByTagName("video")[0].pause();
        return;
    });
于 2020-05-11T10:09:46.110 回答
0

您可以通过Quagga.canvas.dom.image. 这样，您可以覆盖视频流。

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);
});
于 2020-01-24T12:29:46.067 回答