Загрузка html5 qrcode - Загрузка исходного кода html5 qrcode

html5 qrcode

Другой исходный код

Version 2.3.8

Скачать

Html5-QRCode

Важно - Ищем новых владельцев для этого проекта.

Если интересно, пишите по адресу [email protected] .

Html5-QRCode

Важно. Проект находится в режиме обслуживания до дальнейшего уведомления. В настоящее время автор не сможет вносить какие-либо исправления ошибок или улучшения. Запросы на включение также пока не будут объединяться. Если у вас есть форк, который вы можете поддерживать, поделитесь подробностями с нами по адресу [email protected]. Я с удовольствием рекламирую их здесь! Хорошо, используйте проект как есть. Пример: scanapp.org.

Легкая и кроссплатформенная библиотека сканирования QR-кодов и штрих-кодов для Интернета

Используйте эту легкую библиотеку, чтобы легко/быстро интегрировать QR-код, штрих-код и другие распространенные возможности сканирования кода в ваше веб-приложение.

Ключевые моменты

? Поддержка сканирования различных типов штрих-кодов и QR-кодов.
? Поддерживает различные платформы, будь то Android, IOS, MacOs, Windows или Linux.
Поддерживает различные браузеры, такие как Chrome, Firefox, Safari, Edge, Opera...
? Поддерживает сканирование с помощью камеры, а также локальных файлов.
➡️ Поставляется со сквозной библиотекой с пользовательским интерфейсом, а также с библиотекой низкого уровня, с помощью которой можно создать свой собственный пользовательский интерфейс.
? Поддерживает такие настройки, как поддержка вспышки/фонарика, масштабирование и т. д.

Поддерживает два типа API

Html5QrcodeScanner — Сквозной сканер с пользовательским интерфейсом, интегрируемый менее чем с десятью строками кода.
Html5Qrcode — Мощный набор API-интерфейсов, которые вы можете использовать для создания пользовательского интерфейса, не беспокоясь о настройке камеры, обработке разрешений, чтении кодов и т. д.

Поддержка сканирования локальных файлов на устройстве — это новое дополнение, полезное для веб-браузера, который не поддерживает встроенный доступ к веб-камере на смартфонах. Примечание. При этом файлы не загружаются на какой-либо сервер — все делается локально.


Демо на scanapp.org	Демо на qrcode.minhazav.dev — сканирование различных типов кодов

Нам нужна ваша помощь!

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

Документация

Документация по этому проекту была перенесена на scanapp.org/html5-qrcode-docs.

Начиная
Поддерживаемые платформы
Поддерживаемые форматы 1D и 2D-кода
Подробная документация по API

Поддерживаемые платформы

Мы постоянно работаем над добавлением поддержки все большего количества платформ. Если вы обнаружите платформу или браузер, на котором библиотека не работает, пожалуйста, сообщите о проблеме. Проверьте демо-ссылку, чтобы проверить это.

Легенды

Означает полную поддержку — встроенную веб-камеру и файловую систему.
Означает частичную поддержку — только на основе файлов, работа с веб-камерой

ПК/Мак

Firefox	Хром	Сафари	Опера	Край

Андроид

Хром	Firefox	Край	Опера	Опера Мини	Калифорнийский университет

iOS

Сафари	Хром	Firefox	Край
	*	*

* Поддерживается для версий IOS >= 15.1.
До версии 15.1 Webkit для IOS использовался Chrome, Firefox и другими браузерами в IOS, и у них еще нет разрешений для веб-камеры. В настоящее время существует проблема с исправлением поддержки iOS — проблема/14.

Поддержка фреймворка

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


HTML5	VueJs	Электроны	Реагировать	Горит

Поддерживаемые форматы кода

Сканирование кода зависит от библиотеки Zxing-js. Мы будем работать над этим, чтобы добавить поддержку большего количества типов сканирования кода. Если вы считаете, что определенный тип кода был бы полезен, отправьте запрос на добавление функции.

Код	Пример
QR-код
АЦТЕКИ
КОД_39
КОД_93
КОД_128
МФТ
EAN_13
EAN_8
PDF_417
УПК_А
UPC_E
ДАННЫЕ_МАТРИКС
МАКСИКОД*
RSS_14*
RSS_EXPANDED*

*Форматы не поддерживаются нашей экспериментальной интеграцией с собственной интеграцией BarcodeDetector API (Подробнее).

Описание – Посмотреть демо

Ознакомьтесь со сквозным сканером на сайте scanapp.org.

Это кроссплатформенная библиотека JavaScript для интеграции QR-кода, штрих-кодов и некоторых других типов возможностей сканирования кода в ваши приложения, работающие в браузере, совместимом с HTML5.

Поддерживает:

