quaggaJS: как "приостановить" декодер

Question

Я использую quaggaJS ( https://github.com/serratus/quaggaJS) для чтения штрих-кодов в веб-приложении. Это работает очень хорошо, и это мой код инициализации:

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() метод:

декодер больше не обрабатывает изображения. Кроме того, если при инициализации был запрошен поток с камеры, эта операция также отключает камеру.

По этой причине я ищу способ приостановить декодирование, поэтому последний кадр все еще там, а камера еще не отключена.

Любое предложение, как этого добиться?

Answer 1

Лучшим способом сделать это было бы сначала приостановить видео, а затем вызвать Quagga.stop(), чтобы видеоэлемент, который Quagga создает для вас, был приостановлен, и вы не видели затемненного изображения. Кроме того, у вас также может быть кнопка перезапуска / повторного сканирования, чтобы возобновить или, скорее, перезапустить процесс сканирования.

Чтобы получить элемент просмотра, вы можете сделать что-то вроде ниже:

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

Answer 2

Лучший способ, который я нашел и который, я думаю, вам нужен, - это использоватьQuagga.stop()иQuagga.pause()

Судя по тому, что я прочитал в документации, метод stop() уже должен закрывать камеру. Я думаю, это баг, что иногда он только останавливает декодер, но не закрывает камеру, поэтому я также вызываю метод паузы().

Надеюсь это поможет :)

Answer 3

Вам нужно вызвать события Quagga.offProcessed(); Квагга.offDetected();

Пример:

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

чтобы иметь возможность остановить Кваггу

чтобы перезапустить сканирование, просто вызовите Quagga.init еще раз!

Answer 4

Вы можете получить рамку изображения через 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);
});