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 browser APIs and is supported only on Chrome for Visual Builder apps.

To add a scan barcode action to an action chain:

1. Open the Actions editor for the page.
2. Click the action chain in the list to open it in the Action Chain editor.
3. Drag Scan Barcode from the Actions palette into the action chain.

   You can drag the action onto the Add icon (  ) in the action chain, or between existing actions in the chain. The Properties pane opens when you add the action to the chain.

   
   

   
   Description of the illustration action-chain-call-scanbarcode.png

   
   
4. Specify the action's properties in the Properties pane:
   1. Update the ID field to make the action more easily 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 Take Photo Action or 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 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 scanbarcode_takephoto.png
         
         
      3. Pass the converted ImageBitmap as the Image parameter for the Scan Barcode action, for example:

         [[ $chain.results.callFunctionCreateImageBitmap ]]

   3. Optional: In the Formats field, 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.

   One option when using the Scan Barcode action is to use document.querySelector to get the image, as shown here where the first image with the ID BarcodeImage will be returned:
   
   Description of the illustration action-chain-call-scanbarcode-example.png