I have a problem with my web source code. I have made sure that the site is accessed via https and camera access permission is granted. However, the barcode scan display does not appear and only displays a white blank. I tried to access it via chrome on android.
This is my code
<?php
$satuan_list = ['pcs', 'dus', 'pack', 'ball', 'renteng'];
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Form Input Barang</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
video {
width: 100%;
height: auto;
}
</style>
</head>
<body class="bg-light py-4">
<div class="container">
<h2 class="text-center mb-4">Form Input Barang</h2>
<form action="save_barang.php" method="POST" enctype="multipart/form-data" class="bg-white p-4 rounded shadow">
<div class="mb-3">
<label class="form-label">Nama Barang</label>
<input type="text" name="nama_barang" class="form-control" required>
</div>
<div class="mb-3">
<label class="form-label">Kode Gudang</label>
<input type="text" name="kode_gudang" class="form-control" required>
</div>
<div class="mb-3">
<label class="form-label">Vendor Penyedia</label>
<input type="text" name="vendor" class="form-control" required>
</div>
<div class="mb-4">
<label class="form-label">Foto Barang</label>
<input type="file" name="foto" class="form-control" accept="image/*" capture="environment">
</div>
<?php foreach ($satuan_list as $satuan): ?>
<div class="border rounded p-3 mb-4">
<h5 class="mb-3">Satuan: <?= ucfirst($satuan) ?></h5>
<input type="hidden" name="satuan[]" value="<?= $satuan ?>">
<div class="row g-3">
<div class="col-md-4">
<label class="form-label">Stok (<?= $satuan ?>)</label>
<input type="number" name="stok_<?= $satuan ?>" class="form-control">
</div>
<div class="col-md-4">
<label class="form-label d-flex justify-content-between">
<span>Barcode (<?= $satuan ?>)</span>
<button type="button" class="btn btn-sm btn-outline-primary" onclick="startScanner('barcode_<?= $satuan ?>')">Scan</button>
</label>
<input type="text" name="barcode_<?= $satuan ?>" id="barcode_<?= $satuan ?>" class="form-control barcode-input">
</div>
<div class="col-md-4">
<label class="form-label">Harga Eceran</label>
<div class="input-group">
<span class="input-group-text">Rp.</span>
<input type="number" step="0.01" name="harga_eceran_<?= $satuan ?>" class="form-control">
</div>
</div>
<div class="col-md-4">
<label class="form-label">Harga Grosir</label>
<div class="input-group">
<span class="input-group-text">Rp.</span>
<input type="number" step="0.01" name="harga_grosir_<?= $satuan ?>" class="form-control">
</div>
</div>
<div class="col-md-4">
<label class="form-label">Min. Pembelian Harga Grosir</label>
<input type="number" name="min_grosir_<?= $satuan ?>" class="form-control">
</div>
<?php if ($satuan != 'pcs'): ?>
<div class="col-md-4">
<label class="form-label">Isi per <?= $satuan ?> (pcs)</label>
<input type="number" name="isi_per_pcs_<?= $satuan ?>" class="form-control">
</div>
<?php endif; ?>
</div>
</div>
<?php endforeach; ?>
<div class="d-grid gap-2">
<button type="submit" class="btn btn-primary">Simpan Barang</button>
<a href="list_barang.php" class="btn btn-secondary">Lihat Daftar Barang</a>
</div>
</form>
<!-- Modal Scanner -->
<div class="modal fade" id="scannerModal" tabindex="-1" aria-labelledby="scannerModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Scan Barcode</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup" onclick="stopScanner()"></button>
</div>
<div class="modal-body">
<video id="preview" autoplay muted playsinline style="width: 100%; border: 1px solid #ccc; border-radius: .5rem;"></video>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-bs-dismiss="modal" onclick="stopScanner()">Tutup</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/@ericblade/[email protected]/dist/quagga.min.js"></script>
<script>
let activeInput = null;
const scannerModal = new bootstrap.Modal(document.getElementById('scannerModal'));
function startScanner(inputId) {
activeInput = document.getElementById(inputId);
scannerModal.show();
if (Quagga.running) {
Quagga.stop();
}
console.log("Mulai inisialisasi scanner...");
Quagga.init({
inputStream: {
type: "LiveStream",
constraints: {
facingMode: "environment"
},
target: document.querySelector('#preview')
},
decoder: {
readers: ["ean_reader", "code_128_reader", "upc_reader"]
}
}, function(err) {
if (err) {
console.error("Gagal inisialisasi Quagga:", err);
alert("Tidak bisa akses kamera: " + err.message);
return;
}
console.log("Scanner berhasil dijalankan!");
Quagga.start();
});
}
function stopScanner() {
if (Quagga.running) {
Quagga.stop();
}
}
Quagga.onDetected(result => {
if (!result || !result.codeResult || !result.codeResult.code) return;
const code = result.codeResult.code;
if (activeInput) {
activeInput.value = code;
stopScanner();
scannerModal.hide();
}
});
</script>
</body>
</html>
and I also attached the display via the Android Chrome web