Учим веб-приложения читать QR и штрихкоды
Штрихкоды и 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 перевернуло рынок браузерных решений для считывания штрихкодов. Они конкурируют и с платными сервисами, и с бесплатными решениями за счёт лёгкой интеграции и высокого процента верных распознаваний. Плюс, с ростом популярности алгоритм постоянно совершенствуется. Возможно, вскоре на рынке появятся подобные решения от других компаний, которые смогут предложить больше возможностей или форматов кодов.
Если вы в поиске оптимального решения для корпоративного софта, свяжитесь с нами через форму внизу, наши специалисты подберут инструменты, которые идеально подойдут вашему проекту.