The Visual Builder Cloud Service Blog

Scanning Barcode and QR Codes in Visual Builder

Shay Shmeltzer
Director of Product Management - Oracle

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 in chrome, android devices, and some other browsers, but as of the writing of this blog entry Safari on iOS doesn't support this api.

Join the discussion

Comments ( 2 )
  • Elia Tuesday, July 6, 2021
    I have a problem with this code.
    The scan barcode return "No barcode detected".

    I use OVB 21.07.1

    Any idea??
  • Shay Tuesday, July 13, 2021
    This can happen if the image you are passing is not clear or out of focus - try an test your app with a qr code image from a file instead of from the camera. For further help post on our forum - https://cloudcustomerconnect.oracle.com/resources/e610f4723c/summary
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.