Запрос камеры на устройстве (с разрешениями пользователя)
Рендеринг прямой трансляции с камеры с простым в использовании пользовательским интерфейсом для сканирования
Поддерживает сканирование различных типов QR-кодов, штрих-кодов и других форматов.
Поддерживает выбор файлов изображений с устройства для сканирования кодов.

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

Подробные инструкции по использованию этой библиотеки можно найти на странице scanapp.org/html5-qrcode-docs.

Демо

Отсканируйте это изображение или посетите blog.minhazav.dev/research/html5-qrcode.html.

Для получения дополнительной информации

Ознакомьтесь с этими статьями о том, как использовать эту библиотеку:

Сканер QR и штрих-кодов с использованием HTML и JavaScript
Сканирование QR-кода HTML5 — запущена версия 1.0.1 без зависимости от jQuery и реорганизованы API на основе Promise.
Сканирование QR-кода HTML5 с помощью JavaScript — добавлена поддержка сканирования локального файла и использования камеры по умолчанию (v1.0.5).

Скриншоты

Рис.: Снимок экрана Google Chrome, работающего на MacBook Pro.

Документация

Полную документацию по API можно найти на странице scanapp.org/html5-qrcode-docs/docs/apis.

Дополнительная необязательная `configuration` в методе `start()`

Объект конфигурации, который можно использовать для настройки поведения сканирования и пользовательского интерфейса (UI). Большинство полей имеют свойства по умолчанию, которые будут использоваться, если не указано иное значение. Если вы не хотите ничего переопределять, вы можете просто передать пустой объект {} .

`fps` — целое число, пример = 10

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

`qrbox` — `QrDimensions` или `QrDimensionFunction` (необязательно), пример = `{ width: 250, height: 250 }`

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

Это можно использовать для установки прямоугольной области сканирования с такой конфигурацией, как:

 let config = { qrbox : { width : 400 , height : 150 } }

Эта конфигурация также принимает функцию типа

 /**
  * A function that takes in the width and height of the video stream 
* and returns QrDimensions.
* 
* Viewfinder refers to the video showing camera stream.
*/
type QrDimensionFunction =
    ( viewfinderWidth : number , viewfinderHeight : number ) => QrDimensions ;

Это позволяет вам устанавливать размеры динамического QR-блока на основе размеров видео. См., например, эту статью в блоге: Настройка размера динамического QR-поля в Html5-qrcode — блог ScanApp

Это может быть желательно для сканирования штрих-кода.

Если это значение не установлено, затененное поле QR отображаться не будет, и сканер будет сканировать всю область видеопотока.

`aspectRatio` — Плавающее число, пример 1.777778 для соотношения сторон 16:9.

Используйте это свойство для рендеринга видеопотока с определенным соотношением сторон. Передача нестандартного соотношения сторон, например 100000:1 может привести к тому, что видеопоток даже не будет отображаться. Идеальными ценностями могут быть:

Ценить	Соотношение сторон	Вариант использования
1,333334	4:3	Стандартное соотношение сторон камеры
1,777778	16:9	Полноэкранный, кинематографический
1.0	1:1	Квадратный вид

Если вы не передадите никакого значения, для сканирования будет использоваться весь видоискатель. Примечание . Это значение должно быть меньше ширины и высоты QR code HTML element .

`disableFlip` — логическое значение (необязательно), по умолчанию = false

По умолчанию сканер может сканировать горизонтально перевернутые QR-коды. Это также позволяет сканировать QR-код с помощью передней камеры на мобильных устройствах, которая иногда зеркально отображается. По умолчанию это false , и я рекомендую изменить это значение только в том случае, если:

Вы уверены, что изображение с камеры не может быть зеркально отражено (перевернуто по горизонтали)
При включении этой функции у вас возникают проблемы с производительностью.

Вот пример обычного и зеркального QR-кода.

Обычный QR-код	Зеркальный QR-код

`rememberLastUsedCamera` — логическое значение (необязательно), по умолчанию = true

Если true последняя камера, использованная пользователем, и разрешение на погоду или нет, будут сохранены в локальном хранилище. Если пользователь ранее предоставил разрешения — опция запроса разрешения в пользовательском интерфейсе будет пропущена, и последняя выбранная камера будет автоматически запущена для сканирования.

Если true библиотека должна запомнить, были ли ранее предоставлены разрешения камере и какая камера использовалась в последний раз. Если разрешения для «камеры» уже предоставлены, сканирование QR-кода * автоматически начнется для ранее использованной камеры.

`supportedScanTypes` — `Array<Html5QrcodeScanType> | []`

Это поддерживается только для Html5QrcodeScanner .

По умолчанию = [Html5QrcodeScanType.SCAN_TYPE_CAMERA, Html5QrcodeScanType.SCAN_TYPE_FILE]

