Как читать штрихкоды с помощью браузера
Зачем вообще веб-приложениям читать штрихкоды?
Чаще всего любой корпоративный софт или CRM — это веб-приложение, поэтому для учёта товаров в e-commerce зачастую приходится переносить данные штрихкодов в систему. Проблема в том, что получить доступ к вычислительным ресурсам устройства через браузер долгое время было почти невозможно. А это необходимо для распознавания и обработки изображений.
Раньше бизнес выбирал для этих целей отдельные устройства, которые хорошо с этим справлялись, но стоили довольно дорого. Позже альтернативой называли смартфоны, но с ними тоже оказалось много нюансов.
Мы не раз делали веб-приложения для клиентов, которым требовалась функция распознавания QR или штрихкодов. Всего на рынке есть четыре основных способа интегрировать эту функцию. Ниже подробно расскажем о каждой из них.
JavaScript библиотеки
Легко интегрируются, но ломают производительность всего приложения из-за гигантских размеров. Умеют распознавать растровые изображения прямо в браузере, но делают это очень нестабильно, процент верных распознаваний в некоторых библиотеках составляет лишь 20%. Зато есть большой плюс — большинство таких библиотек бесплатны, а платные версии дешевле альтернативных вариантов распонавания. Так что для небольшого количества считываний это может оказаться рабочим вариантом.
Платные сервисы
Вы отдаёте распознавание на аутсорс. В свое приложение вы просто интегрируете API, оплачиваете услугу и забываете о проблеме. Изображения будут уходить на сторонние серверы, которые их обрабатывают, и возвращают вам распознанную информацию. Быстро, удобно, но очень дорого в перспективе. Ведь сервис придётся оплачивать регулярно, либо по периодам использования, либо по количеству распознаваний.
Отдельное приложение
Можно создать приложение на React Native, которое будет передавать сведения со смартфона в основную систему. В этом случае пользователю приходится выходить из основного приложения, переключаться на приложение для распознавания, и вообще брать мобильное устройство. Это снижает скорость работы. Можно, конечно, сделать полноценную мобильную версию основного веб-приложения, но это долго, дорого, и требует дальнейшей поддержки. Как и маленькое приложение, которое возьмет на себя лишь функцию чтения кодов.
Shape Detection API
Разработка Mozilla, которая даёт доступ к вычислительным ресурсам компьютера через браузер. В целом инструмент можно использовать для распознавания любых изображений и даже лиц, для штрихкодов есть отдельный Barcode Detection API, сделанный на той же платформе. Высокий процент распознавания и, главное, это абсолютно бесплатно. На данный момент доступен только в браузерах на основе Chromium, список читаемых форматов можно проверить здесь.
Интересно, что Evrone одними из первых проверили работу этого инструмента на реальном проекте для Loreal Academy. В продакшен наше веб-приложение вышло через неделю после релиза API, и стабильно распознаёт коды с его помощью по сей день.
Подробнее о том, как работают перечисленные способы, можно прочитать здесь. А если у вас есть опыт интеграции распознавания кодов в веб-приложения, расскажите о нём в комментариях!
Лучшее в блогах
Вам понравится
Оправдает ли созданное мобильное приложение ожидания, зависит от того, как чётко вы представляете, как будет организована работа с аутсорс-разработчиком. Чтобы вам было проще сориентироваться, расскажем, из каких этапов состоит разработка приложений. После прочтения статьи вы поймете, почему подрядчик задаёт те или иные вопросы, что вас попросят прислать на старте работы, на каких этапах попросят обратную связь, а на каких — можно довериться разработчику и наблюдать за процессом.