В прошлом такие API-интерфейсы, как MediaDevices.getUserMedia (), API чтения локальных файлов, позволяли довольно легко захватывать изображения и обрабатывать их. Это сделало возможными библиотеки типа @ mebjas / html5-qrcode, которые сегодня позволяют разработчикам легко интегрировать возможности сканирования QR-кода или штрих-кода в свои веб-приложения. Несколько разработчиков использовали библиотеку для создания приложений Android с помощью Cordova. Теперь Группа сообщества инкубатора веб-платформы представила черновик API-интерфейсов детектора формы, цель которого - предоставить доступ к ускоренным детекторам форм (например, человеческие лица, QR-коды, штрих-коды и т. Д.) Для неподвижных изображений и потоков изображений в реальном времени. Это особенно интересно для мобильных устройств, которые сегодня поставляются с аппаратными микросхемами, которые обладают высокой производительностью при определенных задачах, таких как обнаружение лиц, штрих-кодов, текстов и т. Д. В этой статье я объяснил, как использовать новую библиотеку BarcodeDetector и как ее можно использовать напрямую. с html5-qrcode и какое улучшение производительности мы видим по сравнению с ZXingJS библиотекой.

Рисунок. Сканирование QR-кода широко используется в мире после заражения Covid19, чтобы обеспечить обмен информацией без контактов.

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

Кстати, если вас интересует веб-сканер QR-кода или штрих-кода, попробуйте: https://scanapp.org.

Важные заметки

Shape detector APIs все еще находятся в стадии разработки, а не W3C standard, не на треке стандартов W3C. Эту функцию по-прежнему можно включить в библиотеке, поскольку она вернется к использованию детектора на основе ZXing, если библиотека BarcodeDectector недоступна.

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

BarcodeDetector представляет собой базовый компонент ускоренной платформы для обнаружения линейных или двумерных штрих-кодов на изображениях. Он обеспечивает одну detect() операцию над ImageBitmapSource, результатом которой является Promise.

Источник: wicg.github.io/shape-detection-api/

Проект предложения предполагает, что основные системные API, такие как com.google.android.gms.vision.barcode, CIQRCodeFeature или VNDetectBarcodesRequest, будут действовать как базовые компоненты.

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

Как пользоваться

API BarcodeDetector имеет следующий интерфейс (на основе документации):

Пример использования в Javascript будет выглядеть так:

Поддерживаемые форматы

Спецификация библиотеки поддерживает различные форматы кода 2D и 1D, такие как QR Code, Aztec, code_128, code_39 и т. Д. Полный список всех поддерживаемых форматов приведен здесь.

Важно. Хотя спецификация определяет поддержку форматов API, фактическая поддержка зависит от реализаций браузера и устройства. Список поддерживаемых форматов всегда следует сначала запрашивать с помощью BarcodeDetector.getSupportedFormats() API.

Совместимость

Совместимость по состоянию на 20 июня 2020 г.

Рисунок: Совместимость API, источник - developer.mozilla.org

Поддержка в @ mebjas / html5-qrcode

Я узнал об этом API, когда AlfonsoML@ подал в проект запрос функции # 195, чтобы добавить поддержку BarcodeDetector API.

Связан ли ваш запрос функции с проблемой? Опишите, пожалуйста.

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

…

Мне, как автору проекта, было очень интересно увидеть, как в Интернете появилась поддержка аппаратного ускорения для повышения производительности в очень распространенных в сегодняшнем мире сценариях использования. Текущий декодер на основе ZXing требует ~350+ms для сканирования одного канала, что приводит к менее чем идеальной производительности в реальном времени. И, кроме того, обидно, если веб-приложения не могут использовать точную поддержку, доступную на оборудовании.

В запросе на вытягивание # 238 я добавил поддержку использования BarcodeDetector API, если он поддерживается браузером, после исследования производительности (см. Результаты ниже). Он поддерживается как в классах Html5Qrcode, так и в Html5QrcodeScanner (подробнее о том, как использовать Html5Qrcode для сканирования QR и штрих-кодов в javascript с помощью нескольких строк кода).

Использование этого API теперь поддерживается библиотекой в ​​качестве экспериментальной функции. Экспериментальная функция:

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

Как использовать это в библиотеке

Его можно включить с помощью новой конфигурации под названием useBarCodeDetectorIfSupported, добавленной в experimentalFeatures группу конфигураций. По умолчанию он выключен (value = false). Если установлено значение «включено» (value = true) и BarcodeDetector поддерживается браузером, он будет использоваться для сканирования всех видов одномерных и двухмерных кодов.

Html5Qrcode класс

Html5QrcodeScanner класс

Представление

Я провел тест производительности на разных устройствах, чтобы увидеть, насколько BarcodeDecoder API работает по сравнению с неускоренной библиотекой на основе ZXingJS. Цифры ниже - это среднее время, которое потребовалось для декодирования любого заданного изображения для поддерживаемого QR-кода или штрих-кодов в миллисекундах.

На всех устройствах и браузерах, где он поддерживался (например, Safari на Macbook pro Big Sur еще не поддерживает этот API), BarcodeDetector API работал лучше, чем библиотека на основе ZXing.

Демо

Вы можете найти встроенную демонстрацию в исходной статье по адресу: https://blog.minhazav.dev/Using-BarcodeDecoder-in-javascript/#embedded-demo

Смотрите полномасштабную демонстрацию на qrcode.minhazav.dev

Вывод

  • BarcodeDetector - это простая в использовании библиотека WIP, которая в будущем будет очень полезна как разработчикам, так и пользователям.
  • Если этот API начнет получать более широкое распространение в браузерах и на оборудовании, я буду рад перенести его из экспериментального в более хорошо протестированный и документированный набор функций.

Рад слышать, что вы думаете об этом в разделе комментариев!

использованная литература

Первоначально опубликовано на https://blog.minhazav.dev 20 июня 2021 г.