vue qrcode reader

Satu set komponen vue.js untuk mendeteksi kode QR dan berbagai format barcode lainnya tepat di browser:

• QrcodeStream terus memindai bingkai dari aliran kamera.

• QrcodeDropZone adalah daerah kosong di mana Anda dapat menyeret dan meneteskan gambar untuk diterjemahkan.

• QrcodeCapture adalah bidang unggahan file klasik, secara instan memindai semua file yang Anda pilih.

Semua komponen responsif. Di luar itu, mendekati gaya nol. Buat mereka sesuai dengan tata letak Anda. Penggunaannya sederhana dan lurus ke depan:

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

 Metode: {
  OnDetect (DetectedCodes) {// ...
  }}

Instalasi

Dengan NPM

Berlari

 NPM Instal Vue-Qrcode-Reader

Anda dapat mengimpor komponen secara mandiri

 impor {qrcodestream, qrcodedropzone, qrcodecapture} dari 'vue-qrcode-reader'const mycomponent = {
  //
  Komponen: {qrcodestream, qrcodedropzone, qrcodecapture}

  // ...}

atau daftarkan semuanya secara global

 Impor vue dari 'vue'import vueqrcodereader dari' vue-qrcode-reader'vue.use (vueqrcodereader)

Tanpa NPM

Sertakan file JS berikut:

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

Pastikan untuk memasukkannya setelah Vue:

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

Semua komponen secara otomatis terdaftar secara global. Gunakan Kasus Kebab untuk merujuk mereka di templat Anda:

 <Qrcode-stream> </qrcode-stream> <Qrcode-DROP-ZONE> </ Qrcode-Rop-ZONE> <QrCode-CAPTURE> </QrCode-CAPTURE>

Pemecahan Masalah ⚡

Saya tidak melihat kamera saat menggunakan QrcodeStream .

• Periksa apakah berfungsi di halaman demo. Terutama demo Pegangan Kesalahan, karena membuat pesan kesalahan.

• Demo ini berfungsi tetapi tidak berhasil dalam proyek saya: Dengarkan acara error untuk menyelidiki kesalahan.

• Demo tidak berfungsi: Tinjau dengan cermat bagian Dukungan Browser di atas. Mungkin perangkat Anda tidak didukung.

Saya menjalankan server dev di localhost. Bagaimana cara menguji perangkat seluler saya tanpa HTTPS?

• Jika pengaturan Anda adalah desktop chrome + android chrome, gunakan debugging jarak jauh yang memungkinkan perangkat Android Anda mengakses server lokal Anda sebagai localhost.

• Jika tidak, gunakan proxy terbalik seperti Ngrok atau Serveo untuk sementara membuat server lokal Anda tersedia untuk umum dengan HTTPS.

• Ada juga banyak layanan hosting tanpa server/statis yang memiliki HTTPS diaktifkan secara default dan di mana Anda dapat menggunakan aplikasi web Anda secara gratis (misalnya halaman GitHub , halaman gitlab , Google Firebase , Netlify , Heroku , Zeit sekarang , ...)

Beberapa kode QR saya tidak terdeteksi.

• Pastikan, ada beberapa perbatasan putih di sekitar kode QR.

• Uji kode QR Anda di paket hulu: barcode-detector > zxing-wasm > zxing-cpp , dan masalah deteksi file di repositori tingkat tertinggi di mana masalah pertama kali terjadi.

Barcode 1D tidak terdeteksi.

Nilai default untuk prop formats adalah "['qr_code']" , yang mencerminkan pengaturan sebelum formats prop tersedia. Anda harus menambahkan format barcode lain ke prop ini untuk mendeteksi jenis barcode tersebut. Lihat demo ini.

Bagaimana cara membuatnya bekerja dengan Vue 2?

Dukungan dijatuhkan tetapi Anda dapat menurunkan peringkat ke Vue-Qrcode-Reader V3.* Atau lebih rendah.

Saya mendapatkan kesalahan "gagal mengambil" saat runtime untuk beberapa file wasm.

File WASM itu mengimplementasikan detektor kode QR. Sayangnya, tidak nyaman untuk menggabungkan file ini dengan paket. Jadi secara default kami mengambilnya saat runtime dari CDN. Itu masalah untuk aplikasi offline atau aplikasi yang berjalan dalam jaringan dengan kebijakan CSP yang ketat. Untuk solusi, lihat: #354

torch tidak didukung di perangkat saya, meskipun memiliki senter.

Dukungan untuk torch tidak konsisten di seluruh perangkat, kamera dan browser dan sistem operasi. Pada beberapa perangkat, kamera belakang mendukung torch tetapi kamera depan tidak, bahkan jika kamera depan benar -benar memiliki senter.

Selain itu, torch tidak didukung di iOS sama sekali (iOS 17.1 terakhir yang diperiksa.

Kunjungi halaman ini dengan perangkat Anda. Daftar tautan mewakili semua kamera yang diinstal pada perangkat. Jika Anda mengklik, kamera harus dimuat. Di bawah tampilan kamera, objek JSON dari "kemampuan" dicetak. Jika tidak berisi pasangan kunci/nilai "torch": true maka senter tidak didukung untuk kamera itu.

Objek JSON ini disediakan sebagai muatan acara camera-on .