Это поле можно использовать для:

Ограничьте поддержку сканирования на основе Camera или File .
Измените тип сканирования по умолчанию.

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

 function onScanSuccess ( decodedText , decodedResult ) {
  // handle the scanned code as you like, for example:
  console . log ( `Code matched = ${ decodedText } ` , decodedResult ) ;
}

let config = {
  fps : 10 ,
  qrbox : { width : 100 , height : 100 } ,
  rememberLastUsedCamera : true ,
  // Only support camera scan type.
  supportedScanTypes : [ Html5QrcodeScanType . SCAN_TYPE_CAMERA ]
} ;

let html5QrcodeScanner = new Html5QrcodeScanner (
  "reader" , config , /* verbose= */ false ) ;
html5QrcodeScanner . render ( onScanSuccess ) ;

Для сканирования на основе файлов выберите только:

supportedScanTypes: [ Html5QrcodeScanType . SCAN_TYPE_FILE ]

Для поддержки обоих вариантов, как сейчас, вы можете игнорировать это поле или установить его как:

supportedScanTypes: [
  Html5QrcodeScanType . SCAN_TYPE_CAMERA ,
  Html5QrcodeScanType . SCAN_TYPE_FILE ]

Чтобы установить сканирование на основе файлов по умолчанию, измените порядок:

supportedScanTypes: [
  Html5QrcodeScanType . SCAN_TYPE_FILE ,
  Html5QrcodeScanType . SCAN_TYPE_CAMERA ]

`showTorchButtonIfSupported` — `boolean | undefined`

Это поддерживается только для Html5QrcodeScanner .

Если true то визуализируемый пользовательский интерфейс будет иметь кнопку для включения или выключения вспышки в зависимости от поддержки устройства и браузера. По умолчанию значение false .

Сканирование только определенных форматов

По умолчанию как поток камеры, так и файлы изображений сканируются по всем поддерживаемым форматам кода. Оба класса Html5QrcodeScanner и Html5Qrcode можно настроить для поддержки только подмножества поддерживаемых форматов. Поддерживаемые форматы определены в перечислении Html5QrcodeSupportedFormats.

 enum Html5QrcodeSupportedFormats {
  QR_CODE = 0 ,
  AZTEC ,
  CODABAR ,
  CODE_39 ,
  CODE_93 ,
  CODE_128 ,
  DATA_MATRIX ,
  MAXICODE ,
  ITF ,
  EAN_13 ,
  EAN_8 ,
  PDF_417 ,
  RSS_14 ,
  RSS_EXPANDED ,
  UPC_A ,
  UPC_E ,
  UPC_EAN_EXTENSION ,
}

Я рекомендую использовать это только в том случае, если вам нужно явно исключить поддержку определенных форматов или хотите уменьшить количество сканирований, выполняемых в секунду, из соображений производительности.

Сканирование только QR-кода с помощью `Html5Qrcode`

 const html5QrCode = new Html5Qrcode (
  "reader" , { formatsToSupport : [ Html5QrcodeSupportedFormats . QR_CODE ] } ) ;
const qrCodeSuccessCallback = ( decodedText , decodedResult ) => {
    /* handle success */
} ;
const config = { fps : 10 , qrbox : { width : 250 , height : 250 } } ;

// If you want to prefer front camera
html5QrCode . start ( { facingMode : "user" } , config , qrCodeSuccessCallback ) ;

Сканирование только QR-кода и кодов UPC с помощью `Html5QrcodeScanner`

 function onScanSuccess ( decodedText , decodedResult ) {
  // Handle the scanned code as you like, for example:
  console . log ( `Code matched = ${ decodedText } ` , decodedResult ) ;
}

const formatsToSupport = [
  Html5QrcodeSupportedFormats . QR_CODE ,
  Html5QrcodeSupportedFormats . UPC_A ,
  Html5QrcodeSupportedFormats . UPC_E ,
  Html5QrcodeSupportedFormats . UPC_EAN_EXTENSION ,
] ;
const html5QrcodeScanner = new Html5QrcodeScanner (
  "reader" ,
  {
    fps : 10 ,
    qrbox : { width : 250 , height : 250 } ,
    formatsToSupport : formatsToSupport
  } ,
  /* verbose= */ false ) ;
html5QrcodeScanner . render ( onScanSuccess ) ;

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

Библиотека теперь поддерживает некоторые экспериментальные функции, которые поддерживаются в библиотеке, но не рекомендуются для промышленного использования либо из-за ограниченного тестирования, либо из-за ограниченной совместимости используемых базовых API. Подробнее об этом читайте здесь. Некоторые экспериментальные функции включают в себя:

