vue qrcode reader

Набор компонентов Vue.js для обнаружения QR -кодов и различных других форматов штрих -кода прямо в браузере:

• QrcodeStream непрерывно сканирует кадры из потока камеры.

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

• QrcodeCapture - это классическое поле загрузки файлов, мгновенно сканируя все выбранные вами файлы.

Все компоненты отзывчивы. Кроме того, близко к нулевому стилю. Сделайте их подходящими для вашего макета. Использование простое и простое:

 <qrcode-stream @detect = "ondetect"> </qrcode-stream>

 Методы: {
  OnDetect (DeTACEDCODES) {// ...
  }}

Установка

С NPM

Бегать

 NPM Установить Vue-QrCode-Reader

Вы можете импортировать компоненты независимо

 Import {qrcodestream, qrcodedropzone, qrcodecapture} от 'vue-qrcode-reader'const mycomponent = {
  //
  Компоненты: {qrcodestream, qrcodedropzone, qrcodecapture}

  // ...}

или сразу зарегистрируйте их все во всем мире

 Import Vue от 'vue'import vueqrcodereader от' vue-qrcode-reader'vue.use (vueqrcodereader)

Без NPM

Включите следующий файл JS:

https://unpkg.com/vue-qrcode-reader/dist/vue-qrcode-reader.umd.js

Обязательно включите его после VUE:

 <script src = "./ vue.js"> </script> <script src = "./ vue-qrcode-reader.umd.js"> </script>

Все компоненты автоматически зарегистрированы во всем мире. Используйте шашлык, чтобы ссылаться на них в своих шаблонах:

 <qrcode-stream> </qrcode-stream> <qrcode-drop-zone> </qrcode-drop-zone> <qrcode-capture> </qrcode capture>

Устранение неполадок ⚡

Я не вижу камеру при использовании QrcodeStream .

• Проверьте, работает ли это на демо -странице. Особенно ошибки ручки демонстрируют, поскольку он отображает сообщения об ошибках.

• Демо работает, но в моем проекте не работает: прослушайте событие error , чтобы исследовать ошибки.

• Демонстрация не работает: тщательно просмотрите раздел поддержки браузеров выше. Может быть, ваше устройство просто не поддерживается.

Я запускаю Dev Server на Localhost. Как проверить на моем мобильном устройстве без HTTPS?

• Если ваша настройка является настольным Chrome + Android Chrome, используйте удаленную отладку, которая позволяет вашему устройству Android доступ к вашему локальному серверу в качестве Localhost.

• В противном случае используйте обратный прокси, такой как NGROK или SEERO, чтобы временно сделать ваш локальный сервер публично доступным с HTTPS.

• Существует также множество серверов без сервера/статического хостинга, в которых HTTPS включена по умолчанию и где вы можете развернуть свое веб -приложение бесплатно (например, страницы GitHub , страницы Gitlab , Google Firebase , NetLify , Heroku , Zeit Now , ...)

Некоторые из моих QR -кодов не обнаруживаются.

• Убедитесь, что вокруг QR -кода есть некоторые белые границы.

• Проверьте свои QR-коды в восходящих пакетах: barcode-detector > zxing-wasm > zxing-cpp и проблемы обнаружения файлов в репозитории самого высокого уровня, где возникает проблема.

1D штрих -коды не обнаруживаются.

Значение по умолчанию для formats - "['qr_code']" , которое отражает настройку до того, как была доступна опора formats . Вам нужно будет добавить другие форматы штрих -кода в эту опору, чтобы обнаружить эти типы штрих -кодов. Проверьте эту демонстрацию.

Как заставить его работать с Vue 2?

Поддержка отброшена, но вы можете понизить обновление до VUE-QRCODE-REARDER V3.* Или ниже.

Я получаю ошибку «не удалось принести» во время выполнения для некоторого файла WASM.

Этот файл WASM реализует детектор QR -кода. К сожалению, не очень удобно объединить этот файл с помощью пакета. Итак, по умолчанию мы приносим его во время выполнения из CDN. Это проблема для автономных приложений или приложений, которые работают в сети со строгой политикой CSP. Для обходного пути см.: #354

torch не поддерживается на моем устройстве, хотя у него есть фонарик.

Поддержка torch не соответствует устройствам, камерам и браузерам и операционным системам. На некоторых устройствах задняя камера поддерживает torch , но фронтальная камера нет, даже если фронтальная камера на самом деле имеет фонарик.

Кроме того, torch вообще не поддерживается на iOS (последний проверял iOS 17.1).

Посетите эту страницу со своим устройством. Список ссылок представляет все камеры, установленные на устройстве. Если вы нажмете, камера должна быть загружена. Под камерой видит объект «Возможности» JSON, напечатанный. Если он не содержит клавиши/пары значений "torch": true , то фонарик не поддерживается для этой камеры.

Этот объект JSON предоставил в качестве полезной нагрузки события camera-on .