Хабрахабр

ABBYY Mobile Web Capture: Качественные фотографии документов прямо в браузере смартфона

image

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

Но сколько у вас на телефоне мобильных приложений? Сейчас существует немало приложений на iOS и Android для «мобильного сканирования» документов. Зачем тратить время и устанавливать еще новые, если этого можно и не делать?

Поэтому мы и создали ABBYY Mobile Web Capture. Гораздо проще сфотографировать документ прямо в мобильном браузере, который уже есть на любом смартфоне. Он позволяет захватить хорошую картинку прямо в web-браузере на самых популярных мобильных ОС и отправить ее для дальнейшей обработки на сервер или в облако. Это JavaScript API, то есть SDK, который мы предлагаем нашим клиентам встраивать в свои web-странички и web-based приложения. Счет, водительское удостоверение, паспорт, договор, анкету, заявление – обработать можно любые документы. О том, как эта технология работает, мы сегодня и расскажем.
ABBYY Mobile Web Capture предлагает сделать фотографию нужного документа в видеопотоке из мобильного браузера.

Ядро алгоритма написано на С++, поэтому для его переноса в web-браузер мы использовали технологию WebAssembly. Новый продукт использует нашу мобильную технологию автоматического захвата изображения Image Capture, которую перенесли в JavaScript. Их добавили в JS API, чтобы разработчики могли просто и удобно встроить захват из видеопотока в свое web-based приложение или на сайт. Дополнительно мы создали UI-компоненты, отвечающие за работу с камерой. По сути, разработчику нужно просто скопировать этот код к себе на сайт и все — не сложнее, чем, например, вставить метрику для анализа посещаемости. Чтобы интеграция была совсем простая, в дистрибутив продукта мы добавили исходники примера кода web-странички и показываем, как правильно использовать наше API.

А дальше действует ABBYY Mobile Web Capture: После этого прямо в браузере можно включить видеокамеру и навести ее на документ.

1. Когда в кадр попадает документ, мы в видеопотоке находим его границы.

Для этого нужно убедиться, что человек перестал двигать камеру и уже «нацелился» на нужный документ. 2. Дальше предстоит автоматически захватить четкое изображение документа. Чтобы этого избежать, мы оцениваем, не движется ли картинка, т.е. Мы не полагаемся на сенсоры телефона, потому что всегда есть вероятность, что человек держит телефон неподвижно, а вот другая рука с документом движется. Если оно минимальное, значит можно приступать к захвату. считаем смещение между объектами от кадра к кадру. Таким образом SDK автоматически ловит момент, когда нужно сделать снимок документа, чтобы получить изображение высокого качества. Дополнительно мы смотрим на резкость. При этом не надо нажимать никакие кнопки:

3. После того, как мы захватили кадр с документом, вырезаем его по границам и выравниваем:

На примере наших проектов с ABBYY FlexiCapture мы видим, что клиентам часто бывает удобнее вводить документы через смартфон, а не сканер. ABBYY Mobile Web Capture дает хорошую картинку, которую дальше можно отправить на распознавание, например, в ABBYY FlexiCapture, и она точно будет обработана. Тогда человека, приславшего фото с телефона, просят «перефотографировать». Но полученные таким образом картинки нередко оказываются смазанными – их потом просто невозможно качественно обработать. Но клиенту это не всегда удобно сделать.

Во-первых, поиск границ документа, оценка смещения и резкости кадра требуют вычислительных ресурсов – пришлось оптимизироваться, чтобы видеопоток в браузере не тормозил. Когда мы разрабатывали ABBYY Mobile Web Capture, то поняли, что сфотографировать документ в браузере в видеопотоке не так-то просто. Картинки, которые мы захватывали на iOS, даже на крутых айфонах XS, были не очень. Во-вторых, на iOS мы столкнулись с тем, что в Safari было невозможно получить видео с разрешением выше HD. Мы писали багрепорты в Apple и просили сделать возможным работу с камерой в высоком разрешении из Safari. Их просто не получалось распознавать, потому что для распознавания документа А4, набранного 10-ым шрифтом, нужно изображение full HD и выше. 2! И они поправили это в iOS 12. А сейчас — SDK дает хорошие картинки, и дальше с ними можно делать все, что хочешь. Без этого наш продукт не работал бы так, как сейчас.

