Add a Scan Barcode Action

You can add the Scan Barcode action when you want your application to decode information such as URLs, Wi-Fi connections, and contact details from QR codes and barcodes.

For API information about this action, see Scan Barcode in the Oracle Visual Builder Page Model Reference.

Note:

The Scan Barcode action relies on the Shape Detection API for browsers and is only supported by these operating systems: Operating system support.

To use a scan barcode action:

1. Add the action in one of three ways, as explained at the end of Built-In Actions.
   
   
   Description of the illustration jsac-scan-barcode-action-example.jpg
   
   
2. Specify the action's properties in the Properties pane:
   1. Update the ID field to make the action more identifiable.
   2. In the Image field, enter an image object (either a CanvasImageSource, Blob, ImageData, or an <img> element) to decode.

      Note:

      If you're using the camera component to pass a Blob to the Scan Barcode action, you might run into the Failed to execute 'detect' on 'BarcodeDetector error. To get around this error, convert the Blob to an ImageBitmap before passing it to the Scan Barcode action. For example:

      1. Add a module function to do the image conversion, something like:

           // Convert Blob to ImageBitmap
           //
          PageModule.prototype.createImageBitmap = function(fileBlob) {
             return window.createImageBitmap(fileBlob);
           };

      2. Add a Call Function action to the action chain, similar to:
         
         
         Description of the illustration jsac-scan-barcode-example-chain.jpg
         
         
      3. Pass the converted ImageBitmap as the Image property for the Scan Barcode action.
   3. Optional: For the Formats property, select the barcode formats you want the browser to search for.

      Barcode formats unlock a variety of use cases. QR codes can be used for online payments, web navigation, or social media connections, aztec codes can be used to scan boarding passes, and shopping apps can use EAN or UPC barcodes to compare prices of physical items.

      If Formats is not specified, the browser will search all supported formats, so limiting the search to a particular subset of supported formats may provide better performance.

On success, a DetectedBarcode object is returned using the auto-generated variable shown by the Store Result In property. If the browser does not support the Shape Detection API or if a specified format is not supported, an exception is thrown.