Поддержка JavaScript API BarcodeDetector

Как модифицировать и построить

Изменения кода следует вносить только в /src.
Запустите npm install чтобы установить все зависимости.
Запустите npm run-script build для создания выходных данных JavaScript. Выходной дистрибутив JavaScript создается в /dist/html5-qrcode.min.js. Если вы разрабатываете в ОС Windows, запустите npm run-script build-windows .
Тестирование
- Запустить npm test
- Запустите тесты перед отправкой запроса на включение, все тесты должны запуститься.
- Пожалуйста, добавьте тесты на новое поведение, отправленные в PR.
Отправить запрос на вытягивание
- Включайте изменения кода только в ./src . Не изменяйте ./dist вручную.
- В запросе на включение добавьте комментарий типа
```
 @all-contributors please add @mebjas for this new feature or tests
```
- Для вызова ваших вкладов бот обновит файл вкладов.
- Код будет создаваться и публиковаться автором партиями.

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

Вы можете внести свой вклад в проект несколькими способами:

Заявка на выпуск файла для любой замеченной ошибки или проблемы совместимости с проектом.
Запрос функции файла для недостающих функций.
Возьмите открытые ошибки или запрос на добавление функции, поработайте над ними и отправьте запрос на включение.
Напишите модульные тесты для существующей кодовой базы (которая сегодня не покрывается тестами). Требуется помощь по этому вопросу - читайте дальше.

Поддерживать ?

Этот проект был бы невозможен без всех наших замечательных участников и спонсоров. Если вы хотите поддержать обслуживание и поддержку этого проекта, вы можете сделать пожертвование через спонсоров GitHub.

Спонсорьте проект, чтобы определить приоритетность запросов функций/ошибок, имеющих отношение к вам . (Зависит от объема запроса и пропускной способности участников).

веб-автор@ Бенги будживаду

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

Также огромное спасибо следующим организациям за немонетическую спонсорскую поддержку.

Кредиты

Декодер, используемый для чтения QR-кода, взят из Zxing-js https://github.com/zxing-js/library.

Расширять

Дополнительная информация

Версия Version 2.3.8
Тип Другой исходный код
Время обновления 2024-12-19
размер 50MB
От Github

Связанные приложения

Aloha Editor html5编辑器

2023-04-18
Система корпоративного бренда Qianbo Html5, версия 2017, сборка 0216

2022-07-01
Интерфейсная платформа ZUI html5 v1.9.1

2022-06-10
Механизм шаблонов HTML5 Thymeleaf v3.0.10

2022-05-24
веб-страница HTML5

2013-08-30
Музыкальный проигрыватель HTML5

2011-02-14

html5 qrcode

Html5-QRCode

Важно - Ищем новых владельцев для этого проекта.

Html5-QRCode

Легкая и кроссплатформенная библиотека сканирования QR-кодов и штрих-кодов для Интернета

Ключевые моменты

Нам нужна ваша помощь!

Документация

Поддерживаемые платформы

ПК/Мак

Андроид

iOS

Поддержка фреймворка

Поддерживаемые форматы кода

Описание – Посмотреть демо

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

Демо

Для получения дополнительной информации

Скриншоты

Документация

Дополнительная необязательная configuration в методе start()

fps — целое число, пример = 10

qrbox — QrDimensions или QrDimensionFunction (необязательно), пример = { width: 250, height: 250 }

aspectRatio — Плавающее число, пример 1.777778 для соотношения сторон 16:9.

disableFlip — логическое значение (необязательно), по умолчанию = false

rememberLastUsedCamera — логическое значение (необязательно), по умолчанию = true

supportedScanTypes — Array<Html5QrcodeScanType> | []

showTorchButtonIfSupported — boolean | undefined

Сканирование только определенных форматов

Сканирование только QR-кода с помощью Html5Qrcode

Сканирование только QR-кода и кодов UPC с помощью Html5QrcodeScanner

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

Как модифицировать и построить

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

Поддерживать ?

Кредиты

Дополнительная необязательная `configuration` в методе `start()`

`fps` — целое число, пример = 10

`qrbox` — `QrDimensions` или `QrDimensionFunction` (необязательно), пример = `{ width: 250, height: 250 }`

`aspectRatio` — Плавающее число, пример 1.777778 для соотношения сторон 16:9.

`disableFlip` — логическое значение (необязательно), по умолчанию = false

`rememberLastUsedCamera` — логическое значение (необязательно), по умолчанию = true

`supportedScanTypes` — `Array<Html5QrcodeScanType> | []`

`showTorchButtonIfSupported` — `boolean | undefined`

Сканирование только QR-кода с помощью `Html5Qrcode`

Сканирование только QR-кода и кодов UPC с помощью `Html5QrcodeScanner`