API распознавания фигур: изображение стоит тысячи слов, лиц и штрих-кодов

API обнаружения формы обнаруживает лица, штрих-коды и текст на изображениях.

Томас Штайнер

Что такое API обнаружения формы?

Благодаря таким API, как navigator.mediaDevices.getUserMedia и средству выбора фотографий Chrome для Android, стало довольно легко захватывать изображения или видеоданные в реальном времени с камер устройств или загружать локальные изображения. До сих пор эти динамические данные изображения, а также статические изображения на странице, не были доступны для кода, хотя изображения на самом деле могут содержать множество интересных функций, таких как лица, штрих-коды и текст.

Например, раньше, если разработчики хотели извлечь такие функции из клиента для создания устройства чтения QR-кода , им приходилось полагаться на внешние библиотеки JavaScript. Это может оказаться дорогостоящим с точки зрения производительности и увеличить общий вес страницы. С другой стороны, операционные системы, включая Android, iOS и macOS, а также аппаратные чипы, находящиеся в модулях камер, обычно уже имеют производительные и высокооптимизированные детекторы функций, такие как Android FaceDetector или универсальный детектор функций iOS, CIDetector .

API обнаружения формы предоставляет эти реализации через набор интерфейсов JavaScript. В настоящее время поддерживаются следующие функции: распознавание лиц через интерфейс FaceDetector , обнаружение штрих-кода через интерфейс BarcodeDetector и обнаружение текста (оптическое распознавание символов (OCR)) через интерфейс TextDetector .

Рекомендуемые варианты использования

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

Распознавание лиц

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

Обнаружение штрих-кода

  • Веб-приложения, считывающие QR-коды, могут открывать интересные варианты использования, такие как онлайн-платежи или веб-навигация, или использовать штрих-коды для установления социальных связей в приложениях обмена сообщениями.
  • Приложения для покупок могут позволить своим пользователям сканировать штрих-коды EAN или UPC товаров в физическом магазине, чтобы сравнивать цены в Интернете.
  • В аэропортах могут быть установлены веб-киоски, где пассажиры смогут сканировать ацтекские коды своих посадочных талонов и получать персонализированную информацию, связанную с их рейсами.

Обнаружение текста

  • Сайты социальных сетей в Интернете могут улучшить доступность содержимого изображений, созданных пользователями, путем добавления обнаруженных текстов в качестве атрибутов alt для тегов <img> , когда другие описания не указаны.
  • Контентные сайты могут использовать обнаружение текста, чтобы избежать размещения заголовков поверх главных изображений, содержащих текст.
  • Веб-приложения могут использовать обнаружение текста для перевода текстов, таких как, например, меню ресторана.

Текущий статус

Шаг Статус
1. Создайте объяснитель Полный
2. Создайте первоначальный проект спецификации. Полный
3. Соберите отзывы и доработайте дизайн В ходе выполнения
4. Пробная версия происхождения Полный
5. Запуск Обнаружение штрих-кода завершено
Выполняется распознавание лиц
Выполняется обнаружение текста

Как использовать API обнаружения формы

Если вы хотите поэкспериментировать с API распознавания фигур локально, включите флаг #enable-experimental-web-platform-features в about://flags .

Интерфейсы всех трёх детекторов FaceDetector , BarcodeDetector и TextDetector схожи. Все они предоставляют один асинхронный метод, называемыйDetect detect() , который принимает ImageBitmapSource в качестве входных данных (то есть CanvasImageSource , Blob или ImageData ).

Для FaceDetector и BarcodeDetector конструктору детектора можно передать дополнительные параметры, которые позволяют предоставлять подсказки базовым детекторам.

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

Работа с BarcodeDetector

BarcodeDetector возвращает необработанные значения штрих-кода, которые он находит в ImageBitmapSource и ограничивающих прямоугольниках, а также другую информацию, например форматы обнаруженных штрих-кодов.

