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

Современные веб-приложения способны во многом заменить классические приложения для мобильных телефонов. Интегрировать в Progressive Web Application (PWA) привычный, хорошо знакомый пользователю функционал помогает технология WebAssembly и, конечно, мы. Рассказываем, как встроить распознавание паспорта РФ в браузер и обеспечить клиентам с разными ОС одинаково высокий пользовательский опыт. Эта статья будет полезна вам и в том случае, если вы планируете разворачивать распознавание в мини-аппах (mini apps) MAX или Telegram.

Progressive Web Apps (PWA) позволяют сайту в браузере работать как полноценное приложение — с установкой на домашний экран, мгновенной загрузкой и офлайн-возможностями. В отличие от классических мобильных приложений, PWA не требуют публикации в App Store или Google Play — они разворачиваются прямо из браузера, что особенно ценно в экосистемах с закрытыми магазинами приложений.

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

Мы в Smart Engines реализовали PWA, которое хранит все необходимые ресурсы (включая WASM-модули) в локальном кеше благодаря Service worker. В отличие от браузерного кеша, Service worker при повторном обращении к ресурсу не создает HTTP- запросов, а отдает файлы сразу. Это позволяет значительно ускорить отзывчивость приложения.

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

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

Хотите увидеть, как это работает на практике? Давайте перейдем к демонстрации!

Распознавание паспорта РФ в браузере

Интеграция решения распознавания паспорта РФ в PWA довольно проста.

Кеширование

Для кэширования ресурсов вы регистрируете Service Worker по простому примеру из MDN и добавляете все необходимые ресурсы при регистрации. Это стили, скрипты и wasm-файлы.

Установить сайт на экран

В Chromium-браузерах (Edge, Opera, Brave) событие beforeinstallprompt срабатывает, когда сайт удовлетворяет критериям установки PWA. Вы можете перехватить это событие и показать свой баннер с предложением установки.

К сожалению, Safari на iOS не поддерживает это событие. Для него принято использовать скрипт, например a2hs.js. который показывает уведомление с предложением и инструкцией, как добавить сайт на экран устройства самостоятельно. Это менее удобно, но на iOS эта возможность существовала задолго до PWA, даже до 11 версии iOS, после которой появилась поддержка offline-функций.

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

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

			let SEWorker = new Worker("./worker.js" ));
		

Внутри воркера мы загружаем скрипт и создаем инстанс библиотеки распознавания

			  // Import the relevant global Engine object
    importScripts(`bin/simd.nothreads/idengine_wasm.js`);
    
      // Init WASM module
        const SE = await SmartIDEngine({});
        
        // Init engine
        const ENGINE = new SE.seIdEngine(true, 1, true);


		

Теперь нам необходимо создать и настроить сессию распознавания.

			let sessionSettings = engine.CreateSessionSettings();
		

Указываем режим распознавания и маску документа. Можно указать маску как rus.passport.* тогда поиск будет осуществляться как национального паспорта так и биометрического заграничного (“rus.passport.biometric”)

			sessionSettings.SetCurrentMode(“default”);

sessionSettings.AddEnabledDocumentTypes(“rus.passport.national”);

		

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

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

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

			spawnedSession = engine.SpawnSession(sessionSettings, signature);
		

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

			let image = new SE.seImageFromBuffer(rawData, width, height, stride, channels);

		

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

			const result = spawnedSession.Process(image);
		

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

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

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

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

			  if (result.GetIsTerminal()) {

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

  }
		

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

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

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