Когда я начинал проект html5-qrcode, моей целью было упростить реализацию сканирования QR-кода в веб-приложениях. Я хотел абстрагироваться от внутренних деталей доступа к камере в HTML5 и ее связи с библиотекой сканирования. Некоторые разработчики начали внедрять библиотеку и использовать ее в своих продуктах. В целом, тенденция к внедрению, похоже, заключалась в том, что пользователи пытались воспроизвести демонстрационный код. Библиотека сохраняла состояние и требовала ряда шагов, чтобы связать ее с пользовательским интерфейсом. В последней версии я реализовал другую оболочку под названием Html5QrcodeScanner, которая позволяет разработчикам интегрировать сканирование QR-кода с ~ 5 строками кода. Нет больше состояния!

Еще одна ключевая причина, по которой я реализовал эту сквозную оболочку, заключалась в том, что я начал получать запросы о том, как можно использовать библиотеку с популярными фреймворками, такими как VueJs или Webpack. Наличие сквозного уровня значительно упрощает модульное преобразование этого компонента в отдельный компонент и включение его в существующее приложение. В будущем я планирую расширить примеры для других фреймворков, таких как React и Angular.

Эта статья импортирована из оригинальной статьи на blog.minhazav.dev/qr-code-scanner-end-to-end/

Какие новости?

Введен Html5QrcodeScanner класс для добавления сквозного сканирования QR-кода в существующее веб-приложение. Он написан поверх существующего класса Html5Qrcode, который каждый может продолжать использовать с пользовательским интерфейсом своего приложения. Html5QrcodeScanner поддерживает все функции Html5Qrcode вроде

  • Встроенное сканирование с использованием видеопотока с камеры или веб-камеры
  • Сканирование локального изображения
  • Сканирование медиафайлов, снятых с камеры на мобильных устройствах

Проверьте демонстрацию на blog.minhazav.dev/research/html5-qrcode.

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

Включите библиотеку и HTML-элемент-заполнитель

<div id="qr-reader" style="width:400px"></div> 
<! — include the library — >
<script src="https://unpkg.com/html5-qrcode/minified/html5-qrcode.min.js"></script>

Инициализировать в javascript

Теперь вы можете настроить сканер с этими 4 lines of code.

function onScanSuccess(qrCodeMessage) { /** decoded message */ }
var html5QrcodeScanner = new Html5QrcodeScanner(
    "qr-reader", { fps: 10, qrbox: 250 });
html5QrcodeScanner.render(onScanSuccess);

Если вам интересно, что изменилось, ознакомьтесь с этой статьей о том, как использовать Html5Qrcode

Интеграция с другими фреймворками

В общем, я считаю, что эту библиотеку можно подключить к формату, которого ожидают разные фреймворки. Я начал с VueJs на основе запроса функции # 49.

Использование с VueJs

Я не эксперт по VueJs, но я пробовал реализовать библиотеку как компонент Vue. Проверьте mebjas / html5-qrcode / examples / vuejs для полной справки.

По сути, идея состоит в том, чтобы обернуть поведение библиотеки в компонент и использовать его в приложении.

Vue.component('qrcode-scanner', {
     props: {
         qrbox: Number,
         fps: Number,
     },
     template: `<div id="qr-code-full-region"></div>`,
     mounted: function () {
         var $this = this;
         var config = { fps: this.fps ? this.fps : 10 };
         if (this.qrbox) {
             config['qrbox'] = this.qrbox;
         }
         function onScanSuccess(qrCodeMessage) {
             $this.$root.$emit('decodedQrCode', qrCodeMessage);
         }
         var html5QrcodeScanner = new Html5QrcodeScanner(
             "qr-code-full-region", config);
         html5QrcodeScanner.render(onScanSuccess);
     }
});

Затем этот компонент можно добавить в HTML как

<qrcode-scanner
      v-bind:qrbox="250"
      v-bind:fps="10"
      style="width: 500px;"> </qrcode-scanner>

Я не знаю, правильный ли это способ делать что-то во Vue, но это работает FWIW.

Планы на будущее

  • Добавить примеры для интеграции React
  • Добавить примеры для угловой интеграции
  • Добавить примеры использования с webpack - №54
  • Добавьте подробности о том, как использовать с Android Webview - # 58, # 57
  • Исправьте большинство открытых проблем по адресу - mebjas / html5-qrcode / issues

Как внести свой вклад

Если вы взволнованы или заинтересованы, вы можете внести свой вклад в этот проект:

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

Полная демонстрация

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

Статьи по Теме

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