В прошлом году, незадолго до саммита разработчиков 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?
Первоначально опубликовано в Рассказах защитника разработчиков о рассказах защитника разработчиков