Сканирование 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. Вы можете скачать библиотеку и добавить ее в свою кодовую базу со страницы релиза или использовать ее напрямую:

<script src="https://raw.githubusercontent.com/mebjas/html5-qrcode/master/minified/html5-qrcode.min.js"></script>

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

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

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

<script src="./jsqrcode-combined.js"></script>

<script src="./html5-qrcode.js"></script>

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

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

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

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

// This method will trigger user permissions

Html5Qrcode.getCameras().then(cameras => { 

    /** 

      * devices would be an array of objects of type: 

      * { id: "id", label: "label" }

      */

      if (devices && devices.length) {

          var cameraId = devices[0].id; 

          // .. use this to start scanning.

       }

  }).catch(err => { 

      // handle err

  });

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

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

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

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

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

// Create instance of the object. The only argument is the "id" of HTML element created above.

const html5QrCode = new Html5Qrcode("reader");

html5QrCode.start(

    cameraId, // retreived in the previous step. 

    {

        fps: 10, // sets the framerate to 10 frame per second

        qrbox: 250 // sets only 250 X 250 region of viewfinder to 

                   // scannable, rest shaded. 

    },

    qrCodeMessage => { 

        // do something when code is read. For example: 

        console.log(`QR Code detected: ${qrCodeMessage}`); 

    },

    errorMessage => {

        // parse error, ideally ignore it. For example: 

        console.log(`QR Code no longer in front of camera.`);

    })

    .catch(err => {

        // Start failed, handle it. For example, 

        console.log(`Unable to start scanning, error: ${err}`);

    });

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

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

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

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

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

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

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

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

html5QrCode.stop().then(ignore => { 

  // QR Code scanning is stopped. 

    console.log("QR Code scanning stopped.");

}).catch(err => {

    // Stop failed, handle it. 

    console.log("Unable to stop scanning.");

});

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

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

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

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