Beranda>Terkait pemrograman>Kode sumber lainnya
Unduh

Html5-QRCode

Penting - Mencari pemilik baru untuk proyek ini.

Jika tertarik, silakan menghubungi [email protected] .

Html5-QRCode

Penting Proyek ini dalam mode pemeliharaan hingga pemberitahuan lebih lanjut. Penulis tidak dapat melakukan perbaikan bug atau perbaikan apa pun untuk saat ini. Permintaan penarikan juga tidak akan digabungkan untuk saat ini. Jika Anda memiliki garpu yang dapat Anda pelihara - silakan bagikan detailnya ke [email protected]. Saya dengan senang hati mengiklankannya di sini! Oke untuk menggunakan proyek apa adanya. Contoh: scanapp.org.

Pustaka pemindaian Kode QR dan Kode Batang yang ringan & lintas platform untuk web

Gunakan perpustakaan ringan ini untuk dengan mudah/cepat mengintegrasikan kode QR, kode batang, dan kemampuan pemindaian kode umum lainnya ke aplikasi web Anda.

Sorotan utama

  • ? Mendukung pemindaian berbagai jenis kode batang dan kode QR.

  • ? Mendukung berbagai platform baik itu Android, IOS, MacOs, Windows atau Linux

  • Mendukung berbagai browser seperti Chrome, Firefox, Safari, Edge, Opera ...

  • ? Mendukung pemindaian dengan kamera serta file lokal

  • ➡️ Dilengkapi dengan perpustakaan ujung ke ujung dengan UI serta perpustakaan tingkat rendah untuk membangun UI Anda sendiri.

  • ? Mendukung penyesuaian seperti dukungan flash/obor, zoom, dll.

Mendukung dua jenis API

  • Html5QrcodeScanner — Pemindai ujung ke ujung dengan UI, terintegrasi dengan kurang dari sepuluh baris kode.

  • Html5Qrcode — Kumpulan API canggih yang dapat Anda gunakan untuk membangun UI tanpa mengkhawatirkan penyiapan kamera, menangani izin, membaca kode, dll.

Dukungan untuk memindai file lokal di perangkat merupakan tambahan baru dan berguna untuk browser web yang tidak mendukung akses kamera web inline di ponsel cerdas. Catatan: Ini tidak mengunggah file ke server mana pun — semuanya dilakukan secara lokal.

Demo di scanapp.org Demo di qrcode.minhazav.dev - Memindai berbagai jenis kode

Kami membutuhkan bantuan Anda!

gambar Membantu memberi insentif pada pengembangan fitur, perbaikan bug dengan mendukung tujuan sponsorship proyek ini. Lihat daftar permintaan fitur yang disponsori di sini.

Dokumentasi

Dokumentasi untuk proyek ini telah dipindahkan ke scanapp.org/html5-qrcode-docs.

  • Memulai
  • Kerangka kerja yang didukung
  • Mendukung format Kode 1D dan 2D
  • Dokumentasi API terperinci

Platform yang didukung

Kami terus berupaya menambahkan dukungan untuk lebih banyak platform. Jika Anda menemukan platform atau browser yang perpustakaannya tidak berfungsi, silakan ajukan masalah. Periksa tautan demo untuk mengujinya.

Legenda

  • Berarti dukungan penuh — webcam inline dan berbasis file
  • Berarti dukungan parsial — hanya berbasis file, webcam sedang berlangsung

PC/Mac


Firefox
krom
Safari
Opera
Tepian

Android


krom
Firefox
Tepian
Opera
OperaMini
universitas

IOS


Safari
krom
Firefox
Tepian
* *

* Didukung untuk versi IOS >= 15.1

Sebelum versi 15.1, Webkit untuk IOS digunakan oleh Chrome, Firefox, dan browser lain di IOS dan mereka belum memiliki izin webcam. Ada masalah yang sedang berlangsung dalam memperbaiki dukungan untuk iOS - masalah/14

Dukungan kerangka kerja

