Как читать штрихкоды с помощью браузера

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

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

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

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

JavaScript библиотеки

Легко интегрируются, но ломают производительность всего приложения из-за гигантских размеров. Умеют распознавать растровые изображения прямо в браузере, но делают это очень нестабильно, процент верных распознаваний в некоторых библиотеках составляет лишь 20%. Зато есть большой плюс - большинство таких библиотек бесплатны, а платные версии дешевле альтернативных вариантов распонавания. Так что для небольшого количества считываний это может оказаться рабочим вариантом.

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

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

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

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

Shape Detection API

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

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

Подробнее о том, как работают перечисленные способы, можно прочитать здесь. А если у вас есть опыт интеграции распознавания кодов в веб-приложения, расскажите о нём в комментариях!