Я пытаюсь использовать библиотеку 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>
Камера экрана обнаружила штрих-код