Implementasi JavaScript untuk memindai kode QR menggunakan library jsQR dan WebRTC untuk mengakses kamera:
HTML:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Pemindai Kode QR</title>
</head>
<body>
<video id="preview" width="300" height="225"></video>
<canvas id="canvas" style="display:none;"></canvas>
<p id="result"></p>
<script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.js"></script>
<script src="script.js"></script>
</body>
</html>
JavaScript (script.js):
JavaScript
const video = document.getElementById('preview');
const canvas = document.getElementById('canvas');
const resultElement = document.getElementById('result');
const canvasContext = canvas.getContext('2d');
navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
.then(function(stream) {
video.srcObject = stream;
video.setAttribute('playsinline', true); // Diperlukan untuk iOS
video.play();
requestAnimationFrame(tick);
})
.catch(function(err) {
console.error('Tidak dapat mengakses kamera:', err);
resultElement.textContent = 'Tidak dapat mengakses kamera.';
});
function tick() {
if (video.readyState === video.HAVE_ENOUGH_DATA) {
canvas.height = video.videoHeight;
canvas.width = video.videoWidth;
canvasContext.drawImage(video, 0, 0, canvas.width, canvas.height);
const imageData = canvasContext.getImageData(0, 0, canvas.width, canvas.height);
const code = jsQR(imageData.data, imageData.width, imageData.height, {
inversionAttempts: 'dontInvert',
});
if (code) {
resultElement.textContent = 'Hasil: ' + code.data;
} else {
resultElement.textContent = 'Posisikan kode QR di depan kamera.';
}
}
requestAnimationFrame(tick);
}
Penjelasan:
- HTML:
<video>: Menampilkan video dari kamera.<canvas>: Digunakan untuk mengambil gambar dari video.<p>: Menampilkan hasil pemindaian.- Menambahkan pustaka
jsQRdari CDN. - Menambahkan file
script.js.
- JavaScript:
- Mengakses elemen HTML.
- Menggunakan
navigator.mediaDevices.getUserMedia()untuk mengakses kamera. - Menampilkan video dari kamera di elemen
<video>. - Fungsi
tick()dipanggil secara berulang menggunakanrequestAnimationFrame(). - Di dalam
tick(), gambar dari video diambil menggunakan<canvas>. jsQR()digunakan untuk memindai kode QR dari gambar.- Hasil pemindaian ditampilkan di elemen
<p>.
Langkah-langkah:
- Simpan kode HTML di atas sebagai file dengan ekstensi
.html(misalnya,index.html). - Simpan kode JavaScript di atas sebagai file dengan nama
script.jsdi direktori yang sama dengan file HTML. - Buka file
index.htmldi browser web Anda. - Izinkan akses kamera saat diminta.
- Posisikan kode QR di depan kamera.
- Hasil pemindaian akan ditampilkan di halaman.
Catatan:
- Kode ini memerlukan koneksi HTTPS untuk mengakses kamera di beberapa browser.
- Pustaka
jsQRhanya mendukung pemindaian kode QR. Untuk pemindaian barcode lainnya, Anda mungkin perlu menggunakan pustaka lain. - Beberapa perangkat mungkin memerlukan penyesuaian untuk mendapatkan kinerja pemindaian yang optimal.
Tidak ada komentar:
Posting Komentar