vue qrcode reader

Um conjunto de componentes vue.js para detectar códigos QR e vários outros formatos de código de barras diretamente no navegador:

• QrcodeStream verifica continuamente os quadros de um fluxo de câmera.

• QrcodeDropZone é uma região vazia onde você pode arrastar e arrastar imagens a serem decodificadas.

• QrcodeCapture é um campo de upload de arquivo clássico, digitalizando instantaneamente todos os arquivos que você seleciona.

Todos os componentes são responsivos. Além disso, quase zero estilo. Faça com que eles se encaixem no seu layout. O uso é simples e direto:

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

 Métodos: {
  ONDETECT (DetectedCodes) {// ...
  }}

Instalação

Com npm

Correr

 NPM Install VUE-QRCode-Reader

Você pode importar os componentes de forma independente

 importar {qrcodestream, qrcodedropzone, qrcodecapture} de 'vue-qrcode-leader'Const myComponent = {
  //
  Componentes: {qrcodestream, qrcodedropzone, qrcodecapture}

  // ...}

ou registre todos eles imediatamente

 importar vue de 'vue'import vueqrcodeReader de' vue-qrcode-leader'vue.use (vueqrcodeReader)

Sem npm

Inclua o seguinte arquivo JS:

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

Certifique -se de incluí -lo depois de Vue:

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

Todos os componentes são registrados automaticamente globalmente. Use case de kebab para fazer referência a eles em seus modelos:

 <Qrcode-stream> </qrcode-stream> <rcode-drop-zone> </qrcode-drop-zone> <Qrcode-Capture> </Qrcode-Capture>

Solução de problemas ⚡

Não vejo a câmera ao usar QrcodeStream .

• Verifique se funciona na página de demonstração. Especialmente a demonstração de erros de manipulação, pois ela renderiza mensagens de erro.

• A demonstração funciona, mas não funciona no meu projeto: ouça o evento error para investigar erros.

• A demonstração não funciona: revise cuidadosamente a seção de suporte do navegador acima. Talvez seu dispositivo simplesmente não seja suportado.

Estou executando um servidor de desenvolvimento no host. Como testar no meu dispositivo móvel sem https?

• Se a sua configuração for o Desktop Chrome + Android Chrome, use a depuração remota que permita ao seu dispositivo Android acessar o servidor local como localhost.

• Caso contrário, use um proxy reverso como NGrok ou Servero para disponibilizar temporariamente seu servidor local publicamente com HTTPS.

• Também existem muitos serviços de hospedagem sem servidor/estáticos que possuem HTTPs ativados por padrão e onde você pode implantar seu aplicativo da web gratuitamente (por exemplo, páginas do GitHub , páginas do Gitlab , Google Firebase , Netlify , Heroku , Zeit agora , ...)

Alguns dos meus códigos QR não estão sendo detectados.

• Certifique -se de que exista uma borda branca em torno do código QR.

• Teste seus códigos QR nos pacotes upstream: barcode-detector > zxing-wasm > zxing-cpp e problemas de detecção de arquivo no repositório de nível mais alto, onde o problema ocorre pela primeira vez.

1D Codos de barras não estão sendo detectados.

O valor padrão para o prop formats é "['qr_code']" , que reflete a configuração antes que o suporte formats estivesse disponível. Você precisará adicionar outros formatos de código de barras a este suporte para detectar esses tipos de códigos de barras. Confira esta demonstração.

Como fazê -lo funcionar com o Vue 2?

O suporte é descartado, mas você pode fazer o downgrade para o VOD-QRCODE-READER V3.* Ou abaixar.

Recebo um erro "falhou em buscar" em tempo de execução para algum arquivo WASM.

Esse arquivo WASM implementa o detector de código QR. Infelizmente, não é muito conveniente agrupar esse arquivo com o pacote. Portanto, por padrão, buscamos -o em tempo de execução de um CDN. Esse é um problema para aplicativos ou aplicativos offline que são executados em uma rede com uma política rígida de CSP. Para uma solução alternativa, veja: #354

torch não é suportada no meu dispositivo, embora tenha uma lanterna.

O suporte à torch é inconsistente entre dispositivos, câmeras e navegadores e sistemas operacionais. Em alguns dispositivos, a câmera traseira suporta torch , mas a câmera frontal não, mesmo que a câmera frontal tenha uma lanterna.

Além disso, torch não é suportada no iOS (último iOS verificado 17.1).

Visite esta página com seu dispositivo. A lista de links representa todas as câmeras instaladas no dispositivo. Se você clicar, a câmera deve ser carregada. Abaixo da câmera, visualiza o objeto JSON de "recursos" está impresso. Se não contiver o par de chaves/valores "torch": true , a lanterna não será suportada para essa câmera.

Este objeto JSON fornecido como carga útil do evento camera-on .