Прежде чем перейти к статье, хочу вам представить, экономическую онлайн игру Brave Knights, в которой вы можете играть и зарабатывать. Регистируйтесь, играйте и зарабатывайте!
![image](https://habrastorage.org/webt/1i/1y/gt/1i1ygtel8whclwkbzrkzmnc1dxe.jpeg)
Наши клиенты часто используют мобильный телефон, чтобы сфотографировать документ и отправить его в каршеринговую компанию, визовый центр, оператору связи, финансовым и другим компаниям. Фото документа достаточно, чтобы получить машину в аренду, активировать 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. После того, как мы захватили кадр с документом, вырезаем его по границам и выравниваем:
![](https://habrastorage.org/webt/hd/va/-j/hdva-jjhxz6xtsicovh_9_u0lqw.png)
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, то оценивали, какие задачи нужно решать конечным пользователям. Расскажем немного о них.
Нужно впервые открыть счет или взять кредит в банке, заказать страховку, аренду машины или другую услугу
![](https://habrastorage.org/webt/8k/v3/vj/8kv3vjsm3puxxgvqrp8c31yxmwq.jpeg)
Раньше было так: банк просит снять документ на камеру или загрузить готовое фото из галереи. Люди так и делают, но картинки могут быть смазанными или вообще без изображения документа – по опыту наших проектов люди часто путают и загружают совсем не тот файл, что собирались. Это все отправляется в банк, но изображение не подходит, и все идет насмарку.
Некоторые банки пытаются обойти проблему так: ставят «моментальное» распознавание на бэке. Но тут другая история: клиент сфотографировал документ, отправил его в бэк-офис на распознавание. Это занимает около минуты. Но когда ты оформляешь услугу с мобильного телефона, то минута – это очень долго. За это время ты, скорее всего, решишь, что у тебя все зависло, закроешь страницу и позвонишь в техподдержку или бросишь все и пойдешь на другой сайт оформлять кредит.
С ABBYY Mobile Web Capture клиенту не нужно ничего устанавливать. Он снимает документ в видеопотоке. Технологии обрабатывают фотографию и улучшают изображение, которое теперь спокойно можно отправить в банк.
Нужно обработать фотографию с телефона, чтобы отправить в госорганизацию, визовый центр, банк
![](https://habrastorage.org/webt/tb/x3/zk/tbx3zkstar7wx6buv1kw-n-zbqw.jpeg)
Можно загрузить эту фотографию на сайт с помощью ABBYY Mobile Web Capture, и технология найдет границы документа на изображении. Если на нем не будет границ, мы выдадим предупреждение и обратим внимание клиента на то, что он, вероятно, загрузил что-то не то. Плюс мы постараемся оценить качество документа, чтобы понять, подходит ли он для дальнейшего распознавания. («Постараемся» потому, что эта фича сейчас в режиме technology preview, но мы активно работаем над ее улучшением.)
Нужно заполнить карточку в CRM без лишних мук
![](https://habrastorage.org/webt/n9/tt/qc/n9ttqcpaiamrkxymjn8en76psiu.jpeg)
С ABBYY Mobile Web Capture этот бизнес-процесс можно упростить: сотруднику достаточно сфотографировать документ на смартфон, а затем отправить изображение на распознавание и обработку с помощью другого нашего продукта — ABBYY FlexiCapture. Так в итоге и время сэкономим, и качество данных повысим.
Если честно, я сама несколько раз сталкивалась с ситуациями, когда мне бы очень пригодилось сканирование документов прямо в браузере. Например, когда я год назад подавала заявление на визу, то потратила около часа, чтобы отснять все нужные документы, перекинуть их на компьютер, сохранить в нужном формате и загрузить на сайт. А так бы за 15 минут все просто сфотографировать можно было.
Очень надеюсь, что скоро ABBYY Mobile Web Capture будет использоваться на многих сайтах и поможет упростить задачи, требующие фотографирования документов!
Ольга Титова, Product owner Mobile SDK