Расскажем немного о них. Конечно, когда мы делали SDK, то оценивали, какие задачи нужно решать конечным пользователям.

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

Представьте, вы приходите в банк. Хотя нет, если вы приходите, то уже все не так. Многие терпеть не могут ходить в банк. Ты такой думаешь: «Эх, сейчас вот на полчаса минимум». Поэтому, если вам нужно получить какой-то кредит наличными как можно быстрее, вы, скорее всего, возьмете телефон и погуглите, какие есть варианты. Допустим, вы нашли информацию о кредите, и на сайте предлагается оформить заявку онлайн. Ее удобно оформлять как раз-таки на сайте, а не в приложении – приложение ведь нужно устанавливать, а вы еще не знаете, дадут вам кредит или нет. Зачем заранее телефон лишними приложениями засорять? Итак, вы жмете на кнопку, и далее нужно заполнить персональные данные.

Люди так и делают, но картинки могут быть смазанными или вообще без изображения документа – по опыту наших проектов люди часто путают и загружают совсем не тот файл, что собирались. Раньше было так: банк просит снять документ на камеру или загрузить готовое фото из галереи. Это все отправляется в банк, но изображение не подходит, и все идет насмарку.

Но тут другая история: клиент сфотографировал документ, отправил его в бэк-офис на распознавание. Некоторые банки пытаются обойти проблему так: ставят «моментальное» распознавание на бэке. Но когда ты оформляешь услугу с мобильного телефона, то минута – это очень долго. Это занимает около минуты. За это время ты, скорее всего, решишь, что у тебя все зависло, закроешь страницу и позвонишь в техподдержку или бросишь все и пойдешь на другой сайт оформлять кредит.

Он снимает документ в видеопотоке. С ABBYY Mobile Web Capture клиенту не нужно ничего устанавливать. Технологии обрабатывают фотографию и улучшают изображение, которое теперь спокойно можно отправить в банк.

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

У вас есть загранпаспорт? Бывает, что документа под рукой нет, но вы его сфотографировали и изображение хранится в галерее смартфона. Оно всегда пригодится, если где-то надо зарегистрироваться или купить билеты на сайте авиакомпании. Иногда вас могут попросить отправить фотографию разворота загранпаспорта. Что, если фотография не очень четкая или сделана на фоне ковра? Поймут ли это в визовом центре? Наверное, но лучше не рисковать.

Если на нем не будет границ, мы выдадим предупреждение и обратим внимание клиента на то, что он, вероятно, загрузил что-то не то. Можно загрузить эту фотографию на сайт с помощью ABBYY Mobile Web Capture, и технология найдет границы документа на изображении. («Постараемся» потому, что эта фича сейчас в режиме technology preview, но мы активно работаем над ее улучшением.) Плюс мы постараемся оценить качество документа, чтобы понять, подходит ли он для дальнейшего распознавания.

Нужно заполнить карточку в CRM без лишних мук

Приведем такой пример: у нас есть потенциальный клиент – автомобильный дилер, и ему необходимо знать все о людях, которым он продает автомобили. Для этого сотрудники заносят данные о клиентах на веб-портал, типа CRM-системы. Они просят у клиента права, сканируют их, а затем перепечатывают данные в компьютер. Почему сотрудники используют именно веб-портал, а не мобильное приложение? Очень просто: основная задача дилера – продавать автомобили и обслуживать клиентов, а не писать много кода для внутреннего приложения. Поэтому компании важно быстро создать решение, которое будет работать на всех платформах.

Так в итоге и время сэкономим, и качество данных повысим. С ABBYY Mobile Web Capture этот бизнес-процесс можно упростить: сотруднику достаточно сфотографировать документ на смартфон, а затем отправить изображение на распознавание и обработку с помощью другого нашего продукта — ABBYY FlexiCapture.

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

Очень надеюсь, что скоро ABBYY Mobile Web Capture будет использоваться на многих сайтах и поможет упростить задачи, требующие фотографирования документов!

Ольга Титова, Product owner Mobile SDK

Показать больше

Похожие публикации

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»