Scanner API
Frappe uses the open-source library Html5-QRCode to provide a flexible way to handle inputs like Barcodes, QRCodes, etc. using the device camera.
frappe.ui.Scanner
new frappe.ui.Scanner({ ... })
Creates a new Scanner instance that can be used to scan single or multiple barcodes.
Options:
container
: Dom element under which video feed from the camera will be shown.dialog
: If set astrue
, will open a dialog to show video feed from the camera.multiple
: If set asfalse
, will stop scanning after one successful scan.on\_scan
: Callback method to handle the scanned input.
Here is a sample client code to scan one single barcode and log it to the console.
new frappe.ui.Scanner({
dialog: true, // open camera scanner in a dialog
multiple: false, // stop after scanning one value
on\_scan(data) {
console.log(data.decodedText);
}
});
The below code can be used to continously scan and handle the scanned input.
const scanner = new frappe.ui.Scanner({
dialog: true, // open camera scanner in a dialog
multiple: true, // stop after scanning one value
on\_scan(data) {
handle\_scanned\_barcode(data.decodedText);
}
});
To stop the scanning, you can either close the dialog or use scanner.stop\_scan();