kali ini kita akan membuat sebuah fitur web dimana kita bisa mescan barcode dan menampilkannya di webnya memanfaatkan camera/webcam yang ada jadi tidak perlu alat khusus
kita akan menggunakan library js bernama zxing-js : //github.com/zxing-js/library
ok yang pertama kita buat struktur html dasar
Scan QrCode
untuk bisa menampilkan preview webcam ke browser kita menggunakan tag video
lalu kita tambahkan linbrarynya
kita juga menambahkan library jquery agar lebih mudah nantinya
yang pertama kita deklarasikan beberapa vairable yang akan nanti kita gunakan
let selectedDeviceId = null; const codeReader = new ZXing.BrowserMultiFormatReader[]; const sourceSelect = $["#pilihKamera"];
kemudian kita buat fungsi untuk inisiasi camera dan scannya
function initScanner[] {
//kode didalam fungsi
}
yang pertama kita akan mengambil id camera yang ada di perangkat kita bisa jadi nanti saat web di buka di hp kita bisa memilih kamera depan atau belakang
function initScanner[] {
codeReader
.listVideoInputDevices[]
.then[videoInputDevices => {
videoInputDevices.forEach[device =>
//list kamera yang tersedia [bisa di hapus]
console.log[`${device.label}, ${device.deviceId}`]
];
if[videoInputDevices.length > 0]{
//cek jika kamera id tidak null
if[selectedDeviceId == null]{
//memebrikan nilai kamera yang dipilih secara default
if[videoInputDevices.length > 1]{
selectedDeviceId = videoInputDevices[1].deviceId
} else {
selectedDeviceId = videoInputDevices[0].deviceId
}
}
//menampilkan list kamera yang ada ke list select option jadi nanti kita bisa memilih kameranya nanti
if [videoInputDevices.length >= 1] {
sourceSelect.html[''];
videoInputDevices.forEach[[element] => {
const sourceOption = document.createElement['option']
sourceOption.text = element.label
sourceOption.value = element.deviceId
if[element.deviceId == selectedDeviceId]{
sourceOption.selected = 'selected';
}
sourceSelect.append[sourceOption]
}]
}
} else {
alert["Camera not found!"]
}
}]
.catch[err => console.error[err]];
}
lalu kita coba panggil fungsinya,tapi sebelumnya kita check apakah browser kita memiliki akses kamera atau tidak
if [navigator.mediaDevices] {
initScanner[]
} else {
alert['kamera tidak bisa di akses.'];
}
NOTE : akses kamera kadang tidak di ijinkan di localhost keculai jika sudah menggunakan https
jika kita akses maka akan muncul list device kamera yang tersedia
kemudian kita akan menampilkan preview kamera dan proses scannya
codeReader
.decodeOnceFromVideoDevice[selectedDeviceId, 'previewKamera']
.then[result => {
//hasil scan
console.log[result.text]
$["#hasilscan"].val[result.text];
if[codeReader]{
//menghentikan kamera dan proses scan
codeReader.reset[]
}
}]
.catch[err => console.error[err]];
sehingga keseluruhan kode javascriptnya menjadi seperti ini
let selectedDeviceId = null;
const codeReader = new ZXing.BrowserMultiFormatReader[];
const sourceSelect = $["#pilihKamera"];
$[document].on['change','#pilihKamera',function[]{
selectedDeviceId = $[this].val[];
if[codeReader]{
codeReader.reset[]
initScanner[]
}
}]
function initScanner[] {
codeReader
.listVideoInputDevices[]
.then[videoInputDevices => {
videoInputDevices.forEach[device =>
console.log[`${device.label}, ${device.deviceId}`]
];
if[videoInputDevices.length > 0]{
if[selectedDeviceId == null]{
if[videoInputDevices.length > 1]{
selectedDeviceId = videoInputDevices[1].deviceId
} else {
selectedDeviceId = videoInputDevices[0].deviceId
}
}
if [videoInputDevices.length >= 1] {
sourceSelect.html[''];
videoInputDevices.forEach[[element] => {
const sourceOption = document.createElement['option']
sourceOption.text = element.label
sourceOption.value = element.deviceId
if[element.deviceId == selectedDeviceId]{
sourceOption.selected = 'selected';
}
sourceSelect.append[sourceOption]
}]
}
codeReader
.decodeOnceFromVideoDevice[selectedDeviceId, 'previewKamera']
.then[result => {
//hasil scan
console.log[result.text]
$["#hasilscan"].val[result.text];
if[codeReader]{
codeReader.reset[]
}
}]
.catch[err => console.error[err]];
} else {
alert["Camera not found!"]
}
}]
.catch[err => console.error[err]];
}
if [navigator.mediaDevices] {
initScanner[]
} else {
alert['Cannot access camera.'];
}
jika sudah coba jalankan lagi,dan juga siapkan qrcode yang akan di scan
jika berhasil maka otomatis kamera akan tertutup dan menampilkan hasil scannya di inputan
jika kalian memilki banyak device kamera kalian bisa memilih kamera mana yang akan di gunakan di bagian select optionnya lalu kamera akan terbuka lagi/terreset
kode lengkapnya
Scan QrCode
let selectedDeviceId = null;
const codeReader = new ZXing.BrowserMultiFormatReader[];
const sourceSelect = $["#pilihKamera"];
$[document].on['change','#pilihKamera',function[]{
selectedDeviceId = $[this].val[];
if[codeReader]{
codeReader.reset[]
initScanner[]
}
}]
function initScanner[] {
codeReader
.listVideoInputDevices[]
.then[videoInputDevices => {
videoInputDevices.forEach[device =>
console.log[`${device.label}, ${device.deviceId}`]
];
if[videoInputDevices.length > 0]{
if[selectedDeviceId == null]{
if[videoInputDevices.length > 1]{
selectedDeviceId = videoInputDevices[1].deviceId
} else {
selectedDeviceId = videoInputDevices[0].deviceId
}
}
if [videoInputDevices.length >= 1] {
sourceSelect.html[''];
videoInputDevices.forEach[[element] => {
const sourceOption = document.createElement['option']
sourceOption.text = element.label
sourceOption.value = element.deviceId
if[element.deviceId == selectedDeviceId]{
sourceOption.selected = 'selected';
}
sourceSelect.append[sourceOption]
}]
}
codeReader
.decodeOnceFromVideoDevice[selectedDeviceId, 'previewKamera']
.then[result => {
//hasil scan
console.log[result.text]
$["#hasilscan"].val[result.text];
if[codeReader]{
codeReader.reset[]
}
}]
.catch[err => console.error[err]];
} else {
alert["Camera not found!"]
}
}]
.catch[err => console.error[err]];
}
if [navigator.mediaDevices] {
initScanner[]
} else {
alert['Cannot access camera.'];
}