vue qrcode reader

Ein Satz von VUE.JS -Komponenten zum Erkennen von QR -Codes und verschiedenen anderen Barcode -Formaten direkt im Browser:

• QrcodeStream scannt kontinuierlich Frames aus einem Kameramomokerstrom.

• QrcodeDropZone ist ein leerer Bereich, in dem Sie Bilder ziehen und zu dekodieren können.

• QrcodeCapture ist ein klassisches Datei -Upload -Feld, das sofort alle von Ihnen ausgewählten Dateien scannt.

Alle Komponenten reagieren an. Darüber hinaus fast null Styling. Lassen Sie sie zu Ihrem Layout passen. Die Verwendung ist einfach und unkompliziert:

 <Qrcode-Stream @detekt = "OnDeTect"> </Qrcode-Stream>

 Methoden: {
  ONDETECT (DETECTEDCODES) {// ...
  }}

Installation

Mit NPM

Laufen

 NPM VUE-QRCODE-Reader installieren

Sie können die Komponenten unabhängig importieren

 Importieren {qrcodestream, qrcodedropzone, qrCodecapture} aus 'vue-qrcode-reader'const myComponent = {
  //
  Komponenten: {Qrcodestream, Qrcodedropzone, QrCodecapture}

  // ...}

oder registrieren Sie sie alle sofort weltweit

 Importieren Sie VUE aus 'Vue'import VueqrCodereader aus' vue-qrcode-reader'vue.use (VueqrCodereader)

Ohne NPM

Fügen Sie die folgende JS -Datei hinzu:

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

Stellen Sie sicher, dass Sie es nach Vue einschließen:

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

Alle Komponenten werden weltweit automatisch registriert. Verwenden Sie Kebab-Case, um sie in Ihren Vorlagen zu verweisen:

 <QrCode-Stream> </qrcode-Stream> <Qrcode-Drop-Zone> </Qrcode-Drop-Zone> <Qrcode-Capture> </qrcode-Kapital>

Fehlerbehebung ⚡

Ich sehe die Kamera nicht, wenn ich QrcodeStream verwende.

• Überprüfen Sie, ob es auf der Demo -Seite funktioniert. Insbesondere die Demo der Handlungsfehler, da sie Fehlermeldungen übermittelt.

• Die Demo funktioniert, funktioniert jedoch nicht in meinem Projekt: Hören Sie sich das error an, um Fehler zu untersuchen.

• Die Demo funktioniert nicht: Überprüfen Sie den obigen Abschnitt "Browser -Support" sorgfältig. Vielleicht wird Ihr Gerät einfach nicht unterstützt.

Ich führe einen Dev -Server auf Localhost aus. Wie teste ich auf meinem Mobilgerät ohne HTTPS?

• Wenn Ihr Setup Desktop Chrome + Android Chrome ist, verwenden Sie Remote -Debugging, mit dem Ihr Android -Gerät als Localhost auf Ihren lokalen Server zugreifen kann.

• Andernfalls verwenden Sie einen Reverse -Proxy wie NGROK oder dienen Sie dazu, Ihren lokalen Server mit HTTPS öffentlich öffentlich zugänglich zu machen.

• Es gibt auch viele serverlose /statische Hosting -Dienste, in denen HTTPS standardmäßig aktiviert ist und die Sie Ihre Web -App kostenlos bereitstellen können ( z .

Einige meiner QR -Codes werden nicht erkannt.

• Stellen Sie sicher, dass der QR -Code einen weißen Rand um den QR -Code gibt.

• Testen Sie Ihre QR-Codes in den stromaufwärts gelegenen Paketen: barcode-detector > zxing-wasm > zxing-cpp , und Dateierkennungsprobleme im Repository auf höchstem Niveau, in dem das Problem zuerst auftritt.

1D -Barcodes werden nicht erkannt.

Der Standardwert für die formats Prop ist "['qr_code']" , der die Einstellung widerspiegelt, bevor die formats -Requisiten verfügbar waren. Sie müssen dieser Requisite andere Barcode -Formate hinzufügen, um diese Arten von Barcodes zu erkennen. Schauen Sie sich diese Demo an.

Wie kann es mit Vue 2 funktionieren?

Der Support wird fallen gelassen, aber Sie können auf VUE-QRCODE-LEADER V3 herabstufen.* Oder niedriger.

Ich bekomme zur Laufzeit einen Fehler "fehlgeschlagen" für eine WASM -Datei.

Diese WASM -Datei implementiert den QR -Code -Detektor. Leider ist es nicht sehr bequem, diese Datei mit dem Paket zu bündeln. Standardmäßig holen wir es zur Laufzeit von einem CDN ab. Dies ist ein Problem für Offline -Anwendungen oder Anwendungen, die in einem Netzwerk mit strenger CSP -Richtlinien ausgeführt werden. Für eine Problemumgehung siehe: #354

torch wird auf meinem Gerät nicht unterstützt, obwohl es eine Taschenlampe hat.

Die Unterstützung für torch ist über Geräte, Kameras und Browser und Betriebssysteme inkonsistent. Auf einigen Geräten unterstützt die Rückfahrkamera torch , aber die Frontkamera, auch wenn die Frontkamera tatsächlich über eine Taschenlampe verfügt.

Darüber hinaus wird torch auf iOS überhaupt nicht unterstützt (zuletzt überprüft iOS 17.1).

Besuchen Sie diese Seite mit Ihrem Gerät. Die Liste der Links enthält alle auf dem Gerät installierten Kameras. Wenn Sie klicken, sollte die Kamera geladen werden. Unterhalb der Kameraansicht wird das JSON -Objekt der "Funktionen" gedruckt. Wenn es nicht das Schlüssel-/Wertpaar "torch": true , wird Taschenlampe für diese Kamera nicht unterstützt.

Dieses JSON-Objekt, das als Nutzlast des camera-on -Ereignisses bereitgestellt wird.