const barcodeDetector = new BarcodeDetector({
  // (Optional) A series of barcode formats to search for.
  // Not all formats may be supported on all platforms
  formats: [
    'aztec',
    'code_128',
    'code_39',
    'code_93',
    'codabar',
    'data_matrix',
    'ean_13',
    'ean_8',
    'itf',
    'pdf417',
    'qr_code',
    'upc_a',
    'upc_e'
  ]
});
try {
  const barcodes = await barcodeDetector.detect(image);
  barcodes.forEach(barcode => searchProductDatabase(barcode));
} catch (e) {
  console.error('Barcode detection failed:', e);
}

Работа с FaceDetector

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

const faceDetector = new FaceDetector({
  // (Optional) Hint to try and limit the amount of detected faces
  // on the scene to this maximum number.
  maxDetectedFaces: 5,
  // (Optional) Hint to try and prioritize speed over accuracy
  // by, e.g., operating on a reduced scale or looking for large features.
  fastMode: false
});
try {
  const faces = await faceDetector.detect(image);
  faces.forEach(face => drawMustache(face));
} catch (e) {
  console.error('Face detection failed:', e);
}

Работа с TextDetector

TextDetector всегда возвращает ограничивающие рамки обнаруженного текста, а на некоторых платформах — распознанные символы.

const textDetector = new TextDetector();
try {
  const texts = await textDetector.detect(image);
  texts.forEach(text => textToSpeech(text));
} catch (e) {
  console.error('Text detection failed:', e);
}

Обнаружение функций

Простой проверки наличия конструкторов для обнаружения API-интерфейса обнаружения формы недостаточно. Наличие интерфейса не говорит о том, поддерживает ли базовая платформа эту функцию. Это работает так, как задумано . Вот почему мы рекомендуем подход защитного программирования , выполняя обнаружение функций следующим образом:

const supported = await (async () => 'FaceDetector' in window &&
    await new FaceDetector().detect(document.createElement('canvas'))
    .then(_ => true)
    .catch(e => e.name === 'NotSupportedError' ? false : true))();

Интерфейс BarcodeDetector был обновлен и теперь включает метод getSupportedFormats() , а аналогичные интерфейсы были предложены для FaceDetector и TextDetector .

await BarcodeDetector.getSupportedFormats();
/* On a macOS computer logs
  [
    "aztec",
    "code_128",
    "code_39",
    "code_93",
    "data_matrix",
    "ean_13",
    "ean_8",
    "itf",
    "pdf417",
    "qr_code",
    "upc_e"
  ]
*/

Это позволяет вам определить конкретную функцию, которая вам нужна, например, сканирование QR-кода:

if (('BarcodeDetector' in window) &&
    ((await BarcodeDetector.getSupportedFormats()).includes('qr_code'))) {
  console.log('QR code scanning is supported.');
}

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

Поддержка операционной системы

Обнаружение штрих-кода доступно на macOS, ChromeOS и Android. Сервисы Google Play обязательны для Android.

Лучшие практики

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

Если вы являетесь поклонником Web Workers , вы будете рады узнать, что там также есть детекторы. Результаты обнаружения сериализуемы и, таким образом, могут быть переданы от работника к основному приложению через postMessage() . Демо показывает это в действии.

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

Обратная связь

Команда Chrome и сообщество веб-стандартистов хотят услышать о вашем опыте работы с API определения формы.

Расскажите нам о дизайне API

Что-то в API работает не так, как вы ожидали? Или вам не хватает методов или свойств, необходимых для реализации вашей идеи? У вас есть вопрос или комментарий по модели безопасности?

Проблема с реализацией?

Вы нашли ошибку в реализации Chrome? Или реализация отличается от спецификации?

  • Сообщите об ошибке на https://new.crbug.com . Обязательно включите как можно больше деталей, простые инструкции по воспроизведению и установите для параметра «Компоненты» значение Blink>ImageCapture . Glitch отлично подходит для быстрого и простого обмена репродукциями.

Планируете использовать API?

Планируете использовать API распознавания фигур на своем сайте? Ваша публичная поддержка помогает нам расставлять приоритеты для функций и показывает другим поставщикам браузеров, насколько важно их поддерживать.

Полезные ссылки