И наконец, у нас остается класс детектора баркода BarcodeDetector, который отвечает за обнаружение штрихкодов на изображениях, используя Vision Framework от Apple. Он инкапсулирует весь процесс обработки изображения от его предварительной подготовки до распознавания баркода. Первая проблема, с которой мы столкнулись, была в том, что баркод не сканировался средствами Vision Framework, поскольку он был слишком маленький. Поэтому сперва пришлось обрезать изображение — мы использовали imageOffsetX и imageOffsetY для определения области интереса на изображении (ROI, Region of Interest).

На вход компонент принимает три колбэка:
onPreview — показывает предварительный просмотр обработанного изображения;
onBarcodeRead — возвращает результат распознавания;
onShowError — уведомляет об ошибках.


Распознавание штрихкода просиходит в методе (detectBarcodeFromImage) Далее о том, что выполняет этот метод.

1. Мы хотим вырезать область с баркодом из изображения полученного с камеры. Изображение с камеры отличается по размеру от превью. Для того чтобы рассчитать коэффициент, на которое оно отличается, мы используем метод calculateImageScale. Метод учитывает то, что исходное изображение повернуты на 90 градусов.Вычисляет масштаб изображения. Метод сравнивает соотношение сторон изображения и кадра, чтобы определить коэффициент масштабирования для корректной обрезки.

2. Обрезка изображения, вычисляем область интереса (ROI) с учетом смещения (imageOffsetX, imageOffsetY) и размера (imageSize). Маленький синий квадратик на экране

Процесс сканирования выглядит следующим образом

3. Обработка изображения — преобразуем изображение в монохромное (monochrome) и инвертирует его (invert). На скриншоте снизу мы применяем фильтры, в левом верхнем углу можно увидеть изображение, на которое были применены фильтры.

4. Показываем получившееся изображение на экране в левом углу для дебага: вызывая колбэк onPreview с обработанным изображением.

При обработке изображений мы используем следующие методы для обработки

1. invert — инвертирует цвета изображения. Использует фильтр CIColorMatrix для инверсии цветовых каналов. Про ColorMatrix можно почитать здесь: https://docs.rainmeter.net/tips/colormatrix-guide/

2. monochrome — преобразует изображение в черно-белое. Регулирует яркость, контраст и насыщенность через фильтр CIColorControls, увеличиваем экспозицию с помощью CIExposureAdjust.

Эти преобразования повышают вероятность успешного распознавания баркода в различных условиях при недостаточном освещении.

До и После

До
1. Не могли отсканировать баркод средствами библиотек (react-native-vision).
2. Не могли кастомизировать библиотеки таким образом, чтобы кропнуть зону поиска.
3. Невозможно было наложить фильтры, на том же Android без инвертирования изображения, сканирование баркода было всегда безуспешным.
4. Не могли выбрать нужную камеру,

После
1. Получили полностью кастомный модуль, который легко можно настроить под свои нужды.
2. Сканируем баркод на всевозможных iOS и Android устройствах.
3. Не думаем искать готовое решение, перебирая кучу библиотек.

Другие модули, которые мы написали в рамках данного проекта:
1. Модуль для подключения по Wifi.
2. Модуль для взаимодействия с Ricoh 360 camera (получение live stream, снятие фото, удаление, получение настроек).
3. Просмотрщик 360 фотографий.

Также нам помогали нативные разработчики для написания:
• модуля для создания RoomScan, RoomPlan;
• модуля для создания 360 фото, используя камеру телефона (панорамы).

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

Из минусов, пожалуй, только страхи, что нужно лезть в нативный код и что-то писать самому, но вы всегда можете попросить помощи нативных разработчиков, которые могут подсказать вам, проревьюить ваш код или даже написать его. Но самостоятельные попытки покопаться в нативном коде, на мой взгляд, точно помогут подтянуть свои скилы и улучшить перспективы на рынке труда по сравнению с кандидатами, которые используют React Native без погружения в натив. Последнее, по-моему, невозможно, мне также близок JavaScript и TypeScript, но поставленные задачи как-то приходится решать, поэтому избежать написания нативных модулей не получилось.

Несмотря на то, что я писал нативные модули на многих проектах, сказать, что хорошо научился писать нативный код точно не могу (так что не кидайте камни в мой огород, глядя на исходный код). Все же я хочу оставаться React/React-Native разработчиком.

В завершение хочу сказать вот что. Не бойтесь писать нативные модули, начните с малого. Например, можете начать с этой ссылки: https://reactnative.dev/docs/native-platform

Всем спасибо за ваши реакции и комментарии! До следующих встреч! 🫶

Пока мы тут марафонили, Microsoft опубликовала ИИ-агент OmniParser v2. Он прямо таки работает за вас, ориентируется в браузере и при этом, вы видите все, что он делает.

#ai