javascript quaggaJS:如何“暂停”解码器

axkjgtzd  于 2023-08-02  发布在  Java
关注(0)|答案(3)|浏览(148)

我正在使用quaggaJShttps://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()方法的行为:
解码器不再处理任何图像。此外,如果在初始化时请求了摄像机流,则此操作也会断开摄像机的连接。
出于这个原因,我正在寻找一种方法来 * 暂停 * 解码,所以最后一帧仍然存在,相机还没有断开连接。
有什么建议可以实现这一点吗?

yzuktlbb

yzuktlbb1#

更好的方法是先暂停视频,然后调用Quagga.stop(),这样Quagga为您创建的视频元素将被暂停,您不会看到涂黑的图像。此外,您还可以使用重新启动/重新扫描按钮来恢复或重新启动扫描过程。
要获取视图元素,您可以执行以下操作:

Quagga.onDetected(function (result) {
        var cameraFeed = document.getElementById("cameraFeedContainer")
        cameraFeed.getElementsByTagName("video")[0].pause();
        return;
    });

字符串

pvcm50d1

pvcm50d12#

我发现的最佳方法(我认为这也是您想要的)是使用Quagga.stop()Quagga.pause()
从我在文档中读到的内容来看,stop()方法应该已经关闭了相机。我认为这是一个错误,有时它只停止解码器,但不关闭相机,这就是为什么我也调用pause()方法。
希望这对你有帮助:)

e4yzc0pl

e4yzc0pl3#

您可以通过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);
});

相关问题