Pemindai Kode QR Javascript berdasarkan port javascript Cosmo Wolfe di perpustakaan ZXing Google.
Di perpustakaan ini, beberapa perbaikan telah diterapkan pada port asli:
BarcodeDetector asli tersedia, hanya ~15,3 kB (~5,6 kB gzip) yang dimuat.Menurut tolok ukur kami, tingkat deteksi mesin pemindai proyek ini sekitar 2-3 kali (dan hingga 8 kali) lebih tinggi dari salah satu pustaka pemindai QR javascript terpopuler LazarSoft/jsqrcode. Selain itu perpustakaan lain seringkali salah membaca isi kode QR, sedangkan untuk proyek ini tidak terjadi kesalahan pembacaan pada benchmarking.
Perpustakaan mendukung pemindaian aliran video berkelanjutan dari kamera web serta pemindaian gambar tunggal.
Pengembangan perpustakaan ini disponsori oleh nimiq, blockchain berbasis browser pertama di dunia.
Lihat https://nimiq.github.io/qr-scanner/demo/
Untuk menginstal melalui npm:
npm install --save qr-scannerUntuk menginstal melalui benang:
yarn add qr-scanner Atau cukup salin qr-scanner.min.js dan qr-scanner-worker.min.js ke proyek Anda.
Pemindai QR terdiri dari dua file utama. qr-scanner.min.js adalah file API utama yang memuat skrip pekerja qr-scanner-worker.min.js melalui impor dinamis, hanya jika diperlukan. Jika Anda tidak menggunakan bundler seperti Rollup atau Webpack yang menangani impor dinamis secara otomatis, Anda mungkin harus menyalin qr-scanner-worker.min.js ke dist Anda, di samping qr-scanner.min.js atau di samping skrip tempat Anda menggabungkan qr-scanner.min.js .
qr-scanner.min.js adalah modul es6 dan dapat diimpor sebagai berikut:
import QrScanner from 'path/to/qr-scanner.min.js' ; // if using plain es6 import
import QrScanner from 'qr-scanner' ; // if installed via package and bundling with a module bundler like webpack or rollupIni mengharuskan skrip pengimpor juga berupa modul es6 atau tag skrip modul, misalnya:
< script type =" module " >
import QrScanner from 'path/to/qr-scanner.min.js' ;
// do something with QrScanner
</ script >Jika proyek Anda tidak didasarkan pada modul es6, Anda bisa
import ( 'path/to/qr-scanner.min.js' ) . then ( ( module ) => {
const QrScanner = module . default ;
// do something with QrScanner
} ) ;qr-scanner.umd.min.js untuk penggunaan langsung sebagai skrip non-modul < script src =" path/to/qr-scanner.umd.min.js " > </ script >
< script >
// do something with QrScanner
</ script >qr-scanner.umd.min.js langsung dengan kode non-modul Anda dengan alat seperti gulp atau grunt.require seperti browserify: const QrScanner = require ( 'qr-scanner' ) ; // if installed via package
const QrScanner = require ( 'path/to/qr-scanner.umd.min.js' ) ; // if not installed via package
// do something with QrScanner Pustaka ini menggunakan fitur ECMAScript 2017 seperti fungsi async . Jika Anda perlu mendukung browser lama, Anda dapat menggunakan qr-scanner.legacy.min.js , yang kompatibel dengan ECMAScript 2015 (ES6). Ini adalah build UMD dan dapat digunakan sebagai pengganti qr-scanner.umd.min.js , lihat di atas. Perhatikan, bahwa versi lama lebih besar karena menyertakan beberapa polyfill dan, untuk mendukung browser yang tidak mendukung impor dinamis, menyejajarkan skrip pekerja yang bagaimanapun juga perlu dimuat di browser lama. Anda mungkin tidak perlu menggunakan versi lama, karena dukungan browser secara umum sudah sangat baik untuk versi reguler. Terutama jika Anda ingin memindai dari kamera perangkat, dukungan kamera oleh browser adalah batasan yang lebih ketat.
Buat elemen <video> tempat streaming video kamera web harus dirender:
< video > </ video > // To enforce the use of the new api with detailed scan results, call the constructor with an options object, see below.
const qrScanner = new QrScanner (
videoElem ,
result => console . log ( 'decoded qr code:' , result ) ,
{ /* your options or returnDetailedScanResult: true if you're not specifying any other options */ } ,
) ;
// For backwards compatibility, omitting the options object will currently use the old api, returning scan results as
// simple strings. This old api will be removed in the next major release, by which point the options object is then
// also not required anymore to enable the new api.
const qrScanner = new QrScanner (
videoElem ,
result => console . log ( 'decoded qr code:' , result ) ,
// No options provided. This will use the old api and is deprecated in the current version until next major version.
) ;Sebagai parameter ketiga opsional, objek opsi dapat disediakan. Opsi yang didukung adalah:
| Pilihan | Keterangan |
|---|---|
onDecodeError | Penangan yang akan dipanggil pada kesalahan decoding. Standarnya adalah QrScanner._onDecodeError . |
preferredCamera | Preferensi kamera yang akan digunakan. Preferensi dapat berupa id perangkat seperti yang dikembalikan oleh listCameras atau mode menghadap yang ditentukan sebagai 'environment' atau 'user' . Standarnya adalah 'environment' . Perlu dicatat bahwa tidak ada jaminan bahwa preferensi tersebut benar-benar dapat dipenuhi. |
maxScansPerSecond | Opsi ini dapat digunakan untuk membatasi pemindaian agar konsumsi baterai lebih sedikit. Standarnya adalah 25. Jika didukung oleh browser, kecepatan pemindaian tidak pernah lebih tinggi dari kecepatan bingkai kamera untuk menghindari duplikat pemindaian yang tidak perlu pada bingkai yang sama. |
calculateScanRegion | Sebuah metode yang menentukan wilayah pemindaian mana yang harus dibatasi sebagai peningkatan kinerja. Wilayah ini secara opsional juga dapat diperkecil sebelum melakukan pemindaian sebagai peningkatan kinerja tambahan. Wilayah ditentukan sebagai x , y , width dan height ; dimensi untuk wilayah yang diperkecil sebagai downScaledWidth dan downScaledHeight . Perhatikan bahwa rasio aspek antara width dan height serta downScaledWidth dan downScaledHeight harus tetap sama. Secara default, wilayah pemindaian dibatasi pada persegi tengah yang berukuran dua pertiga lebar atau tinggi video, mana saja yang lebih kecil, dan diperkecil menjadi persegi 400x400. |
highlightScanRegion | Setel opsi ini ke true untuk menampilkan kerangka di sekitar wilayah pemindaian pada aliran video. Ini menggunakan div yang diposisikan secara mutlak yang mencakup wilayah pemindaian. div ini dapat diberikan sebagai opsi overlay , lihat di bawah, atau dibuat secara otomatis dan kemudian diakses melalui qrScanner.$overlay . Itu dapat ditata secara bebas melalui CSS, misalnya dengan mengatur garis luar, batas, warna latar belakang, dll. Lihat demo untuk contohnya. |
highlightCodeOutline | Setel opsi ini ke true untuk menampilkan garis besar di sekitar kode QR yang terdeteksi. Ini menggunakan div yang benar-benar diposisikan di mana SVG untuk merender garis besarnya akan ditempatkan. div ini dapat diberikan sebagai opsi overlay , lihat di bawah, atau diakses melalui qrScanner.$overlay . SVG dapat ditata secara bebas melalui CSS, misalnya dengan mengatur warna isian, warna guratan, lebar guratan, dll. Lihat demo untuk contohnya. Untuk kebutuhan khusus lainnya, Anda juga dapat menggunakan cornerPoints secara langsung, lihat di bawah, untuk merender garis besar atau titiknya sendiri. |
overlay | div khusus yang dapat disediakan untuk digunakan untuk highlightScanRegion dan highlightCodeOutline . div harus merupakan saudara dari videoElem di DOM. Jika opsi ini disediakan, gaya default untuk highlightCodeOutline tidak diterapkan karena diharapkan elemen tersebut sudah memiliki gaya khusus yang diterapkan padanya. |
returnDetailedScanResult | Terapkan pelaporan hasil pemindaian terperinci, lihat di bawah. |
Untuk menggunakan nilai default suatu opsi, hilangkan atau berikan undefined .
Hasil yang diteruskan ke callback bergantung pada apakah objek opsi disediakan:
data properti yang merupakan konten string kode QR yang dibaca dan cornerPoints yang merupakan titik sudut garis besar kode QR yang dibaca pada aliran kamera. Untuk menghindari penggunaan api yang tidak digunakan lagi jika Anda tidak menyediakan opsi lain, Anda dapat menyediakan { returnDetailedScanResult: true } untuk mengaktifkan api baru dan mendapatkan hasil pemindaian mendetail.
qrScanner . start ( ) ;Sebut saja saat Anda siap memindai, misalnya saat mengklik tombol atau langsung saat memuat halaman. Ini akan meminta izin pengguna untuk menggunakan kamera. Catatan: untuk membaca dari aliran Web Cam, halaman Anda harus disajikan melalui HTTPS.
qrScanner . stop ( ) ; Jika mau, Anda dapat menghentikan pemindaian kapan saja dan melanjutkannya dengan memanggil start() lagi.
QrScanner . scanImage ( image )
. then ( result => console . log ( result ) )
. catch ( error => console . log ( error || 'No QR code found.' ) ) ;Sumber gambar yang didukung adalah: HTMLImageElement, SVGImageElement, HTMLVideoElement, HTMLCanvasElement, ImageBitmap, OffscreenCanvas, File / Blob, URI Data, URL yang mengarah ke gambar (jika berasal dari sumber yang sama atau diaktifkan CORS)
Sebagai parameter opsional kedua, objek opsi dapat disediakan. Opsi yang didukung adalah:
| Pilihan | Keterangan |
|---|---|
scanRegion | Wilayah yang ditentukan oleh x , y , width dan height tempat pencarian kode QR harus dibatasi. Sebagai peningkatan kinerja, wilayah ini dapat diperkecil sebelum melakukan pemindaian dengan menyediakan downScaledWidth dan downScaledHeight . Perhatikan bahwa rasio aspek antara width dan height serta downScaledWidth dan downScaledHeight harus tetap sama. Secara default, wilayah tersebut mencakup seluruh gambar dan tidak diperkecil. |
qrEngine | Mesin pemindai QR yang dibuat secara manual untuk digunakan kembali. Ini meningkatkan kinerja jika Anda memindai banyak gambar. Mesin dapat dibuat secara manual melalui QrScanner.createQrEngine(QrScanner.WORKER_PATH) . Secara default, tidak ada mesin yang digunakan kembali untuk pemindaian gambar tunggal. |
canvas | Kanvas yang dibuat secara manual untuk digunakan kembali. Ini meningkatkan kinerja jika Anda memindai banyak gambar. Kanvas dapat dibuat secara manual melalui tag <canvas> di markup atau document.createElement('canvas') Anda. Secara default, tidak ada kanvas yang digunakan kembali untuk pemindaian gambar tunggal. |
disallowCanvasResizing | Minta kanvas yang disediakan untuk digunakan kembali agar tidak diubah ukurannya, terlepas dari gambar sumber atau dimensi wilayah sumber. Perhatikan bahwa kanvas dan wilayah sumber harus memiliki rasio aspek yang sama untuk menghindari distorsi gambar yang akan dipindai sehingga membuat kode QR tidak dapat dideteksi. Secara default, ukuran kanvas disesuaikan dengan dimensi wilayah pemindaian atau wilayah pemindaian yang diperkecil untuk pemindaian gambar tunggal. |
alsoTryWithoutScanRegion | Minta pemindaian kedua pada seluruh gambar jika scanRegion disediakan dan tidak ada kode QR yang ditemukan di wilayah tersebut. Secara default, tidak ada pemindaian kedua yang dilakukan. |
returnDetailedScanResult | Terapkan pelaporan hasil pemindaian terperinci, lihat di bawah. |
Untuk menggunakan nilai default suatu opsi, hilangkan atau berikan undefined .
Hasil yang dikembalikan bergantung pada apakah objek opsi disediakan:
data properti yang merupakan konten string kode QR yang dibaca dan cornerPoints yang merupakan titik sudut garis besar kode QR yang dibaca pada aliran kamera. Untuk menghindari penggunaan api yang tidak digunakan lagi jika Anda tidak menyediakan opsi lain, Anda dapat menyediakan { returnDetailedScanResult: true } untuk mengaktifkan api baru dan mendapatkan hasil pemindaian mendetail.
Jika tidak ada kode QR yang dapat dibaca, scanImage akan dilempar.
Perpustakaan ini menyediakan metode utilitas untuk memeriksa apakah perangkat memiliki kamera. Hal ini berguna untuk menentukan apakah akan menawarkan fungsionalitas pemindaian kamera web QR kepada pengguna.
QrScanner . hasCamera ( ) ; // async Pustaka ini menyediakan metode utilitas untuk mendapatkan daftar kamera perangkat, yang ditentukan melalui id dan label . Ini berguna untuk membiarkan pengguna memilih kamera tertentu untuk digunakan.
Anda juga dapat meminta label kamera. Perlu diperhatikan bahwa hal ini memerlukan izin pengguna untuk mengakses kamera, yang akan diminta jika belum diberikan. Jika tidak diminta secara khusus, label perangkat ditentukan berdasarkan upaya terbaik, yaitu label sebenarnya dikembalikan jika izin telah diberikan dan label cadangan sebaliknya. Jika Anda ingin meminta label kamera, disarankan untuk memanggil listCameras setelah instance QrScanner berhasil dimulai, karena pada saat itu pengguna sudah memberikan izinnya.
QrScanner . listCameras ( ) ; // async; without requesting camera labels
QrScanner . listCameras ( true ) ; // async; requesting camera labels, potentially asking the user for permission Anda dapat mengubah kamera pilihan yang akan digunakan. Preferensi dapat berupa id perangkat seperti yang dikembalikan oleh listCameras atau mode menghadap yang ditentukan sebagai 'environment' atau 'user' . Perlu dicatat bahwa tidak ada jaminan bahwa preferensi tersebut benar-benar dapat dipenuhi.
qrScanner . setCamera ( facingModeOrDeviceId ) ; // asyncPemindai secara default memindai kode QR gelap dengan latar belakang terang. Anda dapat mengubah perilaku ini untuk memindai kode QR terang di latar belakang gelap atau keduanya secara bersamaan:
qrScanner . setInversionMode ( inversionMode ) ; Dimana inversionMode dapat berupa original , invert atau both . Default untuk pemindaian kamera web adalah original dan untuk pemindaian gambar tunggal both .
Ubah bobot warna merah, hijau, dan biru dalam perhitungan skala abu-abu untuk meningkatkan kontras kode QR dengan warna tertentu:
qrScanner . setGrayscaleWeights ( red , green , blue , useIntegerApproximation = true ) ; Dimana red , green dan blue harus berjumlah 256 jika useIntegerApproximation === true dan 1 sebaliknya. Secara default, nilai-nilai ini digunakan.
Pada browser yang didukung, Anda dapat memeriksa apakah kamera yang digunakan saat ini memiliki flash dan menyalakan atau mematikannya. Perhatikan bahwa hasFlash harus dipanggil setelah pemindai berhasil dimulai untuk menghindari kebutuhan membuka aliran kamera sementara hanya untuk menanyakan apakah pemindai memiliki dukungan flash, yang berpotensi meminta akses kamera kepada pengguna.
qrScanner . hasFlash ( ) ; // check whether the browser and used camera support turning the flash on; async.
qrScanner . isFlashOn ( ) ; // check whether the flash is on
qrScanner . turnFlashOn ( ) ; // turn the flash on if supported; async
qrScanner . turnFlashOff ( ) ; // turn the flash off if supported; async
qrScanner . toggleFlash ( ) ; // toggle the flash if supported; async.Anda dapat menghancurkan pemindai QR jika Anda tidak membutuhkannya lagi:
qrScanner . destroy ( ) ;
qrScanner = null ;Ini akan menghentikan aliran kamera dan pekerja web serta membersihkan pendengar acara. Pemindai QR akan tidak berfungsi setelah dihancurkan.
Proyek ini dibuat terlebih dahulu di qr-scanner.min.js yang dikombinasikan dengan qr-scanner-worker.min.js. Membangun sendiri hanya diperlukan jika Anda ingin mengubah kode di folder /src. NodeJs diperlukan untuk membangun.
Instal paket build yang diperlukan:
yarnBangunan:
yarn build
