Когда я начинал проект 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 (он основан на этом проекте).
Статьи по Теме
- Демонстрация: сканер QR-кода HTML5
- Сканирование HTML5 QR-кода с помощью javascript - запущена версия 1.0.1
- Добавлена поддержка сканирования локального файла и использования камеры по умолчанию (v1.0.5)
Первоначально опубликовано на https://blog.minhazav.dev 27 июня 2020 г.