Как встроить распознавание паспорта СНГ в браузер

Эта статья продолжает раскрывать, как с помощью WebAssembly (Wasm) легко встроить технологии распознавания в любую веб-среду. Одними банковскими картами и паспортом РФ дело не ограничивается – на этот раз поговорим об удостоверениях личности стран СНГ: почему распознавание этих документов сегодня не менее актуально для бизнес-задач и как в этом деле помогает технология Wasm. В конце статьи вас ждет традиционный гайд по встраиванию, поехали!

Зачем распознавать паспорта СНГ

В нашей стране и за ее пределами паспорт – это ключ к любому цифровому сервису. Если вы открываете счет в банке, оформляете заказ в интернет-магазине, регистрируетесь в сервисе каршеринга, самостоятельно заселяетесь в отель или приобретаете билет на концерт, вам практически всегда требуется ввести свои паспортные данные.

Сегодня в этом помогает искусственный интеллект – он берет на себя распознавание паспорта и позволяет получить в структурированном виде всю информацию о владельце документа без ошибок и задержек. Однако если решение умеет распознавать только российский паспорт, оно сразу теряет актуальность для Беларуси, Казахстана, Армении, Узбекистана и других стран. Это стратегический недочет – в особенности если бизнес имеет дело с иностранцами: например, связан со сферой туризма, банкингом, перевозками, или просто представлен в соседних с Россией государствах. Существенный спрос на технологии распознавание паспорта СНГ наблюдается со стороны HR-сферы – автоматизация ввода данных позволяет избавиться от бюрократических проволочек при массовом найме и работе с трудовыми мигрантами. Во всех этих случаях поддерживать распознавание документов стран СНГ просто необходимо.

Распознавание паспортов СНГ позволяет предложить единый, удобный и безопасный сценарий регистрации для пользователей из любых государств региона. В свою очередь, это повышает конверсию, сокращает клиентский путь и делает цифровые продукты доступнее для более широкой аудитории. Сегодня такие возможности искусственного интеллекта доступны не только для нативных приложений, но и для так называемых прогрессивных веб-приложений (PWA) и mini apps в мессенджерах.

Как в этом помогает WebAssembly

PWA, благодаря своей доступности и независимости от устройств и операционок, уже превратились в золотой стандарт для сферы цифровых услуг. «Прокачанные» сайты уже заменяют классические нативные приложения, поскольку не уступают по функциональности и быстродействию и при этом не требуют скачивания, обновления и поддержки в сторах. Кроме того, сейчас буквально на наших глазах происходит интеграция аналогичного формата в мессенджеры – MAX и Telegram. Туда уже интегрируют платежи и переводы, онлайн-покупки, регистрацию в сервисах и другие возможности, которые раньше оставались прерогативой нативных приложений.

Для переноса в веб хорошо знакомого пользователю функционала используется технология WebAssembly, или Wasm. Она позволяет выполнять ресурсоемкие вычисления – например, распознавание документов, анализ изображений, работу с графикой, – непосредственно в браузере. Это возможно без потери скорости и без постоянных запросов к серверу. Мы в Smart Engines разглядели перспективность Wasm задолго до того, как о технологии широко заговорили, и к моменту удаления банковских приложений из App Store и Google Play мы уже имели обширную экспертизу в этой области.

Мы разработали PWA, в котором реализовали распознавание QR-кодов, банковских карт, номеров телефонов, паспортов и других объектов. Это дало возможность ведущим российским банкам внедрить переводы по СБП и оплату квитанций прямо на интернет-странице. Таким образом, проблему блокировки приложений удалось решить – конечный пользователь получает максимально нативный опыт, оставаясь прямо в браузере. Веб-приложение хранит все необходимые ресурсы (включая Wasm-модули) в локальном кеше благодаря Service worker. В результате приложение получается максимально отзывчивым и может работать без интернета.

Как работает распознавание паспорта СНГ

