Главная/ Блог/ Barcode detection

Учим веб-приложения читать QR и штрихкоды

May 2022

Штрихкоды и QR-коды есть почти везде. Мы покупаем товары, оплачиваем счета и даже покупки с их помощью. Поэтому нашим клиентам всё чаще требуются решения для их распознавания. На одном из наших проектов в 2020 году мы столкнулись с необходимостью добавить в веб-приложение сканирование штрих-кодов для учёта продукции. Для Loreal Academy мы проверили все доступные решения для чтения баркодов с экранов и ниже расскажем об их плюсах и минусах.

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

Чаще всего любой корпоративный софт или CRM — это веб-приложение, поэтому для B2B требуются браузерные решения. Научить веб-приложение читать штрихкоды ещё пару лет назад было очень сложной задачей, поскольку получить доступ к вычислительным мощностям через браузер нельзя. Чаще всего бизнес выбирал для этих целей отдельные устройства, которые хорошо с этим справлялись, но стоили довольно дорого. Позже на помощь пришли смартфоны, но для них требовалось отдельное приложение, которое нужно синхронизировать с основной системой. А ещё есть платные сервисы и огромные библиотеки, о них и других SDK для декодирования штрихкодов расскажем ниже.

JavaScript библиотеки для распознавания изображений

Как это работает? Обычно это бесплатные библиотеки, которые легко интегрируются в веб-приложения, но плохо работают. Они пытаются распознать растровые изображения с камеры прямо в браузере, но справляются с этой задачей очень нестабильно. Например, одна из популярных библиотек по нашим тестам делала лишь одно верное распознавание из пяти. Также огромным минусом такого бесплатного ПО для считывания штрих-кодов является гигантский размер, из-за чего страдает производительность всего приложения.

Плюсы: лёгкая интеграция, низкая стоимость — чаще всего они бесплатны.

Минусы: крайне низкий процент верных распознаваний.

Платные сервисы

Как это работает? Вы делегируете распознавание стороннему сервису, который за деньги обрабатывает ваши изображения на своих серверах за плату. В приложение просто добавляется внешний API, похожий на платёжные шлюзы. Главное вовремя оплачивать эту услугу. Тарифы бывают разными: по количеству сканирований, по времени, есть даже поштучные предложения. Но такое ПО для сканирования штрихкодов обычно довольно дорогое. 

Плюсы: простая интеграция, высокая производительность.

Минусы: высокая стоимость, необходимость отслеживать своевременную оплату сервиса. 

Отдельное приложение

Как это работает? Можно создать приложение для считывания штрих кода на React Native, которое будет передавать сведения в основную систему. В этом случае распознавание работает стабильно, но появляется шов. Пользователю приходится выходить из основного приложения, переключаться на приложение для распознавания, и вообще брать мобильное устройство. Также может потребоваться авторизация. Это снижает скорость работы. Можно, конечно, сделать полноценную мобильную версию основного веб-приложения, но это долго, дорого, и требует дальнейшей поддержки. Как и маленькое приложение, которое возьмет на себя лишь функцию чтения кодов. 

Плюсы: высокий процент распознавания, гибкость, огромные возможности кастомизации.

Минусы: время разработки, необходимость дальнейшей поддержки, стоимость. 

Shape Detection API

Как это работает? Это API, разработанный Mozilla, который позволяет получить доступ к вычислительным ресурсам компьютера через браузер. В целом инструмент можно использовать для распознавания любых изображений и даже лиц, для штрихкодов есть отдельный Barcode Detection API, сделанный на той же платформе. На данный момент доступен на всех браузерах на основе Chromium. 

Распространяется бесплатно и отлично справляется с распознаванием даже смазанных изображений. Наш проект для Loreal Academy стал одним из первых, в котором использовалась эта возможность. В продакшн он вышел через неделю после релиза API. До этого мы протестировали бета-версию, и оказалось, что это самый простой и удобный вариант.

Плюсы: бесплатный, высокий процент распознавания.

Минусы: поддерживается не всеми браузерами. Совместимость можно проверить здесь

Вывод

Появление Shape Detection API перевернуло рынок браузерных решений для считывания штрихкодов. Они конкурируют и с платными сервисами, и с бесплатными решениями за счёт лёгкой интеграции и высокого процента верных распознаваний. Плюс, с ростом популярности алгоритм постоянно совершенствуется. Возможно, вскоре на рынке появятся подобные решения от других компаний, которые смогут предложить больше возможностей или форматов кодов. 

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

 

Удивительно, что довольно долгое время штрихкоды были головной болью для разработчиков веб-приложений. Вероятно, на развитие инструментов для их распознавания повлияла пандемия и взрывная популярность сервисов доставки. Здорово, что мы смогли одними из первых протестировать и внедрить новый API в проект для нашего клиента
Дмитрий Карпунин
Head of Frontend Evrone
Будем на связи
Прикрепить файл
Максимальный размер файла: 8 МБ.
Допустимые типы файлов: jpg jpeg png txt rtf pdf doc docx ppt pptx.