Kamera belakang pembaca kode html5 qr

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

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
    ]
}

supportedScanTypes: [ Html5QrcodeScanType.SCAN_TYPE_CAMERA ],

let 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 ],

supportedScanTypes: [ 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 ],

{
    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 ],

Bonus. 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 ],

{
    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
    ]
}

• 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

html5-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

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

1. Fitur ini diaktifkan dari konfigurasi (dinonaktifkan secara default)
2. 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 ],

Untuk mengaktifkan fitur dengan

{
    supportedScanTypes: [
        Html5QrcodeScanType.SCAN_TYPE_FILE, 
        Html5QrcodeScanType.SCAN_TYPE_CAMERA
    ]
}

{
    supportedScanTypes: [Html5QrcodeScanType.SCAN_TYPE_FILE]
}

{
    supportedScanTypes: [Html5QrcodeScanType.SCAN_TYPE_FILE]
}

let 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

{
    supportedScanTypes: [Html5QrcodeScanType.SCAN_TYPE_FILE]
}

2

Pertama, Anda perlu memeriksa apakah

{
    supportedScanTypes: [Html5QrcodeScanType.SCAN_TYPE_FILE]
}

{
    supportedScanTypes: [Html5QrcodeScanType.SCAN_TYPE_FILE]
}

Idenya adalah untuk melihat apakah

{
    supportedScanTypes: [Html5QrcodeScanType.SCAN_TYPE_FILE]
}

{
    supportedScanTypes: [Html5QrcodeScanType.SCAN_TYPE_FILE]
}

