Как создать живой сканер штрих-кода с помощью веб-камеры на JavaScript

Штрих-код — это машиночитаемый код в виде чисел или узоров из параллельных линий различной ширины. Они используются для идентификации продукта. Системы штрих-кодов помогают предприятиям и организациям отслеживать продукты и цены для централизованного управления в системе компьютерного программного обеспечения, что обеспечивает невероятное повышение производительности и эффективности. С давних времен супермаркеты, гипермаркеты и другие универмаги используют сканеры штрих-кода, встроенные в сложные устройства или системы, и позволяют продавцу легко сканировать продукт. Однако такие системы, как правило, сложны и ничем не дешевы.

Если вы веб-разработчик, работающий с (или, возможно, с большой) компанией, которая по какой-то причине либо продает что-то, либо просто потому, что некоторую информацию о документах, сгенерированных вашей системой, можно легко получить с помощью такого инструмента, то Вы можете реализовать эту функцию в своем приложении и предложить ее своим клиентам. Они наверняка будут счастливы, если будут знать, что им не нужно покупать дополнительное устройство для сканирования кода, а только с помощью веб-камеры и в то же время достичь того же качества.

В этой статье мы покажем вам, как создать живой сканер штрих-кода с помощью JavaScript, используя потрясающую библиотеку QuaggaJS в вашем веб-приложении.

Что такое QuaggaJS

QuaggaJS — это сканер штрих-кода, полностью написанный на JavaScript, поддерживающий локализацию и декодирование в реальном времени различных типов штрих-кодов, таких как EAN, CODE 128, CODE 39, EAN 8, UPC-A, UPC-C, I2of5 и CODABAR. Библиотека также может использовать getUserMedia получить прямой доступ к потоку с камеры пользователя. Хотя код опирается на интенсивную обработку изображений, даже последние смартфоны способны обнаруживать и декодировать штрих-коды в режиме реального времени. QuaggaJS является модифицированной версией ZXing библиотека, которая делает процесс сканирования штрих-кодов для вашего пользователя простым. Проще говоря, этот считыватель инвариантен для масштабирования и поворота, тогда как другие библиотеки требуют, чтобы штрих-код был выровнен с окном просмотра. Это еще не один порт великого ZXing библиотека, но больше расширения к нему. В этой реализации реализован локатор штрих-кода, который способен находить изображение в виде штрих-кода на изображении, в результате чего получается оценочная ограничивающая рамка, включая поворот.

Quagga использует многие современные Web-API, которые еще не реализованы во всех браузерах. Существует два режима работы Quagga:

1. анализ статических изображений (через Blobs).
2. использование камеры для декодирования изображений из прямой трансляции (требуется наличие API MediaDevices).

Правильно, вы можете использовать quaggaJS напрямую с изображениями.

Монтаж

Если вы используете менеджеры пакетов, вы можете легко установить Quagga в свой проект, используя NPM:

npm install quagga

Или с беседкой:

bower install quagga

Кроме того, вы можете просто скачать и включить quagga.min.js в вашем проекте, и вы готовы к работе. Сценарий предоставляет библиотеку в глобальном пространстве имен Quagga:

Или, если вы используете его из ES6 с React, Angular и т. Д., Вы можете импортировать его:

import Quagga from 'quagga'; // ES6
const Quagga = require('quagga').default; // Common JS (important: default)

Для получения дополнительной информации об этой библиотеке, мы рекомендуем вам посетите официальный репозиторий на Github здесь.

использование

Как упоминалось ранее, Quagga работает двумя способами: с помощью живого сканера с веб-камерой или обработки статического изображения:

Живой сканер

Чтобы иметь возможность динамического сканирования с помощью веб-камеры, вам необходим браузер, который поддерживает navigator.getUserMedia, Начните с инициализации Quagg и настройте режим LiveStream. После настройки по умолчанию используйте Quagga.start метод, чтобы начать видео поток и начать поиск и декодирование изображений. Вам необходимо установить тип штрих-кодов, которые вы хотите обрабатывать через считыватели свойств в опции декодера:

Quagga.init({
inputStream : {
name : "Live",
type : "LiveStream",
// Or '#yourElement' (optional)
target: document.querySelector('#yourElement')
},
decoder : {
readers : ["code_128_reader"]
}
}, function(err) {
if (err) {
console.log(err);
return
}
console.log("Initialization finished. Ready to start");
Quagga.start();
});

В конце статьи вы можете увидеть полный пример живого сканера, включая функцию отслеживания.

Статическое изображение

Если вы хотите обрабатывать изображения из файлов (либо изображение, загруженное на сервер пользователем или непосредственно в браузере), вы можете сделать это с помощью Quagga. Единственное, что вам нужно сделать, это установить опцию locate в true и укажите путь к изображению (или представление изображения base64 для изображения):

Quagga.decodeSingle({
decoder: {
readers: ["code_128_reader"] // List of active readers
},
locate: true, // try to locate the barcode in the image
// You can set the path to the image in your server
// or using it's base64 data URI representation data:image/jpg;base64, + data
src: '/barcode_image.jpg'
}, function(result){
if(result.codeResult) {
console.log("result", result.codeResult.code);
} else {
console.log("not detected");
}
});

Хотя мы суммировали обе функции в их наиболее простом выражении, стоит прочитать документацию, чтобы проверить наличие более интересных функций, которые вы можете реализовать.

пример

В следующем документе показана очень простая реализация, которая отображает сканер на scanner-container Div и будет отслеживать сканер штрих-кода на нем. После обработки действительного штрих-кода он отобразит свой результат в консоли (на обнаруженном холсте):

/* In order to place the tracking correctly */
canvas.drawing, canvas.drawingBuffer {
position: absolute;
left: 0;
top: 0;
}
var _scannerIsRunning = false;
function startScanner() {
Quagga.init({
inputStream: {
name: "Live",
type: "LiveStream",
target: document.querySelector('#scanner-container'),
constraints: {
width: 480,
height: 320,
facingMode: "environment"
},
},
decoder: {
readers: [
"code_128_reader",
"ean_reader",
"ean_8_reader",
"code_39_reader",
"code_39_vin_reader",
"codabar_reader",
"upc_reader",
"upc_e_reader",
"i2of5_reader"
],
debug: {
showCanvas: true,
showPatches: true,
showFoundPatches: true,
showSkeleton: true,
showLabels: true,
showPatchLabels: true,
showRemainingPatchLabels: true,
boxFromPatches: {
showTransformed: true,
showTransformedBox: true,
showBB: true
}
}
},
}, function (err) {
if (err) {
console.log(err);
return
}
console.log("Initialization finished. Ready to start");
Quagga.start();
// Set flag to is running
_scannerIsRunning = true;
});
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 });
}
}
});
Quagga.onDetected(function (result) {
console.log("Barcode detected and processed : [" + result.codeResult.code + "]", result);
});
}
// Start/stop scanner
document.getElementById("btn").addEventListener("click", function () {
if (_scannerIsRunning) {
Quagga.stop();
} else {
startScanner();
}
}, false);