Сканирование QR-кода HTML5 с помощью javascript

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

В 2015 году я написал библиотеку для сканирования QR-кодов на основе HTML5 в качестве расширения jQuery. Недавно я заметил, что на моем проекте на Github и демонстрационной странице наблюдается постоянный трафик. Когда я углубился в суть происходящего, мне стало стыдно за плохой дизайн и устаревшую поддержку последних HTML API вокруг Camera. Недавно я исправил некоторые проблемы и подверг рефакторингу библиотеку javascript, которая теперь не зависит от jQuery и поддерживает API на основе Promise.

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

  • Удалена зависимость от jQuery
  • Переработаны API, чтобы возвращать Promise, а не основываться исключительно на обратных вызовах.

Вступление

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

Данная javascript библиотека позволяет пользователям добавлять сканер QR-кодов в свои веб-приложения. Она работает кросс-платформенно и на различных устройствах, таких как PC, Mac или смартфоны. Он использует поток с камеры и пытается декодировать кадры с определенной частотой (настраиваемой) и уведомляет вызывающую сторону о результатах через обратные вызовы. Запрос разрешений на камеру в браузерах обычно приводит к появлению всплывающего диалогового окна с запросом разрешений и может быть использован только в том случае, если пользователь их предоставит.

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

Загрузите код Javascript или используйте версию на Github

Код размещен по адресу mebjas/html5-qrcode на Github. Вы можете скачать библиотеку и добавить ее в свою кодовую базу со страницы релиза или использовать ее напрямую:

Я настоятельно рекомендую использовать минифицированную версию по следующим причинам:

  • Она меньше по размеру и загружается быстрее.
  • Фактический код html5-qrcode.js написан с использованием ECMAScript, который поддерживается только в последних версиях браузеров. Он может не поддерживаться в более старых браузерах. Минифицированный скрипт был транспонирован с помощью Babel.

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

Добавьте элемент palceholder в HTML

Добавьте пустой HTML-элемент в соответствующую позицию в вашем HTML-коде, задайте ему id. Библиотека использует этот элемент для вставки некоторых скрытых HTML-элементов, которые отображаются в виде видоискателя (вход камеры отображается в этом HTML-элементе) для пользователя, выполняющего сканирование QR-кода.

Перечислите все доступные камеры

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

Возвращаемый объект представляет собой массив Object со следующими полями:

  • id: Id камеры. Это необходимо для начала сканирования QR-кода
  • label: Метка для камеры. Это человекочитаемое название устройства камеры, например Front Camera или Back Camera.

Получив cameraId, вы можете выполнять операции запуска/остановки.

Запуск камеры неявно запускает сканирование QR-кода. Она работает с определенной скоростью fps (кадр в секунду), указанной в аргументе конфигурации. Это необязательное поле, и по умолчанию сканер работает со скоростью 2 fps.

Чтобы начать сканирование, необходимо создать экземпляр Html5Qrcode и вызвать API start(). Этот метод возвращает Promise, который срабатывает, когда начинается сканирование QR-кода: В реальном времени начинает отображаться лента и начинается сканирование QR-кода. Когда код обнаружен, вызывается обратный вызов qrCodeSuccessCallback, а когда он не обнаружен, вызывается обратный вызов qrCodeErrorCallback.

Аргумент конфигурации в методе start() может влиять как на поведение сканирования, так и на пользовательский интерфейс. В данный момент есть два необязательных свойства, если они вам не нужны, вы можете просто передать пустой объект типа {}.

fps – Integer, пример = 10

Также известно как кадр в секунду. Значение по умолчанию равно 2, но его можно увеличить для более быстрого сканирования. Увеличение до очень высокого значения может повлиять на производительность. Значение >1000 просто не будет работать. Идеальным значением для этого параметра может быть 10.

qrbox – целое число, пример = 250

Используйте это свойство, чтобы ограничить область видоискателя, которую вы хотите использовать для сканирования. Остальная часть видоискателя будет затенена и проигнорирована сканером QR-кодов. Например, передав config { qrbox : 250 }, экран будет выглядеть следующим образом:

Это необязательное свойство, если ничего не передавать, то сканер будет сканировать всю область видоискателя.

Чтобы остановить сканирование, используйте метод stop()

Метод stop() в Html5Qrcode возвращает Promise, который завершается, когда видеопоток закрыт и удерживаемые ресурсы освобождены.

Эта функция должна быть вызвана только после успешного запуска QR Code.

Для большей ясности я выложил код javascript, используемый в демонстрации, в этом gist.

Этот код использует jQuery, но он не очень нужен.

Статья взята с сайта: jsinthebits.com

Добавить комментарий