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.

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, depending on your preference and where you want it added:
   • Drag the action from the Actions palette onto the canvas, dropping the action either at the bottom edge of the action it is to follow, or at the top edge of the action it is to precede.
   • Double-click the action in the Actions palette to add it to an empty canvas or to the end of an action chain.
   • On the canvas, select the action you want the new action to follow, then double-click the new action in the Actions palette.

   
   

   
   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.

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