В прошлом году, незадолго до саммита разработчиков Chrome, ко мне подошел Мигель Касас и показал мне нечто поразившее меня: Обнаружение лиц в браузере с использованием API обнаружения форм. Вскоре после этого было добавлено Обнаружение штрих-кода, которое позволило мне обновить мой Сканер QR-кода, чтобы мне больше не приходилось включать массивный (хотя и потрясающий) порт библиотеки сканирования QR-кодов.

API обнаружения формы все еще находится в разработке, и ни FaceDetection, ни API обнаружения штрих-кода недоступны вне экспериментов (вам нужно включить «Экспериментальные функции веб-платформы» в chrome: // flags), но это очень интересное место для просмотра и просмотра. увидеть, что еще одна возможность платформы открывается для разработчиков и пользователей в Интернете.

Последнее дополнение - Text Detection API, который берет изображение и сканирует его на предмет читаемого текста. Видео в верхней части этой статьи - отличный пример (обратите внимание, я украл часть кода у Мигеля, но вложил в него свое собственное мнение, особенно часть синтеза).

Модель точно такая же, как API обнаружения лиц и штрих-кода, вы получаете изображение (объект img, canvas или ImgData) и передаете его в экземпляр того типа детектора, который хотите использовать. Вы можете обработать результаты и выполнить некоторые действия с данными (например, нарисовать изображение, на котором был обнаружен элемент). В этом случае результатом является массив DetectedText, который вы можете использовать для извлечения того, какой текст был обнаружен.

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

API не так уж и сложен. Если вы хотите что-то реализовать самостоятельно, выполните следующие действия:

1. Получите доступ к камере.

Запросите список медиаустройств и выберите первую камеру, которая находится на передней панели (примечание: есть более эффективные способы сделать это).

navigator.mediaDevices.enumerateDevices()
  .then((devices) => {
    let thedevice;
    for(let device of devices) {
      if (device.kind == 'videoinput') {
        thedevice = navigator.mediaDevices.getUserMedia({
          "video": {
            deviceId: {exact : device.deviceId},
            width: { max: 640 }
          }
        });
      }
    }
    return thedevice;
})

2. Сделайте снимок в полном разрешении.

capturer = new ImageCapture(theStream.getVideoTracks()[0]);
capturer.grabFrame().then(frame => {  /* */  })

3. Создайте TextDetector и начните обнаружение.

var textDetector = new TextDetector();
return textDetector.detect(frame).then(boundingBoxes => { /* */ })

4. Обработка результатов

Для каждого обнаруженного элемента и элемент появится в массиве, который передается в Promise, возвращаемый функцией обнаружения. Затем вы можете пройтись по этому массиву, найти, где они расположены на изображении, и получить доступ к обнаруженным данным.

for(let box of boundingBoxes) {
  // box.boudingBox => DOMRect
  speechSynthesis.speak(new SpeechSynthesisUtterance(box.rawValue));
}

Ага, я в восторге!

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

Что бы вы сделали с этим API?

Первоначально опубликовано в Рассказах защитника разработчиков о рассказах защитника разработчиков