vue qrcode reader

Un conjunto de componentes Vue.js para detectar códigos QR y varios otros formatos de código de barras directamente en el navegador:

• QrcodeStream escanea continuamente los marcos de una transmisión de cámara.

• QrcodeDropZone es una región vacía donde puedes arrastrar y soltar imágenes para decodificar.

• QrcodeCapture es un campo de carga de archivos clásico, escaneando instantáneamente todos los archivos que seleccione.

Todos los componentes responden. Más allá de eso, cerca del estilo cero. Haz que se ajusten a tu diseño. El uso es simple y sencillo:

 <Qrcode-stream @detect = "onDetect"> </qrcode-stream>

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

Instalación

Con npm

Correr

 NPM Instalar vue-qrcode-lector

Puede importar los componentes de forma independiente

 import {QrCodeStream, QrCodedROpzone, QrCodeCapture} de 'Vue-Qrcode-Reader'Const myComponent = {
  //
  Componentes: {QrCodeStream, QrCodedropzone, QRCodeCapture}

  // ...}

o registrarlos a todos a nivel mundial de inmediato

 import vue de 'vue'Import VueqrCoderader de' Vue-QrCode-Reader'Vue.use (VueqrCodereader)

Sin NPM

Incluya el siguiente archivo JS:

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

Asegúrese de incluirlo después de Vue:

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

Todos los componentes se registran automáticamente a nivel mundial. Use Kebab-Case para hacer referencia a ellos en sus plantillas:

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

Solución de problemas ⚡

No veo la cámara cuando uso QrcodeStream .

• Compruebe si funciona en la página de demostración. Especialmente la demostración de errores del manejo, ya que hace que los mensajes de error.

• La demostración funciona pero no funciona en mi proyecto: escuche el evento error para investigar los errores.

• La demostración no funciona: revise cuidadosamente la sección de soporte del navegador anterior. Tal vez su dispositivo simplemente no sea compatible.

Estoy ejecutando un servidor de desarrollo en localhost. ¿Cómo probar en mi dispositivo móvil sin HTTPS?

• Si su configuración es Desktop Chrome + Android Chrome, use la depuración remota que permita que su dispositivo Android acceda a su servidor local como localhost.

• De lo contrario, use un proxy inverso como Ngrok o Servo para que su servidor local esté disponible públicamente con HTTPS.

• También hay un montón de servicios de alojamiento sin servidor/estáticos que tienen https habilitados de forma predeterminada y donde puede implementar su aplicación web de forma gratuita (por ejemplo , páginas de Github , páginas GitLab , Google Firebase , Netlify , Heroku , Zeit ahora , ...)

Algunos de mis códigos QR no se están detectando.

• Asegúrese de que haya un borde blanco alrededor del código QR.

• Pruebe sus códigos QR en los paquetes aguas arriba: barcode-detector > zxing-wasm > zxing-cpp , y problemas de detección de archivos en el repositorio de más alto nivel donde se produce primero el problema.

No se están detectando códigos de barras 1D.

El valor predeterminado para el PROP formats es "['qr_code']" , que refleja la configuración antes de que el accesorio formats estuviera disponible. Deberá agregar otros formatos de código de barras a este accesorio para detectar ese tipo de códigos de barras. Mira esta demostración.

¿Cómo hacer que funcione con Vue 2?

El soporte se elimina, pero puede degradar a Vue-Qrcode-lector V3.* O más bajo.

Recibo un error de "no pudo obtener" en el tiempo de ejecución de algún archivo WASM.

Ese archivo WASM implementa el detector de código QR. Desafortunadamente, no es muy conveniente agrupar este archivo con el paquete. Entonces, de manera predeterminada, lo obtenemos en tiempo de ejecución desde un CDN. Ese es un problema para aplicaciones o aplicaciones fuera de línea que se ejecutan en una red con estricta política CSP. Para una solución alternativa, ver: #354

torch no es compatible con mi dispositivo, aunque tiene una linterna.

El soporte para torch es inconsistente entre dispositivos, cámaras y navegadores y sistemas operativos. En algunos dispositivos, la cámara trasera admite torch , pero la cámara frontal no, incluso si la cámara frontal realmente tiene una linterna.

Además, torch no es compatible con iOS en absoluto (última comprobación de iOS 17.1).

Visite esta página con su dispositivo. La lista de enlaces representa todas las cámaras instaladas en el dispositivo. Si hace clic, la cámara debe cargarse. Debajo de la cámara, se imprime el objeto JSON de "capacidades". Si no contiene el par de la tecla/valor "torch": true , entonces la linterna no es compatible con esa cámara.

Este objeto JSON proporcionó como carga útil del evento camera-on .