ABBYY Mobile Web Capture: Качественные фотографии документов прямо в браузере смартфона
Наши клиенты часто используют мобильный телефон, чтобы сфотографировать документ и отправить его в каршеринговую компанию, визовый центр, оператору связи, финансовым и другим компаниям. Фото документа достаточно, чтобы получить машину в аренду, активировать SIM-карту, оформить заявку на кредит. Но иногда получить со смартфона изображение в хорошем качестве бывает непросто. Тем не менее, нам удалось решить эту задачу.
Сейчас существует немало приложений на iOS и Android для «мобильного сканирования» документов. Но сколько у вас на телефоне мобильных приложений? Зачем тратить время и устанавливать еще новые, если этого можно и не делать?
Гораздо проще сфотографировать документ прямо в мобильном браузере, который уже есть на любом смартфоне. Поэтому мы и создали ABBYY Mobile Web Capture. Это JavaScript API, то есть SDK, который мы предлагаем нашим клиентам встраивать в свои web-странички и web-based приложения. Он позволяет захватить хорошую картинку прямо в web-браузере на самых популярных мобильных ОС и отправить ее для дальнейшей обработки на сервер или в облако. О том, как эта технология работает, мы сегодня и расскажем.
ABBYY Mobile Web Capture предлагает сделать фотографию нужного документа в видеопотоке из мобильного браузера. Счет, водительское удостоверение, паспорт, договор, анкету, заявление — обработать можно любые документы.
Новый продукт использует нашу мобильную технологию автоматического захвата изображения Image Capture, которую перенесли в JavaScript. Ядро алгоритма написано на С++, поэтому для его переноса в web-браузер мы использовали технологию WebAssembly. Дополнительно мы создали UI-компоненты, отвечающие за работу с камерой. Их добавили в JS API, чтобы разработчики могли просто и удобно встроить захват из видеопотока в свое web-based приложение или на сайт. Чтобы интеграция была совсем простая, в дистрибутив продукта мы добавили исходники примера кода web-странички и показываем, как правильно использовать наше API. По сути, разработчику нужно просто скопировать этот код к себе на сайт и все — не сложнее, чем, например, вставить метрику для анализа посещаемости.
После этого прямо в браузере можно включить видеокамеру и навести ее на документ. А дальше действует ABBYY Mobile Web Capture:
1. Когда в кадр попадает документ, мы в видеопотоке находим его границы.
2. Дальше предстоит автоматически захватить четкое изображение документа. Для этого нужно убедиться, что человек перестал двигать камеру и уже «нацелился» на нужный документ. Мы не полагаемся на сенсоры телефона, потому что всегда есть вероятность, что человек держит телефон неподвижно, а вот другая рука с документом движется. Чтобы этого избежать, мы оцениваем, не движется ли картинка, т.е. считаем смещение между объектами от кадра к кадру. Если оно минимальное, значит можно приступать к захвату. Дополнительно мы смотрим на резкость. Таким образом SDK автоматически ловит момент, когда нужно сделать снимок документа, чтобы получить изображение высокого качества. При этом не надо нажимать никакие кнопки:
3. После того, как мы захватили кадр с документом, вырезаем его по границам и выравниваем:
ABBYY Mobile Web Capture дает хорошую картинку, которую дальше можно отправить на распознавание, например, в ABBYY FlexiCapture, и она точно будет обработана. На примере наших проектов с ABBYY FlexiCapture мы видим, что клиентам часто бывает удобнее вводить документы через смартфон, а не сканер. Но полученные таким образом картинки нередко оказываются смазанными — их потом просто невозможно качественно обработать. Тогда человека, приславшего фото с телефона, просят «перефотографировать». Но клиенту это не всегда удобно сделать.
Когда мы разрабатывали ABBYY Mobile Web Capture, то поняли, что сфотографировать документ в браузере в видеопотоке не так-то просто. Во-первых, поиск границ документа, оценка смещения и резкости кадра требуют вычислительных ресурсов — пришлось оптимизироваться, чтобы видеопоток в браузере не тормозил. Во-вторых, на iOS мы столкнулись с тем, что в Safari было невозможно получить видео с разрешением выше HD. Картинки, которые мы захватывали на iOS, даже на крутых айфонах XS, были не очень. Их просто не получалось распознавать, потому что для распознавания документа А4, набранного 10-ым шрифтом, нужно изображение full HD и выше. Мы писали багрепорты в Apple и просили сделать возможным работу с камерой в высоком разрешении из Safari. И они поправили это в iOS 12.2! Без этого наш продукт не работал бы так, как сейчас. А сейчас — 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
