Как встроить распознавание банковской карты в браузер

Привет, Tproger!

Мы в Smart Engines занимаемся разработкой интеллектуальных систем для распознавания документов. Мы уже рассказывали вам, как просто и быстро интегрировать наши решения для распознавания паспорта, а также распознавания жестких и гибких форм в Android.

Сегодня речь пойдет про браузерное распознавание. Оно в последние несколько лет пользуется колоссальным спросом со стороны рынка – прежде всего у финтеха. Кроме того, развертывание PWA-приложений понадобится компаниям при интеграции функциональности в новый отечественный мессенджер MAX.

Поговорим о том, в чем плюсы распознавания в вебе и главное – как его развернуть на примере банковской карты.

Исторический экскурс

Технология WebAssembly (WASM) появилась в 2015 году и два года спустя была реализована во всех основных браузерах. Тогда же ученые Smart Engines начали проводить с WASM первые эксперименты.

Немного похвастаемся: в 2021 году мы первыми в стране представили промышленные технологии для распознавания документов в вебе. Это оказалось очень кстати, поскольку на фоне удаления мобильных приложений из магазинов к интерес к технологиям распознавания QR и банковских карт в браузере вырос.

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

Ответ нашелся быстро – WASM и Smart Engines.

В чем плюсы?

Браузерное распознавание имеет очень много преимуществ. Во-первых, это все преимущества веб приложения:

• Кроссплатформенность;
• Возможность доступа к приложению из любой точки с интернет-соединением
• Мгновенное развертывание и обновление приложения, что позволяет пользователям всегда работать с актуальной версией.

Во-вторых, предусматривает совершенно иной уровень защиты персональных данных. Пользователь не выгружает свои данные на сервер для распознавания, а, напротив, загружает модуль для распознавания изображений с персональными данными себе.

И, в-третьих, позволяет в сжатые сроки реализовать фронтэнд-интеграцию силами web-разработчиков.

Все преимущества браузерного распознавания уже оценили наши партнёры, нацеленные на развитие своих интернет-сервисов. Среди них – Альфа-Банк, Газпромбанк и другие.

Распознавание кодифицированных объектов

Одним из самых востребованных направлений в OCR сейчас является распознавание кодифицированных объектов, таких как баркоды, номера телефонов, банковских карт и прочие машиночитаемые зоны.

В своё время мы выделили распознавание таких объектов в отдельный продукт Smart Code Engine для того, чтобы иметь возможность гибче работать с различными сценариями распознавания, а также иметь возможность пойти дальше в деле оптимизации скорости и размера библиотеки. В результате появился Smart Code Engine 2.0 – продукт получил новый интерфейс и возможность максимально гибко настраивать поведение для получения лучшего качества распознавания.

Библиотека Smart Code Engine написана на С++ и портировалась в веб с помощью инструмента Emscripten. Поскольку вся кодовая база, от низкоуровневых вычисления над изображениями до архитектуры поисковой сети, поддерживается нашим научным отделом, качественное портирование не составляло особых проблем.

Js-интерфейс библиотеки представляет собой практически зеркальный С++ интерфейс и с его помощью распознавание банковской карты реализуется вот так:

			 // Инициализация WASM модуля.
const SE = await SmartDocEngine(module);
// Создание инстанса библиотеки Smart Code Engine
const engine = new SE.CodeEngine(false); 

// Создание настроек сессии распознавания с указанием документа для поиска
let sessionSettings = engine.GetDefaultSessionSettings();
let engineName = SE.ToString(SE.EngineSettingsGroup.Card); 
sessionSettings.SetOption(engineName + ".enabled", "true");

// Инициализация сессии
let spawnedSession = engine.SpawnSession(sessionSettings, signature);

// Создание изображения
const image = new SE.seImage(imageData);

// Получение результата
const result = spawnedSession.Process(image);

// Освобождение ресурсов
image.delete();
result.delete();
spawnedSession.Reset();

		

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

Передача изображений в библиотеку осуществляется прямо с чтения пикселей элемента canvas, где вы выводите изображения с камеры устройства или прикрепленного файла PDF.

В процессе работы распознавания у вас есть возможность нарисовать поверх изображения найденные элементы документа за мгновение до распознавания.

Вот как это выглядит на выходе:

Распознавание банковской карты в браузере при помощи Smart Code Engine

Как вы можете заметить, интеграция Smart Code Engine SDK не вызывает сложностей – внедрение происходит практически мгновенно, а скорость распознавания сопоставима с нативными библиотеками.