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

    image

    Наши клиенты часто используют мобильный телефон, чтобы сфотографировать документ и отправить его в каршеринговую компанию, визовый центр, оператору связи, финансовым и другим компаниям. Фото документа достаточно, чтобы получить машину в аренду, активировать 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
    ABBYY
    103,53
    Решения для интеллектуальной обработки информации
    Поделиться публикацией

    Комментарии 30

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

      Я очень надеялся увидеть ссылки на репозиторий. Репозиторий — полезная штука, там можно увидеть issues, которые, могу помочь в случае возникновения багов и нестандартного поведения. Также issues, pull-requests, commits показывают жизнь проекта со всеми вытекающими.

      По указанной в статье ссылке открылась страница продукта.
      1. Выяснилось, что прямого доступа к SDK нет, нужно запросить пробную версию.
      2. Если есть пробная версия, значит, должна быть непробная платная, а цены я так найти и не смог.

        0
        Продукт и примеры кода в публичный репозиторий пока не выкладываем.
        Да, все верно, есть платная версия. Информацию о ценах можно получить от наших менеджеров по продажам, которые свяжутся после запроса пробной версии
          +11
          Вот лично я очень не люблю сервисы, где заранее нельзя узнать цену. «Вышлите заявку, мы рассмотрим, скажем вам цену. Большая компания- зарядим вам по полной, маленькая- поменьше, студент недоучка — так, даром отдадим». Гораздо удобнее когда ценник известен и для всех один, к примеру, 10 баксов за 10К сканов. Всем все понятно.
            +1
            Было дело, что по работе требовалось организовать распознавание документов на сервере. С большими объемами ежедневно. В качестве одного из кандидатов рассматривался ваш продукт. Ценник по запросу. Связался с менеджерами. Они долго решали какой ценник выдать, потом долго согласовывали что войдет в функционал (хотя задача простая: на наших серверах обеспечить распознавание картинок в форматированный текст в объемах около 10 тыс. листов ежедневно). Менеджеры регулярно пропадали из связи, и приходилось активно их тормошить. Короче, после полумесяца переписок и согласований (финального ценника так и не смогли назвать) было принято решение использовать продукты от конкурентов (не буду их тут рекламировать). Там цена была прозрачна с самого начала.
            Вот вам и цена по запросу в исполнении ABBYY.
              0
              Сожалеем о такой ситуации и хотим подробнее в ней разобраться, чтобы такое больше не происходило. Написали вам в личные сообщения, чтобы узнать подробности и передать их нашему отделу оценки качества.
          0
          Зачем устанавливать приложения для сканирования на телефон, если они там стоят из коробки?
            0
            Во-первых, не на всех телефонах. А во-вторых, часто приложения, которые визуально улучшают фотографии, на самом деле негативно влияют на распознавание. Не всегда, если документ выглядит «лучше», он лучше распознается. А наш SDK вместо предобработок просто находит правильный момент, когда сфотографировать документ
              0

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

                0
                Передали пожелания автору статьи. Посмотрим, что можем сделать.
            –1
            А я своей жене просто посоветовал отдавать заказчику перевод в том же качестве, что и оригинал.
            Если человек ленится купить сканер — это на 100% его личные трудности.
              +3
              Другое дело, если человек всегда этот сканер таскает с собой, и, когда надо зарегистрироваться на очередном каршеринге посреди Екатеринбурга достаёт его и сканирует паспорт. Вот это хороший, неленивый человек! Побольше бы таких.
                0
                Очередном? В этом городе их всего 3, если мне память не изменяет.
                Правда, в этом году еще велошеринг и самокатошеринг появились, но оно такое…
              0

              Мне кажется или это трансграничная передача данных? Или это приложение не для РФ?

                0
                Так вроде хостинг может быть в разных регионах (облачный)
                  0

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

                    +1
                    Захват и обрезка на стороне клиента же происходят — локально, в «оффлайне». А дальше куда хотите, туда и отправляйте. Если интересует именно дальнейшая обработка через FlexiCapture, то там тоже есть возможность разворачивать сервер на стороне заказчика, а не в облаке.
                      +1
                      Да, как верно написал apachik, наш SDK работает на клиенте и выполняет захват изображения. Результат — картинка. Дальше ее можно отправить куда угодно, хоть в облако, хоть на свой локальный сервер. Кстати, в составе дистрибутива Mobile Web Capture как раз есть пример кода, который показывает, как отправить данные в локально развернутый FlexiCapture
                  0
                  Кот на картинке выглядит как хомяк:)
                    0

                    Не хватает ссылки на какой-нибудь тестовый сайт, где можно посмотреть, как работает технология. Хотя идея кажется правильной.

                      +1
                      Я бы не стал пользоваться приложением, которое отправляет мои документы (ВАЖНЫЕ документы!) куда попало в интернет.
                        0
                        ABBYY Mobile Web Capture не отправляет документы «куда попало в интернет».
                        Клиент заходит на сайт организации (например, банк или визовый центр), чтобы сфотографировать, допустим, паспорт и отправить документ в эту организацию. В браузере SDK захватывает и выравнивает документ, а далее клиент отправляет изображение документа в эту компанию. Она может хранить изображения документов в облаке или на локальном сервере.
                        0
                        Гораздо проще сфотографировать документ прямо в мобильном браузере

                        Гораздо лучше не давать браузеру разрешений на использование камеры а пользоваться стандартным приложением для фотографирования.
                          +1
                          Воспользуюсь случаем задать вопрос: вы тут только телефоны обсуждаете, а для настольных компьютеров что-нибудь похожее есть?
                          У меня есть несколько тысяч фотографий страниц книг, из них хочется собрать книги в наиболее читаемом виде с наименьшими затратами сил. И, желательно, с OCR слоем.
                            +1
                            Добрый день! Для этой задачи подойдет ABBYY FineReader. Он, например, поможет обработать и улучшить качество фотографий книжных страниц (если необходимо), распознать текст на фотографиях, получить PDF с текстовым слоем и объединить файлы в один или несколько документов. Можно даже будет перевести документ/ы в один из форматов электронных книг (или в другие форматы).
                              0
                              Спасибо, именно им и пытаюсь пользоваться. Но, к сожалению, я не нашёл, его уговорить автоматически вырезать страницу из такой, например, фотографии:
                              пример страницы
                              image

                              CamScaner с этим справляется, так что задача, видимо, несложная.
                                0
                                Спасибо за пример страницы. Для работы с такими фотографиями рекомендуем использовать Редактор изображений – там вы можете скорректировать разрешение (увеличить до 300 dpi), предобработать фото, в т.ч. удалить трапециевидные искажения, повысить контрастность и вручную выделить область распознавания.
                                  0
                                  Спасибо, я примерно так и делаю. Но «вручную» — это очень долго.
                                  А если сначала исправлять искажения CamScaner на телефона, а потом распознавать их через FineReader, то качество теряется.
                            0
                            Совсем недавно получил от вас триал на SDK под Андроид.
                            По функционалу — не нашел, как научить реагировать на конкретный документ. Т.е. чтобы фотографирование происходило только, если показать паспорт Германии, а все другие паспорты игноировало.
                            Сейчас же автоматом фоткает все, что угодно, даже excel-таблицу. Причем, таблица видна только на полэкрана. Не спорю, эти полтаблицы получаются в хорошем качестве.
                              0
                              Сейчас в продукте нельзя указать, какой именно документ должен захватываться.
                              В ближайшем обновлении мы планируем расширить функциональность и добавить возможность указать минимальное/максимальное соотношение сторон документа, который необходимо захватить. Это позволит реализовать сценарий «захватывать только паспорта».

                              Но «захватывать только паспорт Германии» — это более сложная задача, которая включает не только поиск границ, но и классификацию содержимого документа. Часто это требуется для случая, когда данные еще и распознать нужно прямо на устройстве. Поэтому в будущем мы планировали дополнить метод распознавания ID документов захватом картинки.
                              А Вам нужно только захватить изображение или распознавание на телефоне тоже интересует?
                                0
                                Интересует захват изображения + распознавание.
                                Т.е. флоу такой — клиент фоткает документ, фотография парсится и заполняются определенные поля внутри мобильного приложения.
                                У нас несколько приложений для разных стран, где нужно реализовать подобный сценарий.

                                По захвату конкретного документа — сложность в том, что существует несколько типов даже внутри одной страны. Возьмем Украину: есть ID-карта, есть паспорт, причем паспорт может быть заполнен вручную, а может быть пропечатан. Итого — 3 вида документов для одного типа для одной страны.

                                Тестировали ваш sdk на предмет распознавания рукописно заполненного паспорта — все плохо, не распознает.

                            Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                            Самое читаемое