Penulis! Angga Kurniawan

🔥 hai selamat datang di laboratorium Versi Beta

Topik : membuat scan barcode dengan HTML5 QR Code scanner Javascript

Hai, kali ini saya akan berbagai mengenai cari membuat scan barcode dengan HTML5, dimana kita bisa menjadikan kamera kita sebagai alat scan barcode, ga percaya ?

simak script dibawah yah :

untuk HTML5Barcode JS nya, saya sudah siapkan cdn ya, jadi bisa gunakan cdn dibawah atau jika ingin mengambil langsung dari situs resminya bisa klik yang ada di akhir artikel ini yah.

https://filemanager.kokitindo.com/library/html5qrcodescanner.js

oke, sekarang kita lanjut membuat script pull nya :


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>test barcode</title>
	<script src="https://filemanager.kokitindo.com/library/html5qrcodescanner.js"></script>
</head>
<body>

	<center>
		<div style="width: 500px" id="reader"></div>
	</center>


	<script>
		function onScanSuccess(decodedText, decodedResult) {
		    // Handle on success condition with the decoded text or result.
		    // console.log(`Scan result: ${decodedText}`, decodedResult);
		    alert('Isi barcode anda : '+decodedText)
		}

		var html5QrcodeScanner = new Html5QrcodeScanner(
			"reader", { fps: 10, qrbox: 250 });
		html5QrcodeScanner.render(onScanSuccess);


	</script>

</body>
</html>
nah itu adalah script full nya, jika teman-teman copy dan jalankan di local, maka akan menampilkan pembuka kamera untuk me-scan qrcode.

jika kalian ingin melakukan customisasi, silahkan kunjungi link resimnya yah.

Link resmi : https://blog.minhazav.dev/research/html5-qrcode.html


Selamat Mencoba.