This asset has the following block and functionality available:

LiveStream Block:

• Readers:List of readers comma separated for the decoder. 
  • Available readers are: code_128_reader, ean_reader, ean_5_reader, ean_2_reader, ean_8_reader, code_39_reader, code_39_vin_reader, codabar_reader, upc_reader, upc_e_reader, i2of5_reader, 2of5_reader and code_93_reader.
• AdditionalOptions:
  • InitAndStart: If set to true, starts scanning right after initialization.
  • NumOfWorkers: Number of web-workers, runs with 4 workers in its default configuration. The number should align with the number of cores available in your targeted devices.
  • EnableLocate: Enable the ability to locate a barcode in a given image.
    • Note: localizing a barcode is a computationally expensive operation and might not work properly on some devices. Another reason would be the lack of auto-focus producing blurry images which makes the localization feature very unstable.
  • LocatorSettings: This config is only relevant if the locate flag is set to true. It controls the behaviour of the localization-process and needs to be adjusted for each specific use-case.
    • HalfSample: Tells the locator-process whether it should operate on an image scaled down (half width/height, quarter pixel-count ) or not. Turning halfSample on reduces the processing-time significantly and also helps finding a barcode pattern due to implicit smoothing. It should be turned off in cases where the barcode is really small and the full resolution is needed to find the position. It’s recommended to keep it turned on and use a higher resolution video-image if needed.
    • PatchSize: Defines the density of the search-grid. The property accepts strings of the value x-small, small, medium, large and x-large. The patchSize is proportional to the size of the scanned barcodes. If you have really large barcodes which can be read close-up, then the use of large or x-large is recommended. In cases where the barcode is further away from the camera lens (lack of auto-focus, or small barcodes) then it’s advised to set the size to small or even x-small. For the latter it’s also recommended to crank up the resolution in order to find a barcode.
  • Frequency: This top-level property controls the scan-frequency of the video-stream. It’s optional and defines the maximum number of scans per second. This renders useful for cases where the scan-session is long-running and resources such as CPU power are of concern.
  • Constraints:
    • Width: Defines the physical dimensions in height of the input image.
    • Height: Defines the physical dimensions in height of the input image.
    • FacingMode: Camera facing modes can be: user, environment, left or right.
    • DeviceId: Identifier of the device/camera to use.
  • Area: Restricts the decoding area of the image. The values are given in percentage, similar to the CSS style property when using position: absolute. This area is also useful in cases the locate property is set to false, defining the rectangle for the user.
    • Top: Top offset. 
    • Right: Right offset.
    • Left: Left offset.
    • Bottom: Bottom offset.
  • SingleChannel: Only relevant in cases someone wants to debug erroneous behaviour of the decoder. If set to true the input image’s red color-channel is read instead of calculating the gray-scale values of the source’s RGB.
  • DecoderMultiple: The multiple property tells the decoder if it should continue decoding after finding a valid barcode. If multiple is set to true, the results will be returned as an array of result objects.
  • OverlayAnimation:
    • Enabled: Enable overlay animation.
    • BarCodeBoxColor: Color of the main box.
    • BarCodeBoxCenterLineColor: Color for the center line.
    • PossibleBarCodeBoxColor: Color of the box for a possible barcode. 
    • BoxLineWidth: Width of the box.
    • CenterLineWidth: Width of the center line.
• OnDetected: Triggered whenever a barcode pattern has been located and decoded successfully.

LiveStream managing actions:

• LiveStream_PauseScanner: Pauses the decoding process and maintains the video stream.
• LiveStream_StartScanner: Starts the video-stream and begins locating and decoding the images.
• LiveStream_StopScanner: If the decoder is currently running, calling stop scanner stops the decoding process. Additionally, if a camera-stream was requested upon initialization, this operation also disconnects the camera.

Static images:

• StaticImages_DecodeFromImage: Decodes barcodes for the given image.
  • Image: Image with one or more barcodes, can be a URL or base 64 data.
  • Readers: List of readers comma separated for the decoder. 
    • Available readers: code_128_reader, ean_reader, ean_5_reader, ean_2_reader, ean_8_reader, code_39_reader, code_39_vin_reader, codabar_reader, upc_reader, upc_e_reader, i2of5_reader, 2of5_reader and code_93_reader.
    • Note: when using the supplements EAN-2 and EAN-5 the order of the matters in such that the reader stops decoding when the first is found. It’s important to also mention that, if supplements are supplied, regular EAN-13 codes cannot be read any more with the same reader. If you want to read EAN-13 with and without extensions you have to add another ean_reader reader to the configuration.
  • AdditionalOptions:
    • NumOfWorkers: Number of web-workers, runs with 4 workers in its default configuration. The number should align with the number of cores available in your targeted devices.
    • InputStreamSize: as
    • Locate: Enable the ability to locate a barcode in a given image.
      •  Note: localizing a barcode is a computationally expensive operation and might not work properly on some devices. Another reason would be the lack of auto-focus producing blurry images which makes the localization feature very unstable.
    • Locator: This config is only relevant if the locate flag is set to true. It controls the behaviour of the localization-process and needs to be adjusted for each specific use-case.
      • HalfSample: Tells the locator-process whether it should operate on an image scaled down (half width/height, quarter pixel-count ) or not. Turning halfSample on reduces the processing-time significantly and also helps finding a barcode pattern due to implicit smoothing. It should be turned off in cases where the barcode is really small and the full resolution is needed to find the position. It’s recommended to keep it turned on and use a higher resolution video-image if needed.
      • PatchSize: Defines the density of the search-grid. The property accepts strings of the value x-small, small, medium, large and x-large. The patchSize is proportional to the size of the scanned barcodes. If you have really large barcodes which can be read close-up, then the use of large or x-large is recommended. In cases where the barcode is further away from the camera lens (lack of auto-focus, or small barcodes) then it’s advised to set the size to small or even x-small. For the latter it’s also recommended to crank up the resolution in order to find a barcode. 
  • DecoderMultiple: The multiple property tells the decoder if it should continue decoding after finding a valid barcode. If multiple is set to true, the results will be returned as an array of result objects.

Utils:

• GetCameraDevices: Returns a list of available camera devices.
• GetCoreCount: Returns the number of logical processors available to run threads on the user's computer. If navigator.hardwareConcurrency is not supported, the default of 4 cores is returned.

Getting Started

Using Quagga JS is straightforward. There are two main ways to scan and decode barcodes: using the camera video stream or calling a client action.

Step 1:

Start by installing the Quagga JS component in your desired environment. Click the "Manage Dependencies" button, and depending on your needs, either add the LiveStream block to use a camera device, or add the StaticImages_DecodeFromImage client action references to your application.

Step 2:

To scan barcodes using a camera device, place the LiveStream block on a page, fill in the necessary settings, and assign an action to the OnDetected event to capture the barcodes. To decode a barcode from an image, simply call the StaticImages_DecodeFromImage client action, set the Image input with a URL or Data URI of an image, and define which readers to use.