html5 qrcode
Version 2.3.8
Si está interesado, comuníquese con [email protected] .
Importante El proyecto se encuentra en modo de mantenimiento hasta nuevo aviso. El autor no podrá realizar correcciones de errores ni mejoras por el momento. Las solicitudes de extracción tampoco se fusionarán por el momento. Si tiene una bifurcación que puede mantener, comparta los detalles con [email protected]. ¡Estoy feliz de anunciarlos aquí! Está bien usar el proyecto tal como está. Ejemplo: scanapp.org.
Utilice esta biblioteca liviana para integrar fácil y rápidamente códigos QR, códigos de barras y otras capacidades comunes de escaneo de códigos a su aplicación web.
? Admite escanear diferentes tipos de códigos de barras y códigos QR.
? Soporta diferentes plataformas ya sea Android, IOS, MacOs, Windows o Linux
Soporta diferentes navegadores como Chrome, Firefox, Safari, Edge, Opera...
? Admite escaneo con cámara y archivos locales
➡️ Viene con una biblioteca de extremo a extremo con interfaz de usuario, así como una biblioteca de bajo nivel para crear su propia interfaz de usuario.
? Admite personalizaciones como compatibilidad con flash/antorcha, zoom, etc.
Admite dos tipos de API
Html5QrcodeScanner : escáner de extremo a extremo con interfaz de usuario, integrado con menos de diez líneas de código.
Html5Qrcode : potente conjunto de API que puede utilizar para crear su interfaz de usuario sin preocuparse por la configuración de la cámara, el manejo de permisos, la lectura de códigos, etc.
La compatibilidad con el escaneo de archivos locales en el dispositivo es una nueva incorporación y útil para el navegador web que no admite el acceso a la cámara web en línea en los teléfonos inteligentes. Nota: Esto no carga archivos a ningún servidor; todo se hace localmente.
| Demostración en scanapp.org | Demostración en qrcode.minhazav.dev: escaneo de diferentes tipos de códigos |
Ayude a incentivar el desarrollo de funciones y la corrección de errores respaldando los objetivos de patrocinio de este proyecto. Vea la lista de solicitudes de funciones patrocinadas aquí.
La documentación de este proyecto se ha trasladado a scanapp.org/html5-qrcode-docs.
Trabajamos continuamente para agregar soporte para más y más plataformas. Si encuentra una plataforma o un navegador donde la biblioteca no funciona, no dude en presentar un problema. Consulte el enlace de demostración para probarlo.
Leyendas
Firefox | Cromo | Safari | Ópera | Borde |
|---|---|---|---|---|
Cromo | Firefox | Borde | Ópera | Ópera mini | UC |
|---|---|---|---|---|---|
Safari | Cromo | Firefox | Borde |
|---|---|---|---|
| * | * |
* Compatible con versiones de IOS >= 15.1
Antes de la versión 15.1, Chrome, Firefox y otros navegadores en IOS utilizan Webkit para IOS y aún no tienen permisos de cámara web. Hay un problema continuo al solucionar el soporte para iOS - Número/14
La biblioteca se puede utilizar fácilmente con varios otros marcos. He estado agregando ejemplos para algunos de ellos y continuaría agregando más.
| HTML5 | VueJs | electrones | Reaccionar | iluminado |
El escaneo de código depende de la biblioteca Zxing-js. Trabajaremos además para agregar soporte para más tipos de escaneo de código. Si cree que sería útil tener cierto tipo de código, presente una solicitud de función.
| Código | Ejemplo |
|---|---|
| Código QR | |
| AZTECA | |
| CODIGO_39 | |
| CODIGO_93 | |
| CODIGO_128 | |
| ITF | |
| EAN_13 | |
| EAN_8 | |
| PDF_417 | |
| UPC_A | |
| UPC_E | |
| MATRIZ_DATOS | |
| MAXICODIO* | |
| RSS_14* | |
| RSS_EXPANDIDO* |
*Los formatos no son compatibles con nuestra integración experimental con la integración nativa de la API de BarcodeDetector (Leer más).
Vea una experiencia de escaneo de extremo a extremo en scanapp.org.
Esta es una biblioteca de JavaScript multiplataforma para integrar códigos QR, códigos de barras y algunos otros tipos de capacidades de escaneo de códigos en sus aplicaciones que se ejecutan en un navegador compatible con HTML5.
Soporta:
Encuentre pautas detalladas sobre cómo usar esta biblioteca en scanapp.org/html5-qrcode-docs.
Escanee esta imagen o visite blog.minhazav.dev/research/html5-qrcode.html
Consulte estos artículos sobre cómo utilizar esta biblioteca:
Figura: Captura de pantalla de Google Chrome ejecutándose en MacBook Pro
Encuentre la documentación completa de la API en scanapp.org/html5-qrcode-docs/docs/apis.
configuration opcional adicional en el método start() Objeto de configuración que se puede utilizar para configurar tanto el comportamiento de escaneo como la interfaz de usuario (UI). La mayoría de los campos tienen propiedades predeterminadas que se utilizarán a menos que se proporcione un valor diferente. Si no desea anular nada, puede simplemente pasar un objeto vacío {} .
fps : entero, ejemplo = 10 También conocido como fotograma por segundo, el valor predeterminado para esto es 2, pero se puede aumentar para obtener un escaneo más rápido. Aumentar un valor demasiado alto podría afectar el rendimiento. Un valor >1000 simplemente fallará.
qrbox : QrDimensions o QrDimensionFunction (opcional), ejemplo = { width: 250, height: 250 } Utilice esta propiedad para limitar la región del visor que desea utilizar para escanear. El resto del visor quedaría sombreado. Por ejemplo, al pasar config { qrbox : { width: 250, height: 250 } } , la pantalla se verá así:
Esto se puede usar para configurar un área de escaneo rectangular con configuraciones como:
let config = { qrbox : { width : 400 , height : 150 } }Esta configuración también acepta una función de tipo
/**
* 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 ;Esto le permite configurar dimensiones dinámicas del cuadro QR según las dimensiones del video. Consulte este artículo de blog, por ejemplo: Configuración del tamaño del cuadro QR dinámico en Html5-qrcode - Blog de ScanApp
Esto podría ser conveniente para escanear códigos de barras.
Si no se establece este valor, no se representará ningún cuadro QR sombreado y el escáner escaneará toda el área de la transmisión de video.
aspectRatio — Flotante, Ejemplo 1.777778 para una relación de aspecto de 16:9 Utilice esta propiedad para representar la transmisión de video en una relación de aspecto determinada. Pasar una relación de aspecto no estándar como 100000:1 podría hacer que la transmisión de video ni siquiera se muestre. Los valores ideales pueden ser:
| Valor | Relación de aspecto | Caso de uso |
|---|---|---|
| 1.333334 | 4:3 | Relación de aspecto de cámara estándar |
| 1.777778 | 16:9 | Pantalla completa, cinematográfica. |
| 1.0 | 1:1 | Vista a la plaza |
Si no pasa ningún valor, se utilizará todo el visor para escanear. Nota : este valor tiene que ser menor que el ancho y alto del QR code HTML element .
disableFlip : booleano (opcional), predeterminado = falso De forma predeterminada, el escáner puede buscar códigos QR invertidos horizontalmente. Esto también permite escanear códigos QR usando la cámara frontal de dispositivos móviles que a veces están reflejados. Esto es false de forma predeterminada y recomiendo cambiarlo solo si:
Aquí hay un ejemplo de un código QR normal y reflejado.
| Código QR normal | Código QR reflejado |
|---|---|
rememberLastUsedCamera : booleano (opcional), predeterminado = verdadero Si true la última cámara utilizada por el usuario y el clima o no se concedió el permiso se recordarán en el almacenamiento local. Si el usuario ha otorgado permisos previamente, se omitirá la opción de solicitud de permiso en la interfaz de usuario y la última cámara seleccionada se iniciará automáticamente para escanear.
Si true la biblioteca recordará si los permisos de la cámara se otorgaron anteriormente y qué cámara se utilizó por última vez. Si los permisos ya están otorgados para la "cámara", el escaneo del código QR se iniciará automáticamente * para la cámara utilizada anteriormente.
supportedScanTypes - Array<Html5QrcodeScanType> | []Esto sólo es compatible con
Html5QrcodeScanner.
Predeterminado = [Html5QrcodeScanType.SCAN_TYPE_CAMERA, Html5QrcodeScanType.SCAN_TYPE_FILE]
Este campo se puede utilizar para:
Camera o File .Cómo utilizar:
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 ) ;Para el análisis basado en archivos, elija únicamente:
supportedScanTypes: [ Html5QrcodeScanType . SCAN_TYPE_FILE ]Para admitir ambos tal como está hoy, puede ignorar este campo o establecerlo como:
supportedScanTypes: [
Html5QrcodeScanType . SCAN_TYPE_CAMERA ,
Html5QrcodeScanType . SCAN_TYPE_FILE ]Para configurar el análisis basado en archivos como predeterminado, cambie el orden:
supportedScanTypes: [
Html5QrcodeScanType . SCAN_TYPE_FILE ,
Html5QrcodeScanType . SCAN_TYPE_CAMERA ] showTorchButtonIfSupported - boolean | undefinedEsto sólo es compatible con
Html5QrcodeScanner.
Si es true la interfaz de usuario renderizada tendrá un botón para activar o desactivar el flash según la compatibilidad del dispositivo y del navegador. El valor es false por defecto.
De forma predeterminada, tanto la transmisión de la cámara como los archivos de imagen se escanean con todos los formatos de código admitidos. Tanto las clases Html5QrcodeScanner como Html5Qrcode se pueden configurar para admitir solo un subconjunto de formatos admitidos. Los formatos admitidos se definen en enum 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 ,
}Recomiendo usar esto solo si necesita omitir explícitamente la compatibilidad con ciertos formatos o desea reducir la cantidad de escaneos realizados por segundo por razones de rendimiento.
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 ) ; 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 ) ; La biblioteca ahora admite algunas funciones experimentales que son compatibles con la biblioteca pero que no se recomiendan para uso en producción debido a las pruebas limitadas realizadas o a la compatibilidad limitada de las API subyacentes utilizadas. Lea más sobre esto aquí. Algunas características experimentales incluyen:
Los cambios de código solo deben realizarse en /src.
Ejecute npm install para instalar todas las dependencias.
Ejecute npm run-script build para generar resultados de JavaScript. La distribución de JavaScript de salida está construida en /dist/html5-qrcode.min.js. Si está desarrollando en el sistema operativo Windows, ejecute npm run-script build-windows .
Pruebas
npm testEnviar una solicitud de extracción
./src . No cambie ./dist manualmente. @all-contributors please add @mebjas for this new feature or tests
Puedes contribuir al proyecto de varias maneras:
Este proyecto no sería posible sin todos nuestros fantásticos contribuyentes y patrocinadores. Si desea apoyar el mantenimiento y conservación de este proyecto, puede donar a través de Patrocinadores de GitHub.
Patrocine el proyecto para priorizar solicitudes de características/errores relevantes para usted . (Depende del alcance de la solicitud y del ancho de banda de los contribuyentes).
Ayude a incentivar el desarrollo de funciones y la corrección de errores respaldando los objetivos de patrocinio de este proyecto. Vea la lista de solicitudes de funciones patrocinadas aquí.
Además, muchas gracias a las siguientes organizaciones por patrocinios no monetarios.
El decodificador utilizado para la lectura del código QR es de Zxing-js https://github.com/zxing-js/library
