Scan Barcode Action

Use this action in your mobile application to scan QR codes and barcodes for details such as URLs, Wi-Fi connections, and contact information.

The action module for this action is vb/action/builtin/barcodeAction. Parameters for this action are:

Parameter Name Description

image An image object, which can be a CanvasImageSource, Blob, ImageData, or an <img> element

Parameter Name	Description
image	An image object, which can be a CanvasImageSource, Blob, ImageData, or an `<img>` element
formats	Optional: A series of barcode formats to search for, for example, one or more of the following: `['aztec', 'code_128', 'code_39', 'code_93', 'codabar', 'data_matrix', 'ean_13', 'ean_8', itf', 'pdf417', 'qr_code', 'upc_a', 'upc_e']` Note that all formats may not be supported on all platforms. 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.
convertBlob	Optional: A boolean that enables you to automatically convert a Blob to an ImageBitmap when using the Scan Barcode action to process the outcome of the Take Photo action. If `true`, the Blob object is converted as an ImageBitmap before being passed to the Scan Barcode action. If `false` (default), the Blob object is left as is. You'll need to manually do the conversion, for example, by adding a function to your application and calling the function using the `callModuleFunctionAction` in your action chain.

formats

Optional: A series of barcode formats to search for, for example, one or more of the following:

['aztec', 'code_128', 'code_39', 'code_93', 'codabar', 'data_matrix', 'ean_13', 'ean_8', itf', 'pdf417', 'qr_code', 'upc_a', 'upc_e']

Note that all formats may not be supported on all platforms.

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.

convertBlob Optional: A boolean that enables you to automatically convert a Blob to an ImageBitmap when using the Scan Barcode action to process the outcome of the Take Photo action. If true, the Blob object is converted as an ImageBitmap before being passed to the Scan Barcode action. If false (default), the Blob object is left as is. You'll need to manually do the conversion, for example, by adding a function to your application and calling the function using the callModuleFunctionAction in your action chain.

Here's an example of the barcodeAction's metadata used to read QR code from an HTML image element:

"fromImage": {
          "module": "vb/action/builtin/barcodeAction",
          "parameters": {
             "image":  "[ document.querySelector('#qrcode') ]",
             "formats": "[[ [ 'qr_code' ] ]]"
           },
           "outcomes": {
             "failure": "showError",
             "success": "openUrl"
           }
         }

Here's another example, using the barcodeAction to process the outcome of the Take Photo action as a QR code:

"qrCodeFromFile": {
          "module": "vb/action/builtin/barcodeAction",
          "parameters": {
            "image": "[[ $chain.results.takePhoto.file ]]",
            "formats": "[[ [ 'qr_code' ] ]]",
            "convertBlob": true
          },
          "outcomes": {
            "failure": "showError",
            "success": "openUrl"
          }
        }

A success outcome will include the DetectedBarcode object as a result. DetectedBarcode (https://wicg.github.io/shape-detection-api/#detectedbarcode) has a rawValue property that corresponds to the decoded string. A failure outcome will be returned if the browser does not support Shape Detection API, or if a specified format is not supported.