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

Konstantin
Konstantin Ostrovsky
2018-12-19 14:16:32
70

Фотографии составляют большую часть информации в Интернете, особенно в современную эпоху. Некоторые из этих изображений состоят из узнаваемых областей, таких как человеческие лица, текст, штрих-коды и QR-коды. Эти области имеют много вариантов использования, но их обнаружение очень затратно в вычислительном отношении. К счастью, производители оборудования, особенно на мобильных устройствах, уже начали поддерживать эти функции на своих платформах. Они были использованы внескольких приложенях, таких как распознавание лиц в камерах, приложения для сканирования штрих-кодов и многие другие. С другой стороны, веб-приложения по-прежнему не имеют доступа к этим аппаратным возможностям, что делает необходимым использование вычислительно-требовательных библиотек и сторонних сервисов. API обнаружения лиц призван изменить это.

Мало кто знает, но в chrome с 2018-09-07 добавлена возможность распознавания лиц. Пока это лишь экспериментальная технология и для ее активации необходимо включить "экспериментальные возможности".
Начиная с Chrome 70 (бета-версия от 13 сентября 2018 года), API обнаружения формы уже доступен для Origin Trial. Это означает что пользователям Chrome старше 70 версии могут прямо сейчас начать пользоваться распознаванием образов, не включая никаких флагов.

 

Зачем?

В настоящее время очень популярными являются VR и AR технологии. Благодаря распознаванию образов, к примеру, сделаны маски и трансформации лиц в медиа-социальных сетях, таких как vk.com и instagram.com. До самого веба эта технология постепенно добирается. Уже есть множество frameworks для создания VR и AR приложений. Такие как A-frameWebVRPrimroseReact VR и Argon.js. Но стабильная нативная поддержка распознавания лиц в браузере это все равно круто и безусловно за этим будущее. 

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

Включаем экспериментальные возможности Chrome

Для включения экспериментальных возможностей перейдите по ссылке:  chrome://flags/#enable-experimental-web-platform-features

Включите экспериментальные возможности:

И перезапустите браузер. Проверить работоспособность можно вызвав в консоли класс FaceDetector. Если включены экспериментальные возможности, то класс будет доступен и Вы увидите следующее:

Использование

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

Источник изображения

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

  1. HTMLImageElement (<img>) - в этом случае будет использоваться статическое изображение. Если в ссылке будет находиться gif, то будет использоваться первый кадр анимации;
  2. HTMLVideoElement (<video>) - в качестве источника Вы можете использовать видео. В этом случае будет взят текущий кадр и с ним произведены операции. Соответственно если Вы хотите сделать realtime распознавание лиц в видео, то необходимо неоднократно находить и выделять лица для различных кадров;
  3. HTMLCanvasElement (<canvas>) - содержимое canvas в текущий момент будет использоваться для вычислительных операций.

 

Обнаружение лиц

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

const faceDetector = new FaceDetector ({ 
    maxDetectedFaces: 10, 
    fastMode: true 
});

FaceDetector принимает два необязательных аргумента:

  • maxDetectedFaces - максимальное количество лиц для поиска в источнике изображения;
  • fastMode - говорит браузеру попытаться установить приоритет скорости над точностью.

Затем метод FaceDetector экземпляра detect() можно использовать для обнаружения человеческих лиц из данного источника изображения.

const imageSource = document.querySelector ('img'); 
// так же Вы можете использовать <video> или <canvas> в качестве источника изображения
faceDetector.detect (imageSource) 
    .then (handleDetectedFaces) 
    .catch (console.error);

faceDetector.detect() возвращает Promise, в который принимается массив из объектов типа DetectedFace. Структура этого объекта следующая:

  • boundingBox - объект, описывающий прямоугольник, который указывает положение и границы на изображении, где было обнаружено лицо. Эти координаты можно использовать для графического отображения найденных координат, к примеру отрисовать их при помощи canvas.
  • landmarks - массив Landmark объектов. Ориентир - это интересная особенность распознавания. В этом массиве могут быть найденные элементы лица: нос, рот, глаза и т.д. Или не быть, если системе не удалось их распознать, в таком случае значение будет null.

Специально для Вас я подготовил пример работы класса FaceDetector:

Распознавание текста

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

Благодаря новому классу TextDetector, эта возможность стала доступна и в браузере. Класс TextDetector не имеет аргументов, соответственно чтобы создать экземпляр необходимо написать следующее:

const textDetector = new TextDetector();

Просто! Не так ли? У объекта класса TextDetector есть метод detect(), который позволяет определить текст по изображению. В качестве аргументов так же как и в FaceDetector можно передавать <img>, <canvas> и <video>. Возвращает функция detect() - Promise, аргументом в resolve передается объект типа DetectedText, который имеет следующие ключи:

  • boundingBox - объект, описывающий прямоугольник, который указывает положение и границы на изображении, где был обнаружен текст;
  • rawValue - строковое значение обнаруженного текста.

Пример работы класса TextDetector:

Распознавание QR-кодов

Достаточно давно технология передачи информации при помощи QR или BarCode является очень популярной. Полагаю потом что человеку легче сканировать изображение, чем писать ссылки на сайты или другую информацию вручную. Так же в ссылки в QR-кодах можно добавлять специальные метки для отслеживания и аналитики переходов. Это очень удобная и полезная технология. Сгенерировать QR-код можно даже онлайн, к примеру на этом сервисе.

Новый класс BarcodeDetector позволяет нам распознавать информацию, которую хранит BarCode. Класс TextDetector не имеет аргументов, соответственно чтобы создать экземпляр необходимо написать следующее:

const textDetector = new TextDetector();

У объекта класса BarcodeDetector есть метод detect(), который позволяет определить текст по BarCode. В качестве аргументов так же как и в FaceDetector можно передавать <img>, <canvas> и <video>. Возвращает функция detect() - Promise, аргументом в resolve передается объект типа DetectedBarcode, который имеет следующие ключи:

  • boundingBox - объект, описывающий прямоугольник, который указывает положение и границы на изображении, где был обнаружен штрих-код.
  • rawValue - строковое значение, которое было декодировано из штрих-кода.
  • cornerPoints - массив точек, соответствующих координатам каждого угла обнаруженного штрих-кода. Он начинается с верхнего левого угла и идет по часовой стрелке. Точки не обязательно представляют правильный прямоугольник или квадрат из-за искажений перспективы.

Пример работы класса BarcodeDetector:

Заключение

Технология распознавания образов все еще находится в стадии разработки, но полагаю в скором будущем будет представлена в Stable версии WebKit и тогда ее можно будет безопасно использовать в своих проектах. API распознавания образов - это отличное решение, которое вносит единообразие в проекты и исключает необходимость использования сторонних библиотек. 

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