Лидеры года — новая категория на Workspace Digital Awards! Номинируйте вашу команду, продукты и проекты.
Инструменты

Сканер штрих-кода онлайн — как прочитать EAN, UPC и Code 128 в браузере

833 
 

Кассир пробивает товар за долю секунды. Покупателю или сотруднику склада, чтобы прочитать те же тринадцать цифр, обычно предлагают ставить приложение с рекламой и доступом к галерее. Браузерный сканер решает задачу без установки: открыли страницу, разрешили камеру, навели на полосы — получили номер.

Зачем сканировать штрих-код в браузере

Браузерного сканера достаточно для типовых рабочих задач: пробить товар перед покупкой, найти владельца номера, принять поставку на 20-50 позиций, сверить код на ценнике с кодом на упаковке, завести карточки в таблицу, проверить читаемость собственной этикетки до тиража.

Преимущества по сравнению с приложением: требуется только доступ к камере, а не пакет разрешений; сценарий одинаково работает на Android, iOS и десктопе; ничего не остается в системе после использования; можно открыть на любом устройстве и просто закрыть вкладку. Есть и честные ограничения: нет офлайн-режима, нет очереди сканов с выгрузкой в учетную систему, а батарея расходуется быстрее, чем у специализированного терминала.

Как устроен браузерный сканер

Логика одинакова у большинства веб-сканеров: WebRTC (getUserMedia) запрашивает доступ к камере, поток попадает в элемент <video>, кадры 10-30 раз в секунду копируются на <canvas>, а декодер переводит кадр в оттенки серого, бинаризует изображение и ищет чередование штрихов вдоль пробных линий под разными углами.

Декодеры бывают двух типов. Нативный BarcodeDetector работает быстро, но поддерживается не всеми браузерами. Сборка на WASM (ZXing, ZBar) работает стабильнее на разных платформах, весит сотни килобайт и загружается один раз. Обязательное условие для доступа к камере — HTTPS: по обычному http браузер даже не покажет запрос разрешения.

  • Про приватность. У клиентского сканера кадры не покидают устройство — вычисления идут в JS или WASM, а на сервер уходит только сама страница. Проверить это несложно: открыть сканер, отключить интернет и попробовать считать код — если распознавание сработало, значит оно локальное. Более точную картину дает вкладка Network в панели разработчика: у клиентского решения при сканировании не появляется запрос с картинкой в теле. Для накладных и адресных ярлыков с персональными данными такая разница принципиальна, и это стоит учитывать при выборе инструмента — например, сканер штрихкодов QRkoder работает именно по этой схеме.

Сканирование камерой телефона: пошагово

  1. Откройте сканер по https в Chrome, Safari или Яндекс.Браузере.

  2. Разрешите доступ к камере в системном запросе. При необходимости разрешение можно отозвать в настройках сайта.

  3. Переключитесь на основную камеру — фронтальная хуже держит фокус на близких деталях.

  4. Держите устройство на расстоянии 10-20 см, чтобы код занимал 50-80% ширины кадра вместе с белыми полями по краям.

  5. Разверните штрихи поперек линии сканирования и дайте автофокусу схватить резкость — 1-2 секунды без движения.

  6. Скопируйте номер. EAN-13 — 13 цифр, UPC-A — 12, EAN-8 — 8.

Если код не считывается, попробуйте наклонить телефон на 10-15 градусов, чтобы блик ушел мимо объектива; используйте верхний свет вместо вспышки, поскольку вспышка на глянце дает пересвет ровно по центру кода; при мелкой печати подойдите ближе и добавьте зум 1,5-2×.

Распознавание с фотографии

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

  1. Сфотографируйте код с расстояния 15-25 см без вспышки, фронтально, чтобы штрихи были резкими по всей длине.

  2. Загрузите файл в формате JPG, PNG или WebP. Формат HEIC с iPhone часть браузеров не декодирует — стоит переключить камеру на "Наиболее совместимый" режим съемки.

  3. Если распознавание не сработало, обрежьте кадр до кода с полями 3-5 мм, поднимите контраст и выпрямите перспективу.

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


Разместите
тендер бесплатно

Наша система сама подберет вам исполнителей на услуги, связанные с разработкой сайта или приложения, поисковой оптимизацией, контекстной рекламой, маркетингом, SMM и PR.

Заполнить заявку 13755 тендеров
проведено за восемь лет работы нашего сайта.


Что делать с распознанным номером

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

Важный нюанс: линейный код описывает товарную позицию, а не конкретный экземпляр — у всех единиц одного вида номер совпадает. Поэтому подлинность маркированного товара проверяется по Data Matrix в системе "Честный знак", а не по EAN-13, который будет одинаковым и у оригинала, и у контрафакта с той же упаковкой.

Какие коды читает браузерный сканер

Если нужен собственный код для товара, коробки или инвентаря — это отдельная задача, подробнее в материале как создать штрих-код онлайн. Розница постепенно движется в сторону 2D-кодов на упаковке (инициатива GS1 Sunrise 2027), поэтому сканер, читающий и линейные символики, и Data Matrix, оказывается практичнее узкоспециализированного.

Почему код не читается

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

Когда браузера недостаточно: склад и магазин

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

