Различные выбранные места для кода в Quagga angular 2+ - PullRequest
0 голосов
/ 18 июня 2020

Я пытаюсь использовать библиотеку Quagga для чтения кода ean в моем приложении Angular 2+. Реализован источник правильного обнаружения и чтения штрих-кода, но, на мой взгляд, я вижу 2 поля. Первый отображает поток камеры, второй - белое пространство и границу, если камера обнаруживает штрих-код. Не могли бы вы помочь мне решить эту проблему? Моя реализация:

         inputStream: {
         locate: true,
        type : "LiveStream",
        constraints: {
            width: {min: 640},
            height: {min: 480},
            facingMode: "environment",
            aspectRatio: {min: 1, max: 2}
        }
        },
        locator: {
            patchSize: "medium",
            halfSample: true
        },
        numOfWorkers: 2,
        frequency: 10,
        decoder: {
            readers: ['ean_reader']
        }
    };
    startScanner() {
        this.barcode = '';
        if(!this.ref['destroyed']){
            this.ref.detectChanges();
          }
          this.detect();

        Quagga.onDetected((result) => this.logCode(result));

        Quagga.init(this.configQuagga, (err) => {
            if (err) {
                return console.log(err);
            }
            Quagga.start();
        });
    }`

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

HTML: <div id="interactive" class="viewport"></div>

Камера экрана обнаружила штрих-код

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...