Perpustakaan dapat dengan mudah digunakan dengan beberapa kerangka kerja lainnya, saya telah menambahkan contoh untuk beberapa di antaranya dan akan terus menambahkan lebih banyak lagi.

HTML5 VueJs ElektronJs Bereaksi menyala

Format Kode yang didukung

Pemindaian kode bergantung pada perpustakaan Zxing-js. Kami akan berupaya menambahkan dukungan untuk lebih banyak jenis pemindaian kode. Jika Anda merasa jenis kode tertentu berguna untuk dimiliki, silakan ajukan permintaan fitur.

Kode Contoh
Kode QR
AZTEC
KODE_39
KODE_93
KODE_128
ITF
EAN_13
EAN_8
PDF_417
UPC_A
UPC_E
DATA_MATRIX
MAXICODE*
RSS_14*
RSS_DIPERLUAS*

*Format tidak didukung oleh integrasi eksperimental kami dengan integrasi API BarcodeDetector asli (Baca selengkapnya).

Deskripsi - Lihat Demo

Lihat pengalaman pemindai ujung ke ujung di scanapp.org.

Ini adalah pustaka JavaScript lintas platform untuk mengintegrasikan kode QR, kode batang & beberapa jenis kemampuan pemindaian kode lainnya ke aplikasi Anda yang berjalan pada browser yang kompatibel dengan HTML5.

Mendukung:

  • Mengkueri kamera pada perangkat (dengan izin pengguna)
  • Merender umpan kamera langsung, dengan antarmuka pengguna yang mudah digunakan untuk pemindaian
  • Mendukung pemindaian berbagai jenis kode QR, kode batang, dan format lainnya
  • Mendukung pemilihan file gambar dari perangkat untuk memindai kode

Cara menggunakan

Temukan panduan terperinci tentang cara menggunakan perpustakaan ini di scanapp.org/html5-qrcode-docs.

Demo


Pindai gambar ini atau kunjungi blog.minhazav.dev/research/html5-qrcode.html

Untuk informasi lebih lanjut

Periksa artikel berikut tentang cara menggunakan perpustakaan ini:

  • Pemindai QR dan kode batang menggunakan HTML dan JavaScript
  • Pemindaian Kode QR HTML5 — meluncurkan v1.0.1 tanpa ketergantungan jQuery dan memfaktorkan ulang API berbasis Promise.
  • Pemindaian Kode QR HTML5 dengan JavaScript — Dukungan untuk memindai file lokal dan menggunakan kamera default yang ditambahkan (v1.0.5)

Tangkapan layar


Gambar: Tangkapan layar dari Google Chrome yang berjalan di MacBook Pro

Dokumentasi

Temukan dokumentasi API lengkap di scanapp.org/html5-qrcode-docs/docs/apis.

configuration opsional tambahan dalam metode start()

Objek konfigurasi yang dapat digunakan untuk mengonfigurasi perilaku pemindaian dan antarmuka pengguna (UI). Sebagian besar bidang memiliki properti default yang akan digunakan kecuali jika diberikan nilai berbeda. Jika Anda tidak ingin mengganti apa pun, cukup masukkan objek kosong {} .

fps — Bilangan Bulat, Contoh = 10

AKA frame per second, nilai defaultnya adalah 2, tetapi dapat ditingkatkan untuk mendapatkan pemindaian yang lebih cepat. Meningkatkan nilai terlalu tinggi dapat mempengaruhi kinerja. Nilai >1000 akan gagal.

qrbox — QrDimensions atau QrDimensionFunction (Opsional), Contoh = { width: 250, height: 250 }

Gunakan properti ini untuk membatasi wilayah jendela bidik yang ingin Anda gunakan untuk pemindaian. Sisa jendela bidik akan diarsir. Misalnya dengan meneruskan config { qrbox : { width: 250, height: 250 } } , layar akan terlihat seperti:

Ini dapat digunakan untuk mengatur area pemindaian persegi panjang dengan konfigurasi seperti: 

 let config = { qrbox : { width : 400 , height : 150 } }

