In the May release of Oracle Visual Builder we include a new action that lets you scan and decode barcodes and qr codes. Below you can see a quick video showing you how to incorporate it into your application.
The new scan barcode action accepts a bitmap image and translates the raw value out of it. You will usually use it after a take picture action or with the camera component in the UI. These two operations return a blob file, so you'll want to pass it to a JavaScript function that will convert it to the needed format. The function used in the demo is this:
PageModule.prototype.createImageBitmap = function(fileBlob) {
return window.createImageBitmap(fileBlob);
};
Then you can pass the result from the function to the scan barcode action and that action will return the rawvalue from the decode operation. You can assign that value to a variable in your app if you need to further process it or pass it to other actions.
Check out this quick demo to see how we use it in a PWA mobile app.
One important note to keep in mind – the barcode scan relies on the detectionAPI that is currently supported on a limited set of browsers check the list to make sure the platform you are targeting is supported.
Updates 2023
- If you need an alternative barcode scanner with more functionality and support for other platforms have a look at this alternative commercial solution.
- If you are using JavaScript action chain – an example action chain for picking a QR file, converting it, and decoding would look like this:
And the code would be:
async run(context, { files }) {
const { $page, $flow, $application } = context;
const callFunctionResult = await this.createimage(context, { file: files[0] });
const barcode2Result = await Actions.barcode(context, {
image: callFunctionResult,
formats: [
'qr_code',
],
});
$page.variables.decoded = barcode2Result.rawValue;
}
/**
* @param {Object} context
* @param {Object} params
* @param {any} params.file
*/
async createimage(context, { file }) {
const { $page, $flow, $application } = context;
let image = window.createImageBitmap(file);
return image;
}