ТСД — терминал сбора данных: имидж-сканер, защищенный корпус, физическая клавиатура, сменный аккумулятор, Android на борту и обмен данными с учетной системой. Считывает код с расстояния двух-трех метров, работает в морозильной камере и переживает падение с высоты стеллажа. Это рабочий инструмент для приемки, инвентаризации, отгрузки и адресного хранения.

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

Десктоп: веб-камера и USB-сканер

  • Веб-камера. Работает по той же схеме, что и телефон, но у большинства встроенных модулей фиксированный фокус, настроенный на дистанцию лица. Мелкий EAN на расстоянии 10 см такая камера размывает. Стоит держать этикетку на расстоянии 20-30 см, добавить настольную лампу сбоку и использовать цифровой зум. Внешняя камера с автофокусом снимает проблему полностью.

  • USB-сканер в режиме эмуляции клавиатуры (keyboard wedge, HID Keyboard) — самый предсказуемый вариант для рабочего места. Система распознает его как обычную клавиатуру, драйверы не требуются: код "печатается" в поле, которое сейчас в фокусе, и завершается переводом строки. Проверка занимает минуту: подключить сканер, открыть блокнот, считать любой код.

Две типичные сложности. Первая — активная русская раскладка: латиница из Code 128 и Code 39 приходит кириллицей, решается переключением на английскую раскладку до сканирования. Вторая — отсутствие Enter в конце, из-за чего форма не отправляется: суффикс включается служебным кодом из инструкции к модели. Альтернативные режимы (виртуальный COM-порт, HID POS) нужны в основном интеграторам, для браузера они избыточны.

Итог

Камера телефона или готовое фото позволяют считать EAN-13, EAN-8, UPC, Code 128, ITF-14, GS1 DataBar и Data Matrix прямо в браузере — без установки приложения и без регистрации. Для разовых задач и небольшого потока этого достаточно; для склада и постоянной работы с номенклатурой имеет смысл присмотреться к ТСД или связке телефон плюс Bluetooth-сканер. Если нужен просто удобный онлайн-сканер под рукой, можно воспользоваться сканером штрихкодов — распознавание идет прямо в браузере, а кадры остаются на устройстве.

Часто задаваемые вопросы

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

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

Уходят ли кадры с камеры на сервер сканера?

У клиентских сканеров — нет. Кадр попадает в элемент video, копируется на canvas и разбирается декодером на JavaScript или WebAssembly, то есть вычисления выполняет процессор устройства. Проверить это можно за двадцать секунд: загрузить страницу, отключить интернет и попробовать считать код — если распознавание сработало без сети, значит оно локальное. Более точную картину дает вкладка Network в панели разработчика: у клиентского сканера при считывании не появляется запрос с картинкой в теле. Серверные распознаватели тоже существуют и лучше справляются со сложными снимками, но фото при этом уходит на стороннюю машину. Для накладных и адресных ярлыков с персональными данными это решающий аргумент.

Почему сканер не читает код с мятой этикетки или через пленку?

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

Как узнать производителя и страну по штрих-коду?

По номеру определяется не страна сборки, а владелец номерного диапазона. Механика такая: поиск по номеру в Национальном каталоге показывает карточку товара, если производитель ее завел, а реестры GS1 позволяют установить компанию, которой выдан диапазон, когда она не закрывала эти данные. Отсутствие результата само по себе ничего не доказывает: часть позиций в каталог не попадает, у импорта карточку заводит поставщик, а внутренние коды магазина в глобальных базах отсутствуют по определению. Частое заблуждение — что первые цифры показывают страну производства. На самом деле они указывают на национальную организацию GS1, где зарегистрирован владелец номера, а завод может находиться на другом континенте.

Читает ли онлайн-сканер штрих-код с экрана другого телефона?

Камера смартфона и веб-камера — да, с оговорками. Экран светится сам, поэтому в кадре появляются пересветы и муар от пиксельной сетки. Помогает поднять яркость донора до максимума, отключить автояркость и ночной режим с желтым оттенком, увеличить код на экране примерно до 4-5 см по ширине и снимать чуть под углом, чтобы отражение ушло мимо объектива. Лазерный сканер с экрана не читает в принципе: он ловит отраженный луч узкой длины волны, а светящаяся матрица его так не отражает. Именно поэтому на кассах и в пунктах выдачи, где принимают коды с телефонов, стоят имидж-сканеры, снимающие кадр камерой.

Как настроить USB-сканер, чтобы код вводился прямо в браузер?

Проще всего использовать режим эмуляции клавиатуры — keyboard wedge, он же HID Keyboard. Сканер определяется системой как обычная клавиатура, драйверы не нужны: код "печатается" в поле, которое сейчас в фокусе, и завершается переводом строки. Порядок такой: подключить сканер, открыть блокнот, считать любой код — если цифры появились, устройство готово к работе. Далее нужно поставить курсор в нужное поле на странице и сканировать туда. Есть две типичные сложности. Первая — активная русская раскладка: латиница в Code 128 и Code 39 приходит кириллицей, решается переключением на английскую. Вторая — отсутствие Enter в конце, из-за чего форма не отправляется: суффикс включается служебным кодом из инструкции к модели.

Выскажите мнение
Авторизуйтесь, чтобы добавить свой комментарий.




833

Лучшие статьи

Поделиться: 0 0 0
Лайки за кейсы:  0 Подписчики:  0

Оцените статью
Спасибо за оценку