html5 qrcode
Version 2.3.8
Se estiver interessado, entre em contato com [email protected] .
Importante O projeto está em modo de manutenção até novo aviso. O autor não poderá fazer nenhuma correção de bugs ou melhorias por enquanto. As solicitações pull também não serão mescladas por enquanto. Se você tiver um fork que possa manter - compartilhe os detalhes para [email protected]. Tenho o prazer de anunciá-los aqui! Ok para usar o projeto como está. Exemplo: scanapp.org.
Use esta biblioteca leve para integrar de maneira fácil e rápida código QR, código de barras e outros recursos comuns de leitura de código ao seu aplicativo da web.
? Suporta leitura de diferentes tipos de códigos de barras e códigos QR.
? Suporta diferentes plataformas, seja Android, IOS, MacOs, Windows ou Linux
Suporta diferentes navegadores como Chrome, Firefox, Safari, Edge, Opera ...
? Suporta digitalização com câmera e arquivos locais
➡️ Vem com uma biblioteca completa com UI, bem como uma biblioteca de baixo nível para construir sua própria UI.
? Suporta personalizações como suporte para flash/tocha, zoom, etc.
Suporta dois tipos de APIs
Html5QrcodeScanner – Scanner ponta a ponta com UI, integrado com menos de dez linhas de código.
Html5Qrcode — Conjunto poderoso de APIs que você pode usar para construir sua UI sem se preocupar com configuração da câmera, manipulação de permissões, leitura de códigos, etc.
O suporte para verificação de arquivos locais no dispositivo é uma adição nova e útil para o navegador da web que não oferece suporte ao acesso inline à câmera da web em smartphones. Observação: isso não carrega arquivos para nenhum servidor — tudo é feito localmente.
| Demonstração em scanapp.org | Demonstração em qrcode.minhazav.dev – Digitalizando diferentes tipos de códigos |
Ajude a incentivar o desenvolvimento de recursos e a correção de bugs, apoiando as metas de patrocínio deste projeto. Veja a lista de solicitações de recursos patrocinados aqui.
A documentação deste projeto foi movida para scanapp.org/html5-qrcode-docs.
Estamos trabalhando continuamente para adicionar suporte para mais e mais plataformas. Se você encontrar uma plataforma ou navegador onde a biblioteca não está funcionando, sinta-se à vontade para registrar um problema. Verifique o link de demonstração para testá-lo.
Lendas
Raposa de fogo | Cromo | Safári | Ópera | Borda |
|---|---|---|---|---|
Cromo | Raposa de fogo | Borda | Ópera | Ópera Mini | UC |
|---|---|---|---|---|---|
Safári | Cromo | Raposa de fogo | Borda |
|---|---|---|---|
| * | * |
* Compatível com versões IOS >= 15.1
Antes da versão 15.1, o Webkit para IOS era usado pelo Chrome, Firefox e outros navegadores no IOS e eles ainda não tinham permissões de webcam. Há um problema contínuo na correção do suporte para iOS – issue/14
A biblioteca pode ser facilmente usada com vários outros frameworks. Tenho adicionado exemplos para alguns deles e continuaria adicionando mais.
| HTML5 | VueJs | Elétrons | Reagir | Aceso |
A digitalização de código depende da biblioteca Zxing-js. Estaremos trabalhando nisso para adicionar suporte para mais tipos de digitalização de código. Se você acha que seria útil ter um determinado tipo de código, registre uma solicitação de recurso.
| Código | Exemplo |
|---|---|
| Código QR | |
| ASTECA | |
| CÓDIGO_39 | |
| CÓDIGO_93 | |
| CÓDIGO_128 | |
| ITF | |
| EAN_13 | |
| EAN_8 | |
| PDF_417 | |
| UPC_A | |
| UPC_E | |
| DATA_MATRIX | |
| MAXICODIGO* | |
| RSS_14* | |
| RSS_EXPANDIDO* |
*Os formatos não são suportados pela nossa integração experimental com a integração nativa da API BarcodeDetector (Leia mais).
Veja uma experiência de scanner completa em scanapp.org.
Esta é uma biblioteca JavaScript de plataforma cruzada para integrar código QR, códigos de barras e alguns outros tipos de recursos de leitura de código aos seus aplicativos executados em navegador compatível com HTML5.
Suporta:
Encontre diretrizes detalhadas sobre como usar esta biblioteca em scanapp.org/html5-qrcode-docs.
Digitalize esta imagem ou visite blog.minhazav.dev/research/html5-qrcode.html
Verifique estes artigos sobre como usar esta biblioteca:
Figura: Captura de tela do Google Chrome em execução no MacBook Pro
Encontre a documentação completa da API em scanapp.org/html5-qrcode-docs/docs/apis.
configuration extra opcional no método start() Objeto de configuração que pode ser usado para configurar o comportamento de verificação e a interface do usuário (IU). A maioria dos campos possui propriedades padrão que serão usadas a menos que um valor diferente seja fornecido. Se você não quiser substituir nada, basta passar um objeto vazio {} .
fps — Inteiro, Exemplo = 10 Também conhecido como quadro por segundo, o valor padrão para isso é 2, mas pode ser aumentado para obter uma digitalização mais rápida. Aumentar um valor muito alto pode afetar o desempenho. Valor >1000 simplesmente falhará.
qrbox — QrDimensions ou QrDimensionFunction (opcional), Exemplo = { width: 250, height: 250 } Use esta propriedade para limitar a região do visor que você deseja usar para digitalização. O resto do visor ficaria sombreado. Por exemplo, passando config { qrbox : { width: 250, height: 250 } } , a tela ficará assim:
Isso pode ser usado para definir uma área de digitalização retangular com configurações como:
let config = { qrbox : { width : 400 , height : 150 } }Esta configuração também aceita uma função do 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 ;Isso permite definir dimensões dinâmicas da caixa QR com base nas dimensões do vídeo. Veja este artigo do blog, por exemplo: Configurando o tamanho da caixa QR dinâmica em Html5-qrcode - blog ScanApp
Isto pode ser desejável para leitura de código de barras.
Se este valor não for definido, nenhuma caixa QR sombreada será renderizada e o scanner irá varrer toda a área do fluxo de vídeo.
aspectRatio — Float, Exemplo 1.777778 para proporção de aspecto 16:9 Use esta propriedade para renderizar o feed de vídeo em uma determinada proporção. Passar por uma proporção fora do padrão, como 100000:1 pode fazer com que o feed de vídeo nem apareça. Os valores ideais podem ser:
| Valor | Proporção | Caso de uso |
|---|---|---|
| 1.333334 | 4:3 | Proporção de aspecto padrão da câmera |
| 1,777778 | 16:9 | Tela cheia, cinematográfico |
| 1,0 | 1:1 | Vista quadrada |
Se você não passar nenhum valor, todo o visor será usado para digitalização. Nota : este valor deve ser menor que a largura e altura do QR code HTML element .
disableFlip — Booleano (opcional), padrão = falso Por padrão, o scanner pode procurar códigos QR invertidos horizontalmente. Isso também permite a leitura do código QR usando a câmera frontal em dispositivos móveis que às vezes são espelhados. Isso é false por padrão e recomendo alterá-lo somente se:
Aqui está um exemplo de QR Code normal e espelhado
| Código QR normal | Código QR espelhado |
|---|---|
rememberLastUsedCamera — Booleano (opcional), padrão = true Se for true a última câmera usada pelo usuário e a permissão meteorológica ou não concedida serão lembradas no armazenamento local. Se o usuário tiver concedido permissões anteriormente — a opção de solicitação de permissão na interface do usuário será ignorada e a última câmera selecionada será iniciada automaticamente para digitalização.
Se for true a biblioteca lembrará se as permissões de câmera foram concedidas anteriormente e qual câmera foi usada pela última vez. Se as permissões já tiverem sido concedidas para a "câmera", a leitura do código QR será iniciada automaticamente * para a câmera usada anteriormente.
supportedScanTypes - Array<Html5QrcodeScanType> | []Isso só é compatível com
Html5QrcodeScanner.
Padrão = [Html5QrcodeScanType.SCAN_TYPE_CAMERA, Html5QrcodeScanType.SCAN_TYPE_FILE]
Este campo pode ser usado para:
Camera ou File .Como usar:
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 verificação baseada em arquivo, escolha apenas:
supportedScanTypes: [ Html5QrcodeScanType . SCAN_TYPE_FILE ]Para oferecer suporte a ambos como são hoje, você pode ignorar este campo ou definir como:
supportedScanTypes: [
Html5QrcodeScanType . SCAN_TYPE_CAMERA ,
Html5QrcodeScanType . SCAN_TYPE_FILE ]Para definir a verificação baseada em arquivo como padrão, altere a ordem:
supportedScanTypes: [
Html5QrcodeScanType . SCAN_TYPE_FILE ,
Html5QrcodeScanType . SCAN_TYPE_CAMERA ] showTorchButtonIfSupported - boolean | undefinedIsso só é compatível com
Html5QrcodeScanner.
Se for true a UI renderizada terá um botão para ligar ou desligar o flash com base no suporte do dispositivo + navegador. O valor é false por padrão.
Por padrão, o fluxo da câmera e os arquivos de imagem são verificados em relação a todos os formatos de código suportados. As classes Html5QrcodeScanner e Html5Qrcode podem ser configuradas para oferecer suporte apenas a um subconjunto de formatos suportados. Os formatos suportados são definidos em 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 ,
}Eu recomendo usar isso apenas se você precisar omitir explicitamente o suporte para determinados formatos ou quiser reduzir o número de verificações feitas por segundo por motivos de desempenho.
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 ) ; A biblioteca agora oferece suporte a alguns recursos experimentais que são suportados na biblioteca, mas não recomendados para uso em produção devido a testes limitados realizados ou compatibilidade limitada para APIs subjacentes usadas. Leia mais sobre isso aqui. Alguns recursos experimentais incluem:
As alterações de código devem ser feitas apenas em /src.
Execute npm install para instalar todas as dependências.
Execute npm run-script build para criar a saída JavaScript. A distribuição JavaScript de saída é construída em /dist/html5-qrcode.min.js. Se você estiver desenvolvendo no sistema operacional Windows, execute npm run-script build-windows .
Teste
npm testEnvie uma solicitação pull
./src . Não altere ./dist manualmente. @all-contributors please add @mebjas for this new feature or tests
Você pode contribuir com o projeto de diversas maneiras:
Este projeto não seria possível sem todos os nossos fantásticos colaboradores e patrocinadores. Se quiser apoiar a manutenção deste projeto, você pode doar por meio dos patrocinadores do GitHub.
Patrocine o projeto para priorizar solicitações de recursos/bugs relevantes para você . (Depende do escopo da solicitação e da largura de banda dos contribuidores).
Ajude a incentivar o desenvolvimento de recursos e a correção de bugs, apoiando as metas de patrocínio deste projeto. Veja a lista de solicitações de recursos patrocinados aqui.
Além disso, muito obrigado às seguintes organizações por patrocínios não monetários
O decodificador usado para leitura do código QR é do Zxing-js https://github.com/zxing-js/library
