Memindai kode qr menggunakan webcam di php

Pustaka pemindaian kode QR kecil yang saya pertahankan sejak 2015 telah mendapatkan lebih banyak perhatian baru-baru ini. Dan dengan kekuatan datang tanggung jawab, bug, dan permintaan fitur. Beberapa fitur utama yang diminta oleh pengembang adalah pemindaian yang lebih andal dan kemampuan untuk memindai berbagai jenis kode batang. Dengan version 2.0.0_ dan seterusnya, pengembang dapat memindai berbagai jenis kode 1D (kode batang) dan kode 2D (seperti kode QR atau AZTEC)

Artikel ini mencantumkan semua yang baru di version 2.x.x. Saya juga akan mencantumkan API dan kemampuan baru yang dapat digunakan pengembang untuk mengintegrasikan kemampuan pemindaian kode yang lebih canggih ke halaman web atau aplikasi mereka

Ini perpustakaan yang saya ambil. mebjas/html5-qrcode, demo checkout di qrcode. minhazav. dev

Diskusikan Masalah Garpu Bintang

Apa yang baru di version 2.x.x

Terbaru.

1. Kemampuan untuk memindai berbagai jenis kode 1D dan kode 2D
   • Lihat semua format yang didukung
   • Jenis format yang dipindai dan nama dikembalikan dalam callback sukses
2. Pemindaian kode yang lebih andal, memperbaiki masalah seperti masalah #134, masalah #63, masalah #140
   • Keduanya (1) & (2) dicapai dengan memigrasi pustaka decoding dari

     <!-- include the library -->
     <script src="https://unpkg.com/[email protected]/dist/html5-qrcode.min.js"></script>
     

     2 ke Zxing-js
3. [Minor] Library sekarang melaporkan error yang lebih terperinci untuk mengurangi waktu debug bagi developer
   • Misalnya, jika perpustakaan digunakan di

     <!-- include the library -->
     <script src="https://unpkg.com/[email protected]/dist/html5-qrcode.min.js"></script>
     

     3 url, masalah persisnya akan dilaporkan

Perbaikan kesehatan kode

1. Seluruh kode dimigrasikan ke TypeScript untuk pengembangan yang dapat diskalakan & lebih sedikit rawan kesalahan

2. Beberapa masalah kesehatan kode diperbaiki berdasarkan laporan Codacy dan sekarang kami memiliki nilai A di Codacy - , melacak masalah untuk pemfaktoran ulang ini

Simak untuk lebih jelasnya

Menggunakan perpustakaan

Perpustakaan memaparkan dua kelas utama

• Html5QrcodeScanner_ - Gunakan ini untuk mengatur pemindai ujung ke ujung dengan UI, dibangun di atas Html5Qrcode
  • Mengurus membangun antarmuka pengguna penuh
  • Mendukung pemindaian menggunakan kamera web atau kamera pada perangkat dengan umpan kamera waktu nyata
  • Mendukung pemindaian gambar lokal di perangkat
• Html5Qrcode - pustaka tingkat rendah, memperlihatkan API untuk membangun pemindai kode Anda

Mengintegrasikan pemindai kode menggunakan Html5QrcodeScanner

Ikuti langkah-langkah di bawah ini untuk mengintegrasikan kemampuan pemindaian kode QR atau kode batang ke dalam aplikasi web Anda

Instal perpustakaan

Anda dapat menginstal perpustakaan menggunakan

<!-- include the library -->
<script src="https://unpkg.com/[email protected]/dist/html5-qrcode.min.js"></script>

Instal menggunakan npm

npm install --save-dev html5-qrcode

Muat perpustakaan terbaru dari unpkg atau CDN lainnya

<!-- include the library -->
<script src="https://unpkg.com/[email protected]/dist/html5-qrcode.min.js"></script>

Tambahkan elemen HTML placeholder

Tambahkan elemen HTML placeholder ke halaman web Anda. UI pemindaian akan dirender dalam elemen ini. Berikan gaya yang sesuai seperti

<!-- include the library -->
<script src="https://unpkg.com/[email protected]/dist/html5-qrcode.min.js"></script>

<div id="qr-reader" style="width: 600px"></div>

<div id="qr-reader" style="width: 600px"></div>

Inisialisasi dalam javascript

Sekarang Anda dapat mengatur pemindai dengan

<div id="qr-reader" style="width: 600px"></div>

function onScanSuccess(decodedText, decodedResult) {
    console.log(`Code scanned = ${decodedText}`, decodedResult);
}
var html5QrcodeScanner = new Html5QrcodeScanner(
	"qr-reader", { fps: 10, qrbox: 250 });
html5QrcodeScanner.render(onScanSuccess);

Demo

Catatan

• Anda dapat menyesuaikan pemindai dengan mengirimkan objek konfigurasi yang berbeda -
• Callback sukses memiliki antarmuka berikut ()

/** Format of detected code. */
interface QrcodeResultFormat {
    format: Html5QrcodeSupportedFormats;
    formatName: string;
}

/** Detailed scan result. */
interface QrcodeResult {
    text: string;
    format: QrcodeResultFormat,
}

/** QrCode result object. */
interface Html5QrcodeResult {
    decodedText: string;
    result: QrcodeResult;
}

type QrcodeSuccessCallback
    = (decodedText: string, result: Html5QrcodeResult) => void;

Html5Qrcode antarmuka

Jika Anda ingin membangun antarmuka pengguna, Anda dapat menggunakan API publik yang diekspos oleh kelas Html5Qrcode

Bisakah saya memindai kode QR dengan webcam saya?

Bagaimana cara memindai kode QR menggunakan PHP?

Bagaimana cara mengimplementasikan kode QR di PHP?

Bagaimana cara memindai kode QR menggunakan webcam di JavaScript?