Распознавание паспортов стран СНГ – задача нетривиальная: разные государства используют свои форматы документов, шрифты и уровни защиты. Мы разработали универсальную технологию, которая одинаково уверенно работает с паспортами России, Казахстана, Беларуси, Армении, Узбекистана, Таджикистана и других государств региона. В общей сложности система поддерживает более 100 языков, включая редкие письменности.

На распознавание паспорта любой страны СНГ в браузере с помощью нашего движка уходит всего несколько мгновений. Форма заполняется корректными данными за секунды, а пользователь не тратит время на перепечатку.

Как встроить распознавание паспорта СНГ в веб

Перейдем к делу. Для начала отметим, что источник входа, откуда система будет получать изображения, может быть совершенно любым. Например, камера — тогда речь о фотографии или видео в реальном времени. Документ также может быть прикреплен из галереи или упакован в многостраничный PDF. Все эти форматы можно отрисовать на canvas и передать на распознавание.

Вы выбираете в вашем дизайне место для расположения canvas для вывода видео или делаете его скрытым для отрисовки PDF, например. Этот же подход используется, если вы пользователь айфона и хотите распознавать файл в формате HEIC.

Получаем ссылку на DOM-элемент:

			const canvas = document.querySelector("#canvas");
		

Вот так мы извлекаем из него данные

			const imageData = canvas.getContext("2d", { willReadFrequently: true }).getImageData(0, 0, canvas.width, canvas.height);

		

Теперь же мы переключимся на воркер и заберем эти данные уже из него.

Воркер

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

Загружаем наш модуль для инициализации WASM.

			// Import the relevant global Engine object
importScripts(`./bin/simd.nothreads/idengine_wasm.js`);

		

Инициализируем Wasm-модуль

			// Init WASM module

const SE = await SmartIDEngine(module);

// console.log(SE);
		

Создаем инстанс библиотеки распознавания

			// Init recognition engine

let ENGINE = createEngine(SE, {});
		

Сессия распознавания

Теперь мы подготовим сессию для распознавания. Создаем объект настроек

			let sessionSettings = engine.CreateSessionSettings();
		

Указываем режим распознавания и маску документа. Можно указать маску звездочкой «*», а режим «anydoc», тогда поиск будет осуществляться по всем доступным документам.

			sessionSettings.SetCurrentMode(“anydoc”);

sessionSettings.AddEnabledDocumentTypes(“*”);
		

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

			sessionSettings.SetOption("common.extractTemplateImages", "true");
		

Теперь мы инициализируем сессию.

			let spawnedSession = engine.SpawnSession(sessionSettings, signature);
		

Передача изображений. Видеопоток

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

Отметим, что объект canvas возвращает пиксели в формате RGBA, то есть с альфа каналом.

Создание объекта seImage класса se.common.image, необходимого для распознавания, возможно практически из любого набора пикселей, в том числе подходит и четырехканальное изображение.

			const width = imageData.width;
const height = imageData.height;
const rawData = imageData.data.buffer;
const channels = rawData.byteLength / (height * width); // Количество каналов
const stride = channels >= 3 ? rawData.byteLength / height : width; // Расчет страйда

const seImage = new SE.seImageFromBuffer(rawData, width, height, stride, channels);


		

Изображение создано. Теперь мы можем передать его на распознавание.

			const result = spawnedSession.Process(seImage);
		

Результат

Объект result содержит в себе всю информацию о документе: текстовые поля, координаты шаблона и полей документа, изображения (подписи и фото держателя).

И на этом этапе мы рекомендуем не закрывать сессию, а продолжать подавать в нее изображения, то есть мы рекомендуем использовать распознавание документа в видеопотоке.

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

Если система больше не ожидает получить более качественное изображение на вход, она переводит флаг терминальности сессии в true и вы можете забрать результат.

Проверяйте результат каждый раз на терминальность:

			if (result.GetIsTerminal()) {

    // Можно забирать результат

}
		

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

А если вам интересно узнать больше про возможности искусственного интеллекта на WebAssembly, рекомендуем почитать наши прошлые статьи про распознавание банковских карт и паспорта РФ в браузере.