Html5-qrcode adalah perpustakaan ringan untuk dengan mudah mengintegrasikan fungsi pemindaian kode QR ke aplikasi web apa pun. Anda dapat mengetahui lebih lanjut tentang proyek dan detail implementasinya di halaman proyek di Github
ScanApp adalah ujung ke ujung implementasi perpustakaan oleh penulis yang sama
Secara default, perpustakaan memungkinkan dua jenis opsi pemindaian
- Pemindaian berbasis kamera
- Pemindaian berbasis file [Memungkinkan pengguna untuk memilih file apa pun di perangkat mereka]
Sebelumnya, tidak ada opsi untuk mengubah konfigurasi default i ini. e. pengembang yang ingin menggunakan perpustakaan harus menunjukkan opsi pemindaian kamera dan file meskipun kasus penggunaan mereka terbatas pada salah satunya. Ada permintaan fitur untuk membuka ini sebagai konfigurasi
Permintaan fitur
Permintaan fitur ini diajukan untuk mencari dukungan untuk mengontrol semua jenis pemindaian yang harus dirender saat menggunakan pustaka
Ini sepertinya item yang berdampak bagi saya untuk mulai berkontribusi pada proyek ini
Saya menambahkan konfigurasi di {
supportedScanTypes: [
Html5QrcodeScanType.SCAN_TYPE_FILE,
Html5QrcodeScanType.SCAN_TYPE_CAMERA
]
}
_9 untuk mendukung ini
{
supportedScanTypes: [
Html5QrcodeScanType.SCAN_TYPE_FILE,
Html5QrcodeScanType.SCAN_TYPE_CAMERA
]
}
Saya dapat menambahkan opsi konfigurasi baru, sehingga pengguna dapat melakukannya
- Gunakan hanya pemindaian berbasis Kamera
- Atau hanya pemindaian berbasis file
- Atau gunakan keduanya, ini juga merupakan opsi default
Untuk mengonfigurasi fitur dengan
{
supportedScanTypes: [
Html5QrcodeScanType.SCAN_TYPE_FILE,
Html5QrcodeScanType.SCAN_TYPE_CAMERA
]
}
9, seseorang hanya perlu menyetel opsi supportedScanTypes: [ Html5QrcodeScanType.SCAN_TYPE_CAMERA ],
1 seperti inilet html5QrcodeScanner = new Html5QrcodeScanner[
"reader",
{
fps: 10,
qrbox: qrboxFunction,
experimentalFeatures: {
useBarCodeDetectorIfSupported: true
},
rememberLastUsedCamera: true,
supportedScanTypes: [
Html5QrcodeScanType.SCAN_TYPE_FILE,
Html5QrcodeScanType.SCAN_TYPE_CAMERA
],
aspectRatio: 1.7777778
}];
Perhatikan bahwa
{
supportedScanTypes: [
Html5QrcodeScanType.SCAN_TYPE_FILE,
Html5QrcodeScanType.SCAN_TYPE_CAMERA
]
}
Apakah ini konfigurasi yang relevan di sini. Inilah contoh skenario yang berbeda
[1] Pengguna hanya membutuhkan pemindaian berbasis kamera
Dalam hal ini, tetapkan nilai
supportedScanTypes: [ Html5QrcodeScanType.SCAN_TYPE_CAMERA ],
1 seperti inisupportedScanTypes: [ Html5QrcodeScanType.SCAN_TYPE_CAMERA ],
Ini akan membuat Pemindai QR menjadi seperti ini
[2] Pengguna hanya membutuhkan pemindaian berbasis file
Di sini atur nilai
supportedScanTypes: [ Html5QrcodeScanType.SCAN_TYPE_CAMERA ],
_1 seperti ini{
supportedScanTypes: [Html5QrcodeScanType.SCAN_TYPE_FILE]
}
_Ini akan membuat Pemindai QR menjadi seperti ini
[3] Pengguna ingin mendukung opsi berbasis kamera dan file
Ini adalah opsi default. Dan kecuali Anda memiliki kebutuhan khusus untuk menonaktifkan salah satu dari keduanya, saya sarankan Anda untuk menggunakan ini
Jika kami tidak menetapkan nilai apa pun untuk
supportedScanTypes: [ Html5QrcodeScanType.SCAN_TYPE_CAMERA ],
1, perpustakaan akan mendukung kedua jenis pemindaian secara defaultBonus. Tetapkan pemindaian berbasis file sebagai opsi default sambil mendukung keduanya
Tambahan bonus untuk fitur ini adalah - urutan konfigurasi juga dihormati oleh perpustakaan. Jika Anda ingin mendukung opsi pemindaian berbasis file dan kamera tetapi ingin menetapkan opsi berbasis file sebagai default, Anda dapat mengonfigurasi
supportedScanTypes: [ Html5QrcodeScanType.SCAN_TYPE_CAMERA ],
1 seperti ini{
supportedScanTypes: [
Html5QrcodeScanType.SCAN_TYPE_FILE,
Html5QrcodeScanType.SCAN_TYPE_CAMERA
]
}
Ini akan membuat Pemindai QR menjadi seperti ini
Jika tidak, secara default perpustakaan menjadikan opsi berbasis kamera sebagai opsi default
Demikian pula, Anda dapat menentukan opsi berbasis kamera sebagai opsi default
Ini juga merupakan skenario default. Jadi jika Anda tidak melakukan apa pun secara eksplisit, perpustakaan hanya akan berperilaku seperti ini
{
supportedScanTypes: [
Html5QrcodeScanType.SCAN_TYPE_CAMERA,
Html5QrcodeScanType.SCAN_TYPE_FILE
]
}
Jika Anda memberikan nilai arbitrer, perpustakaan akan menampilkan kesalahan
Saya kira ini tidak perlu dikatakan lagi
Jika Anda memberikan nilai selain yang didukung - perpustakaan akan menampilkan kesalahan
Ringkasan
Pengembang sekarang dapat mengubah jenis metode pemindaian saat menggunakan perpustakaan
{
supportedScanTypes: [
Html5QrcodeScanType.SCAN_TYPE_FILE,
Html5QrcodeScanType.SCAN_TYPE_CAMERA
]
}
9- Pengembang dapat memilih untuk hanya memberikan dukungan Kamera
- Pengembang dapat memilih untuk hanya memberikan dukungan pemilihan File
- Pengembang dapat memilih untuk mendukung keduanya tetapi memilih file atau kamera sebagai opsi default
Jika Anda memiliki umpan balik, silakan bagikan di bagian komentar. Untuk setiap laporan bug atau permintaan fitur, harap laporkan langsung ke perpustakaan html5-qrcode
Menggunakan Flash atau Torch dengan Html5-Qrcode 30 Okt 2022 oleh Minhazhtml5-qrcode adalah pustaka sumber terbuka yang cukup digunakan untuk mengimplementasikan Kode QR atau pemindai kode batang dalam aplikasi web. Ini memiliki 400K+ unduhan di Github dan sekitar 31K unduhan/minggu di npm
Saya menulis perpustakaan ini di masa kuliah saya dan telah mempertahankan proyek ini sejak 2014 [Jika saya ingat dengan benar]
Cukup membual, kembali ke topik …
Hampir semua smartphone saat ini hadir dengan kamera yang dipadukan dengan lampu flash. Itu juga digunakan sebagai obor saat merekam video. Sebagian besar aplikasi pemindaian QR yang tersedia di Android atau iOS memiliki dukungan untuk mengaktifkan senter saat memindai. Ini tampaknya berguna saat memindai kode dalam kondisi kurang cahaya
Permintaan fitur
Ada permintaan fitur pada pelacak proyek Github untuk menambahkan fungsionalitas yang sama ke pustaka html5-qrcode
Ini adalah usecase yang sangat menarik - karena menunjukkan kekuatan web dalam mengontrol perangkat keras tingkat rendah pada smartphone
Dukungan ditambahkan untuk {
supportedScanTypes: [
Html5QrcodeScanType.SCAN_TYPE_FILE,
Html5QrcodeScanType.SCAN_TYPE_CAMERA
]
}
_9
{
supportedScanTypes: [
Html5QrcodeScanType.SCAN_TYPE_FILE,
Html5QrcodeScanType.SCAN_TYPE_CAMERA
]
}
Mempertimbangkan nilai tambah bagi pengguna akhir, saya telah menambahkan dukungan untuk menggunakan obor [bila didukung] ke pustaka ujung ke ujung [i. e. ]
Fitur ini ditambahkan sebagai tombol lain yang muncul jika
- Fitur ini diaktifkan dari konfigurasi [dinonaktifkan secara default]
- Kontrol obor didukung pada browser + perangkat yang diberikan
Ini terlihat seperti ini
Anda dapat mencobanya di scanapp. org
Sejauh ini saya telah memverifikasinya untuk berfungsi pada perangkat Android di browser seperti Google Chrome dan browser internet default Samsung. Saya telah memverifikasinya agar berfungsi pada perangkat Pixel 6 Pro, Samsung Flip 4, dan One Plus 10 Pro
Saya juga telah memverifikasinya agar tidak berfungsi di Chrome atau Safari di iOS [di Iphone 13]
Mengapa?
Dukungan ditambahkan dengan PR#570. Itu telah diterbitkan di bawah
supportedScanTypes: [ Html5QrcodeScanType.SCAN_TYPE_CAMERA ],
_8Untuk mengaktifkan fitur dengan
{
supportedScanTypes: [
Html5QrcodeScanType.SCAN_TYPE_FILE,
Html5QrcodeScanType.SCAN_TYPE_CAMERA
]
}
9 seseorang hanya perlu mengatur {
supportedScanTypes: [Html5QrcodeScanType.SCAN_TYPE_FILE]
}
0 ke {
supportedScanTypes: [Html5QrcodeScanType.SCAN_TYPE_FILE]
}
1let html5QrcodeScanner = new Html5QrcodeScanner[
"reader",
{
fps: 10,
qrbox: {width: 250, height: 250},
rememberLastUsedCamera: true,
aspectRatio: 1.7777778,
showTorchButtonIfSupported: true
}];
Bagaimana itu bekerja?
Dan cara setting flash atau torch dengan library
2{ supportedScanTypes: [Html5QrcodeScanType.SCAN_TYPE_FILE] }
Pertama, Anda perlu memeriksa apakah
{
supportedScanTypes: [Html5QrcodeScanType.SCAN_TYPE_FILE]
}
3 didukung. Cuaca atau tidak {
supportedScanTypes: [Html5QrcodeScanType.SCAN_TYPE_FILE]
}
3 didukung tergantung pada perangkat, browser, serta kamera yang dipilih [seringkali hanya kamera belakang yang mendukung obor]Idenya adalah untuk melihat apakah
{
supportedScanTypes: [Html5QrcodeScanType.SCAN_TYPE_FILE]
}
_3 tersedia di trek video yang sedang berjalan. Saat pemindaian kamera sedang berjalan, Anda dapat menelepon untuk memverifikasi apakah {
supportedScanTypes: [Html5QrcodeScanType.SCAN_TYPE_FILE]
}
3 didukung/** Returns {@code true} if torch is supported. */
function isTorchSupported[html5Qrcode: Html5Qrcode]: boolean {
let settings = html5Qrcode.getRunningTrackSettings[];
return "torch" in settings;
}
Jika
{
supportedScanTypes: [Html5QrcodeScanType.SCAN_TYPE_FILE]
}
_3 memang didukung, langkah selanjutnya adalah mengaktifkannya. Anda dapat menggunakan API untuk meminta pengaktifan {
supportedScanTypes: [Html5QrcodeScanType.SCAN_TYPE_FILE]
}
3let constraints: MediaTrackConstraints = {
"torch": true,
"advanced": [{ "torch": true }]
};
await html5Qrcode.applyVideoConstraints[constraints];
let settings = html5Qrcode.getRunningTrackSettings[];
if [settings.torch === true] {
// Torch was indeed enabled, succeess.
} else {
// Failure.
// Failed to set torch, why?
}
Dengan cara yang sama, Anda dapat meminta penonaktifan
{
supportedScanTypes: [Html5QrcodeScanType.SCAN_TYPE_FILE]
}
3 dengan API yang samaMengapa mengatur dua kali?
"advanced": [{ "torch": true }]
Demi kompatibilitas mundur
Dukungan browser dan perangkat
Seperti yang dibagikan sebelumnya, fitur ini tampaknya didukung di perangkat Android. Saya telah memverifikasi ini pada setidaknya tiga perangkat Android dan satu perangkat iOS
Berikut ringkasannya
Dukungan diverifikasi di beberapa perangkat Android
- Dukungan diverifikasi pada browser berikut di Android
- Google Chrome
- Peramban Internet Samsung
- Opera
- Microsoft Edge
- Peramban Berani
- Peramban Duckduckgo
- Terverifikasi kurangnya dukungan pada browser berikut di Android
- Mozilla Firefox
- Kurangnya dukungan terverifikasi di Chrome dan Safari di iOS [Iphone 13]
Jika Anda mendapat kesempatan untuk menguji lebih banyak perangkat menggunakan scanapp. org, tolong tambahkan informasi di komentar. Saya akan memperbarui artikel ini sesuai dengan itu
Kredit foto
- Terima kasih khusus untuk foto oleh Gift Habeshaw di Pexels
Suka artikel ini?
Jika Anda menyukai artikel ini, Anda dapat menemukan lebih banyak artikel saya di Medium. Jika Anda sudah menggunakan Medium, Anda dapat mengikuti saya dan berlangganan artikel saya
Jika Anda tidak menggunakan Medium, Anda dapat bergabung dengan tautan saya. Medium akan membayar saya sedikit dan itu akan membantu saya untuk menulis lebih banyak artikel seperti itu. Medium memiliki artikel dari beberapa penulis hebat
Menyetel ukuran kotak QR dinamis dalam Html5-qrcode 09 Jan 2022 oleh Minhazmebjas/html5-qrcode adalah pustaka open source yang cukup banyak digunakan untuk mengimplementasikan QR Code atau pemindai kode batang dalam aplikasi web
{
supportedScanTypes: [
Html5QrcodeScanType.SCAN_TYPE_FILE,
Html5QrcodeScanType.SCAN_TYPE_CAMERA
]
}
9Perpustakaan menyediakan dua pendekatan untuk mengintegrasikan pemindaian kode QR / kode batang dengan aplikasi web apa pun
- Pustaka inti yang disebut
2 yang menyediakan API bagi pengembang web untuk membangun antarmuka pengguna dan mengabstraksi kamera / izin / kode QR atau dekode kode batang{ supportedScanTypes: [Html5QrcodeScanType.SCAN_TYPE_FILE] }
- UI ujung ke ujung untuk pemindaian kode serta pemindaian berbasis gambar lokal menggunakan kelas
9{ supportedScanTypes: [ Html5QrcodeScanType.SCAN_TYPE_FILE, Html5QrcodeScanType.SCAN_TYPE_CAMERA ] }
Seseorang cukup mengatur pemindaian kode QR dengan baris kode berikut
{
supportedScanTypes: [
Html5QrcodeScanType.SCAN_TYPE_FILE,
Html5QrcodeScanType.SCAN_TYPE_CAMERA
]
}
0{
supportedScanTypes: [
Html5QrcodeScanType.SCAN_TYPE_FILE,
Html5QrcodeScanType.SCAN_TYPE_CAMERA
]
}
_1Konfigurasi
{
supportedScanTypes: [
Html5QrcodeScanType.SCAN_TYPE_FILE,
Html5QrcodeScanType.SCAN_TYPE_CAMERA
]
}
3 memungkinkan pengembang menentukan porsi jendela bidik yang akan digunakan untuk pemindaian. Ini didukung baik di kelas {
supportedScanTypes: [Html5QrcodeScanType.SCAN_TYPE_FILE]
}
_2 maupun {
supportedScanTypes: [
Html5QrcodeScanType.SCAN_TYPE_FILE,
Html5QrcodeScanType.SCAN_TYPE_CAMERA
]
}
9. Berdasarkan nilai ini, perpustakaan merender sebuah kotak dengan daerah berbayang di sekitarnya, memungkinkan pengguna akhir menyusun perangkat pemindaian di sekitar kode QR atau kode batang.{
supportedScanTypes: [
Html5QrcodeScanType.SCAN_TYPE_FILE,
Html5QrcodeScanType.SCAN_TYPE_CAMERA
]
}
_3 konfigurasi
{
supportedScanTypes: [
Html5QrcodeScanType.SCAN_TYPE_FILE,
Html5QrcodeScanType.SCAN_TYPE_CAMERA
]
}
Berdasarkan pada Anda dapat memberikan dimensi tipe
{
supportedScanTypes: [
Html5QrcodeScanType.SCAN_TYPE_FILE,
Html5QrcodeScanType.SCAN_TYPE_CAMERA
]
}
7 sebagai nilai untuk konfigurasi ini{
supportedScanTypes: [
Html5QrcodeScanType.SCAN_TYPE_FILE,
Html5QrcodeScanType.SCAN_TYPE_CAMERA
]
}
_2Jadi ini berarti untuk usecase pemindaian barcode Anda dapat melewati konfigurasi non persegi seperti
{
supportedScanTypes: [
Html5QrcodeScanType.SCAN_TYPE_FILE,
Html5QrcodeScanType.SCAN_TYPE_CAMERA
]
}
8 untuk merender pemindai seperti ini - kemungkinan ideal untuk memindai barcode persegi panjangPengaturan {
supportedScanTypes: [
Html5QrcodeScanType.SCAN_TYPE_FILE,
Html5QrcodeScanType.SCAN_TYPE_CAMERA
]
}
_3 konfigurasi secara dinamis
{
supportedScanTypes: [
Html5QrcodeScanType.SCAN_TYPE_FILE,
Html5QrcodeScanType.SCAN_TYPE_CAMERA
]
}
Dengan
{
supportedScanTypes: [
Html5QrcodeScanType.SCAN_TYPE_CAMERA,
Html5QrcodeScanType.SCAN_TYPE_FILE
]
}
_0 dan seterusnya, pustaka sekarang juga mendukung penerusan fungsi bertipe {
supportedScanTypes: [
Html5QrcodeScanType.SCAN_TYPE_CAMERA,
Html5QrcodeScanType.SCAN_TYPE_FILE
]
}
1 sebagai nilai untuk konfigurasi ini{
supportedScanTypes: [
Html5QrcodeScanType.SCAN_TYPE_FILE,
Html5QrcodeScanType.SCAN_TYPE_CAMERA
]
}
_3Fungsi mengambil dimensi jendela bidik [aliran video dengan umpan kamera] dan diharapkan untuk mengembalikan
{
supportedScanTypes: [
Html5QrcodeScanType.SCAN_TYPE_FILE,
Html5QrcodeScanType.SCAN_TYPE_CAMERA
]
}
7Ini bagus, dengan ini Anda sekarang dapat mengatur fungsi khusus untuk menentukan dimensi kotak QR berdasarkan properti run time dari aliran video yang berfungsi di berbagai faktor bentuk
Ini sebuah contoh
{
supportedScanTypes: [
Html5QrcodeScanType.SCAN_TYPE_FILE,
Html5QrcodeScanType.SCAN_TYPE_CAMERA
]
}
_4Dengan ini, Anda dapat mengatur dimensi kotak QR agar selalu
{
supportedScanTypes: [
Html5QrcodeScanType.SCAN_TYPE_CAMERA,
Html5QrcodeScanType.SCAN_TYPE_FILE
]
}
3 dari tepi yang lebih kecil dari aliran video sehingga berfungsi pada platform seluler dan PCPustaka open source untuk QR Code dan pemindaian barcode dengan ReactJs 11 Des 2021 oleh MinhazArtikel ini telah diambil dari artikel asli oleh Penulis di blog. minhazav. dev
QR dan pemindai kode batang di React
[ Baca selengkapnya ]
Perkenalan
Saya rasa ReactJs tidak memerlukan penjelasan apa pun di sini dan sepanjang artikel ini saya akan berasumsi bahwa pembaca sudah terbiasa dengan
{
supportedScanTypes: [
Html5QrcodeScanType.SCAN_TYPE_CAMERA,
Html5QrcodeScanType.SCAN_TYPE_FILE
]
}
4, {
supportedScanTypes: [
Html5QrcodeScanType.SCAN_TYPE_CAMERA,
Html5QrcodeScanType.SCAN_TYPE_FILE
]
}
5, {
supportedScanTypes: [
Html5QrcodeScanType.SCAN_TYPE_CAMERA,
Html5QrcodeScanType.SCAN_TYPE_FILE
]
}
6, {
supportedScanTypes: [
Html5QrcodeScanType.SCAN_TYPE_CAMERA,
Html5QrcodeScanType.SCAN_TYPE_FILE
]
}
7 dllJika Anda hanya tertarik untuk mengimplementasikan kode QR atau pemindaian kode batang di web tanpa reaksi, saya sarankan Anda membaca artikel ini
Pemindai QR dan kode batang menggunakan HTML dan JavaScript
[ Baca selengkapnya ]
Instal perpustakaan menggunakan npm
Pertama, instal versi terbaru pustaka di proyek React Anda, menggunakan
{
supportedScanTypes: [
Html5QrcodeScanType.SCAN_TYPE_CAMERA,
Html5QrcodeScanType.SCAN_TYPE_FILE
]
}
8{
supportedScanTypes: [
Html5QrcodeScanType.SCAN_TYPE_FILE,
Html5QrcodeScanType.SCAN_TYPE_CAMERA
]
}
5Buat komponen Bereaksi
Langkah selanjutnya adalah membuat React yang mengabstraksi sebagian besar implementasi pemindai. Katakanlah kita membuat file baru bernama
{
supportedScanTypes: [
Html5QrcodeScanType.SCAN_TYPE_CAMERA,
Html5QrcodeScanType.SCAN_TYPE_FILE
]
}
9{
supportedScanTypes: [
Html5QrcodeScanType.SCAN_TYPE_FILE,
Html5QrcodeScanType.SCAN_TYPE_CAMERA
]
}
_6Catatan penting. html5-qrcode adalah perpustakaan yang dikembangkan secara aktif. Dianjurkan untuk berlangganan pembaruan di mebjas/html5-qrcode sehingga Anda dapat terus memperbarui perpustakaan React
Gunakan plugin ini di Aplikasi React Anda
Saya akan menganggap Anda memiliki
let html5QrcodeScanner = new Html5QrcodeScanner[
"reader",
{
fps: 10,
qrbox: {width: 250, height: 250},
rememberLastUsedCamera: true,
aspectRatio: 1.7777778,
showTorchButtonIfSupported: true
}];
_0 yang merupakan komponen sumber. Anda dapat menambahkan let html5QrcodeScanner = new Html5QrcodeScanner[
"reader",
{
fps: 10,
qrbox: {width: 250, height: 250},
rememberLastUsedCamera: true,
aspectRatio: 1.7777778,
showTorchButtonIfSupported: true
}];
_1 baru yang baru saja kita buat{
supportedScanTypes: [
Html5QrcodeScanType.SCAN_TYPE_FILE,
Html5QrcodeScanType.SCAN_TYPE_CAMERA
]
}
_7Melewati callback
Anda mungkin telah melihat panggilan balik yang ditentukan di bagian di atas
{
supportedScanTypes: [
Html5QrcodeScanType.SCAN_TYPE_FILE,
Html5QrcodeScanType.SCAN_TYPE_CAMERA
]
}
_8Gunakan panggilan balik ini untuk menentukan sisa logika bisnis Anda. Katakanlah kasus penggunaan Anda adalah meneruskan hasil yang baru dipindai dan mencetak pada
let html5QrcodeScanner = new Html5QrcodeScanner[
"reader",
{
fps: 10,
qrbox: {width: 250, height: 250},
rememberLastUsedCamera: true,
aspectRatio: 1.7777778,
showTorchButtonIfSupported: true
}];
2, Anda ingin meneruskan data ke komponen lain. Anda dapat menemukan contohnya di scanapp-org/html5-qrcode-reactReferensi kode lengkap
Contoh lengkap telah dibuat di scanapp-org/html5-qrcode-react - Anda dapat menggunakannya sebagai referensi yang bagus
Kredit
ScanApp - Kode QR dan pemindai kode batang gratis untuk web
scanapp. org adalah pembaca kode QR dan barcode online gratis untuk web yang dibangun menggunakan pustaka ini - cobalah
Catatan penutup
Harus saya akui, saya tidak paham React, jika Anda melihat kesalahan atau mengetahui cara yang lebih baik untuk melakukan sesuatu, harap sarankan menggunakan komentar atau kirim permintaan tarik ke scanapp-org/html5-qrcode-react