/** 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]
}

{
    supportedScanTypes: [Html5QrcodeScanType.SCAN_TYPE_FILE]
}

let 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]
}

Mengapa 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

mebjas/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
    ]
}

Perpustakaan menyediakan dua pendekatan untuk mengintegrasikan pemindaian kode QR / kode batang dengan aplikasi web apa pun

1. Pustaka inti yang disebut

   {
       supportedScanTypes: [Html5QrcodeScanType.SCAN_TYPE_FILE]
   }
   

   2 yang menyediakan API bagi pengembang web untuk membangun antarmuka pengguna dan mengabstraksi kamera / izin / kode QR atau dekode kode batang
2. UI ujung ke ujung untuk pemindaian kode serta pemindaian berbasis gambar lokal menggunakan kelas

   {
       supportedScanTypes: [
           Html5QrcodeScanType.SCAN_TYPE_FILE, 
           Html5QrcodeScanType.SCAN_TYPE_CAMERA
       ]
   }
   

   9

Seseorang cukup mengatur pemindaian kode QR dengan baris kode berikut

{
    supportedScanTypes: [
        Html5QrcodeScanType.SCAN_TYPE_FILE, 
        Html5QrcodeScanType.SCAN_TYPE_CAMERA
    ]
}

{
    supportedScanTypes: [
        Html5QrcodeScanType.SCAN_TYPE_FILE, 
        Html5QrcodeScanType.SCAN_TYPE_CAMERA
    ]
}

Konfigurasi

{
    supportedScanTypes: [
        Html5QrcodeScanType.SCAN_TYPE_FILE, 
        Html5QrcodeScanType.SCAN_TYPE_CAMERA
    ]
}

{
    supportedScanTypes: [Html5QrcodeScanType.SCAN_TYPE_FILE]
}

{
    supportedScanTypes: [
        Html5QrcodeScanType.SCAN_TYPE_FILE, 
        Html5QrcodeScanType.SCAN_TYPE_CAMERA
    ]
}

{ supportedScanTypes: [ Html5QrcodeScanType.SCAN_TYPE_FILE, Html5QrcodeScanType.SCAN_TYPE_CAMERA ] } _3 konfigurasi

Berdasarkan pada Anda dapat memberikan dimensi tipe

{
    supportedScanTypes: [
        Html5QrcodeScanType.SCAN_TYPE_FILE, 
        Html5QrcodeScanType.SCAN_TYPE_CAMERA
    ]
}

{
    supportedScanTypes: [
        Html5QrcodeScanType.SCAN_TYPE_FILE, 
        Html5QrcodeScanType.SCAN_TYPE_CAMERA
    ]
}

Jadi ini berarti untuk usecase pemindaian barcode Anda dapat melewati konfigurasi non persegi seperti

{
    supportedScanTypes: [
        Html5QrcodeScanType.SCAN_TYPE_FILE, 
        Html5QrcodeScanType.SCAN_TYPE_CAMERA
    ]
}

Pengaturan { supportedScanTypes: [ Html5QrcodeScanType.SCAN_TYPE_FILE, Html5QrcodeScanType.SCAN_TYPE_CAMERA ] } _3 konfigurasi secara dinamis

Dengan

{
    supportedScanTypes: [
        Html5QrcodeScanType.SCAN_TYPE_CAMERA,
        Html5QrcodeScanType.SCAN_TYPE_FILE
    ]
}

{
    supportedScanTypes: [
        Html5QrcodeScanType.SCAN_TYPE_CAMERA,
        Html5QrcodeScanType.SCAN_TYPE_FILE
    ]
}

{
    supportedScanTypes: [
        Html5QrcodeScanType.SCAN_TYPE_FILE, 
        Html5QrcodeScanType.SCAN_TYPE_CAMERA
    ]
}

Fungsi mengambil dimensi jendela bidik (aliran video dengan umpan kamera) dan diharapkan untuk mengembalikan

{
    supportedScanTypes: [
        Html5QrcodeScanType.SCAN_TYPE_FILE, 
        Html5QrcodeScanType.SCAN_TYPE_CAMERA
    ]
}

Ini 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
    ]
}

Dengan ini, Anda dapat mengatur dimensi kotak QR agar selalu

{
    supportedScanTypes: [
        Html5QrcodeScanType.SCAN_TYPE_CAMERA,
        Html5QrcodeScanType.SCAN_TYPE_FILE
    ]
}

Artikel ini telah diambil dari artikel asli oleh Penulis di blog. minhazav. dev

QR dan pemindai kode batang di React

mebjas/html5-qrcode adalah pustaka open source yang cukup banyak digunakan untuk mengimplementasikan QR Code atau pemindai kode batang dalam aplikasi web. Ada beberapa pengembang yang telah menggunakannya di bawah tampilan web untuk proyek android juga. Pada artikel ini saya akan menjelaskan cara menggunakan html5-qrcode dengan React sehingga lebih mudah bagi pengembang yang menggunakan framework React populer untuk fungsi ini dengan mudah

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
    ]
}

{
    supportedScanTypes: [
        Html5QrcodeScanType.SCAN_TYPE_CAMERA,
        Html5QrcodeScanType.SCAN_TYPE_FILE
    ]
}

{
    supportedScanTypes: [
        Html5QrcodeScanType.SCAN_TYPE_CAMERA,
        Html5QrcodeScanType.SCAN_TYPE_FILE
    ]
}

{
    supportedScanTypes: [
        Html5QrcodeScanType.SCAN_TYPE_CAMERA,
        Html5QrcodeScanType.SCAN_TYPE_FILE
    ]
}

Jika 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

Artikel ini adalah panduan untuk mengintegrasikan kode QR atau pemindai kode batang pada aplikasi web apa pun dengan beberapa baris kode dengan mudah menggunakan mebjas/html5-qrcode

Instal perpustakaan menggunakan npm

Pertama, instal versi terbaru pustaka di proyek React Anda, menggunakan

{
    supportedScanTypes: [
        Html5QrcodeScanType.SCAN_TYPE_CAMERA,
        Html5QrcodeScanType.SCAN_TYPE_FILE
    ]
}

{
    supportedScanTypes: [
        Html5QrcodeScanType.SCAN_TYPE_FILE, 
        Html5QrcodeScanType.SCAN_TYPE_CAMERA
    ]
}

Buat 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
    ]
}

{
    supportedScanTypes: [
        Html5QrcodeScanType.SCAN_TYPE_FILE, 
        Html5QrcodeScanType.SCAN_TYPE_CAMERA
    ]
}

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

let html5QrcodeScanner = new Html5QrcodeScanner(
    "reader",
    {
        fps: 10,
        qrbox: {width: 250, height: 250},
        rememberLastUsedCamera: true,
        aspectRatio: 1.7777778,
        showTorchButtonIfSupported: true
    });

{
    supportedScanTypes: [
        Html5QrcodeScanType.SCAN_TYPE_FILE, 
        Html5QrcodeScanType.SCAN_TYPE_CAMERA
    ]
}

Melewati callback

Anda mungkin telah melihat panggilan balik yang ditentukan di bagian di atas

{
    supportedScanTypes: [
        Html5QrcodeScanType.SCAN_TYPE_FILE, 
        Html5QrcodeScanType.SCAN_TYPE_CAMERA
    ]
}

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

Referensi 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

Bagaimana cara membaca kode QR di html5?

Cara menggunakan .

npm i html5-qrcode

Reply 1 0 Membagikan

Pos Terkait

Cara menjalankan file sql di terminal mysql

Cara menggunakan mysql recover deleted table

Bagaimana cara mengonversi daftar ke kolom kerangka data dengan python?

Cara menggunakan create table mysql python

Lembar google jika sel tidak kosong

Cara menggunakan html dasar

Bagaimana cara mengakses database mysql?

Cara melewati jalur file dalam fungsi javascript

Dapatkah saya menghubungkan python ke database mysql?

Cadangan otomatis database mysql linux

Tentang Kami

• Hubungi Kami
• Support
• Careers
• Periklanan

Legal

• Privacy Policy
• Terms of Services
• Cookie Policy

Dukungan

• Knowledge Base
• Remove a question
• Support

Social

• Facebook
• Twitter
• LinkedIn
• Instagram

---

Copyright © 2023 lovelyristin.com Inc.