Konfigurasi ini juga menerima fungsi tipe 

 /**
  * 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 ;

Ini memungkinkan Anda mengatur dimensi kotak QR dinamis berdasarkan dimensi video. Lihat artikel blog ini misalnya: Mengatur ukuran kotak QR dinamis di Html5-qrcode - blog ScanApp

Ini mungkin diinginkan untuk pemindaian kode batang.

Jika nilai ini tidak disetel, kotak QR berbayang tidak akan ditampilkan dan pemindai akan memindai seluruh area aliran video.

aspectRatio — Float, Contoh 1,777778 untuk rasio aspek 16:9

Gunakan properti ini untuk merender umpan video dalam rasio aspek tertentu. Melewati rasio aspek yang tidak standar seperti 100000:1 dapat menyebabkan umpan video tidak muncul. Nilai ideal dapat berupa:

Nilai Rasio Aspek Kasus Penggunaan
1.333334 4:3 Rasio aspek kamera standar
1.777778 16:9 Layar penuh, sinematik
1.0 1:1 Tampilan persegi

Jika Anda tidak memberikan nilai apa pun, seluruh jendela bidik akan digunakan untuk pemindaian. Catatan : nilai ini harus lebih kecil dari lebar dan tinggi QR code HTML element .

disableFlip — Boolean (Opsional), default = false

Secara default, pemindai dapat memindai Kode QR yang dibalik secara horizontal. Ini juga memungkinkan pemindaian kode QR menggunakan kamera depan pada perangkat seluler yang terkadang dicerminkan. Secara default, ini false dan saya menyarankan untuk mengubahnya hanya jika:

  • Anda yakin bahwa umpan kamera tidak dapat dicerminkan (dibalik secara horizontal)
  • Anda menghadapi masalah kinerja saat ini diaktifkan.

Berikut contoh Kode QR normal dan mirror

Kode QR Biasa Kode QR yang Dicerminkan

rememberLastUsedCamera — Boolean (Opsional), default = true

Jika true kamera terakhir yang digunakan oleh pengguna dan izin cuaca atau tidak diberikan akan diingat di penyimpanan lokal. Jika pengguna sebelumnya telah memberikan izin — opsi permintaan izin di UI akan dilewati dan kamera yang terakhir dipilih akan diluncurkan secara otomatis untuk pemindaian.

Jika true perpustakaan akan mengingat apakah izin kamera telah diberikan sebelumnya dan kamera mana yang terakhir digunakan. Jika izin telah diberikan untuk "kamera", pemindaian kode QR akan secara otomatis * dimulai untuk kamera yang digunakan sebelumnya.

supportedScanTypes - Array<Html5QrcodeScanType> | []

Ini hanya didukung untuk Html5QrcodeScanner .

Bawaan = [Html5QrcodeScanType.SCAN_TYPE_CAMERA, Html5QrcodeScanType.SCAN_TYPE_FILE]

Bidang ini dapat digunakan untuk:

  • Batasi dukungan untuk pemindaian berbasis Camera atau File .
  • Ubah jenis pemindaian default.

Cara menggunakan: 

 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 ) ;

Untuk pemindaian berbasis file saja pilih: 

supportedScanTypes: [ Html5QrcodeScanType . SCAN_TYPE_FILE ]

Untuk mendukung keduanya seperti saat ini, Anda dapat mengabaikan bidang ini atau menetapkannya sebagai: 

supportedScanTypes: [
  Html5QrcodeScanType . SCAN_TYPE_CAMERA ,
  Html5QrcodeScanType . SCAN_TYPE_FILE ]

Untuk mengatur pemindaian berbasis file sebagai default, ubah urutannya: 

supportedScanTypes: [
  Html5QrcodeScanType . SCAN_TYPE_FILE ,
  Html5QrcodeScanType . SCAN_TYPE_CAMERA ]

showTorchButtonIfSupported - boolean | undefined

Ini hanya didukung untuk Html5QrcodeScanner .

Jika true UI yang dirender akan memiliki tombol untuk menghidupkan atau mematikan flash berdasarkan dukungan perangkat + browser. Nilainya false secara default.

Hanya memindai format tertentu

Secara default, aliran kamera dan file gambar dipindai berdasarkan semua format kode yang didukung. Kelas Html5QrcodeScanner dan Html5Qrcode dapat dikonfigurasi untuk hanya mendukung subset format yang didukung. Format yang didukung ditentukan dalam 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 ,
}

Saya sarankan menggunakan ini hanya jika Anda perlu secara eksplisit menghilangkan dukungan untuk format tertentu atau ingin mengurangi jumlah pemindaian yang dilakukan per detik karena alasan kinerja.

Hanya memindai kode QR dengan 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 ) ;

Hanya memindai kode QR dan kode UPC dengan 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 ) ;

Fitur eksperimental

Pustaka sekarang mendukung beberapa fitur eksperimental yang didukung di pustaka tetapi tidak direkomendasikan untuk penggunaan produksi karena terbatasnya pengujian yang dilakukan atau terbatasnya kompatibilitas untuk API dasar yang digunakan. Baca lebih lanjut tentang itu di sini. Beberapa fitur eksperimental meliputi:

  • Dukungan untuk API JavaScript BarcodeDetector

Cara memodifikasi dan membangun

  1. Perubahan kode sebaiknya hanya dilakukan pada /src saja.

  2. Jalankan npm install untuk menginstal semua dependensi.

  3. Jalankan npm run-script build untuk membuat keluaran JavaScript. Distribusi JavaScript keluaran dibuat untuk /dist/html5-qrcode.min.js. Jika Anda mengembangkan pada OS Windows, jalankan npm run-script build-windows .

  4. Pengujian

    • Jalankan npm test
    • Jalankan pengujian sebelum mengirimkan permintaan tarik, semua pengujian harus dijalankan.
    • Silakan tambahkan tes untuk perilaku baru yang dikirim dalam PR.

  5. Kirim permintaan tarik

    • Sertakan perubahan kode hanya pada ./src . Jangan ubah ./dist secara manual.
    • Dalam permintaan tarik, tambahkan komentar seperti 
     @all-contributors please add @mebjas for this new feature or tests
    • Untuk memanggil kontribusi Anda, bot akan memperbarui file kontribusi.
    • Kode akan dibuat & diterbitkan oleh penulis secara bertahap.

Bagaimana cara berkontribusi

Anda dapat berkontribusi pada proyek ini dengan beberapa cara:

  • Ajukan tiket penerbitan untuk setiap bug yang diamati atau masalah kompatibilitas dengan proyek.
  • Permintaan fitur file untuk fitur yang hilang.
  • Ambil bug terbuka atau permintaan fitur dan kerjakan dan kirimkan Permintaan Tarik.
  • Tulis pengujian unit untuk basis kode yang ada (yang tidak tercakup dalam pengujian saat ini). Dibutuhkan bantuan dalam hal ini - baca lebih lanjut.

Mendukung ?

Proyek ini tidak akan mungkin terwujud tanpa semua kontributor dan sponsor kami yang luar biasa. Jika Anda ingin mendukung pemeliharaan dan pemeliharaan proyek ini, Anda dapat berdonasi melalui Sponsor GitHub.

Sponsori proyek untuk memprioritaskan permintaan fitur/bug yang relevan bagi Anda . (Tergantung pada cakupan permintaan dan bandwidth kontributor).

penulis web@ben-gybujjivadu

Membantu memberi insentif pada pengembangan fitur, perbaikan bug dengan mendukung tujuan sponsorship proyek ini. Lihat daftar permintaan fitur yang disponsori di sini.

Juga, terima kasih yang sebesar-besarnya kepada organisasi-organisasi berikut untuk sponsor non-moneter

Kredit

Dekoder yang digunakan untuk membaca kode QR berasal dari Zxing-js https://github.com/zxing-js/library

Memperluas
Informasi Tambahan
Aplikasi Terkait
Direkomendasikan untuk Anda
Informasi Terkait Semua