Interface OverlayConfiguration

Overlay configuration

interface OverlayConfiguration {
    cornerRadius?: number;
    customLogoSize?: Size;
    customLogoSrc?: null | string;
    detectionBorderColor?: string;
    detectionBorderWidth?: number;
    detectionFillColor?: string;
    filterCameras?: boolean;
    focusOnTap?: boolean;
    maskColor?: string;
    primaryColor?: string;
    showCameraSelector?: boolean;
    showDetections?: boolean;
    showFlashlight?: boolean;
    showTargetingLine?: boolean;
    showZoom?: boolean;
    targetingLineActiveColor?: string;
    viewfinderBorderWidth?: number;
    viewfinderCornerRadius?: number;
    zoomOnDoubleTap?: boolean;
}

Properties

cornerRadius? customLogoSize? customLogoSrc? detectionBorderColor? detectionBorderWidth? detectionFillColor? filterCameras? focusOnTap? maskColor? primaryColor? showCameraSelector? showDetections? showFlashlight? showTargetingLine? showZoom? targetingLineActiveColor? viewfinderBorderWidth? viewfinderCornerRadius? zoomOnDoubleTap?

Properties

Optional cornerRadius

cornerRadius?: number

Corner radius in pixels for rectangular elements such as viewfinder and camera selector.

The allowed range of the corner radius is 0 to 8 pixels.

Default Value

0

Optional customLogoSize

customLogoSize?: Size

The size (in CSS pixels) used to render the custom logo.

Example:

configuration.overlay.customLogoSize = { width: 80, height: 20 };

When providing a custom logo in a raster image format such as PNG, JPEG or WEBP, the image will be scaled to fit the specified dimensions. In this case, it's recommended to provide a high-resolution (2x or 3x) raster image.

Optional customLogoSrc

customLogoSrc?: null | string

Override the STRICH logo displayed in the bottom-right corner with a custom image.

This capability is only available for Enterprise licenses. Please note that attempting to hide or replace the STRICH logo by other means is a violation of the License Agreement.

The image should ideally be supplied in SVG format, either inline as a data URL or as an absolute HTTPS URL.

The image will be rendered at its intrinsic size (pixel size = CSS size), which can lead to blurriness on high-density screens if the image is not supplied in SVG format.

Setting the property to null will display no logo at all.

Optional detectionBorderColor

detectionBorderColor?: string

Color to use for drawing a border around the area of detected barcodes. Must be specified in rgb() format, with the color components given as integers with no separating whitespace. The border will become transparent when the detection becomes stale.

Remarks

Only has an effect if OverlayConfiguration.showDetections is true.

Default Value

undefined

Optional detectionBorderWidth

detectionBorderWidth?: number

The border width in pixels to use for drawing a border around the area of detected barcodes.

Remarks

The allowed range is 0 to 4 pixels. Values outside the range are clamped.

Default Value

0

Optional detectionFillColor

detectionFillColor?: string

Color to use for filling area of detected barcodes. Must be specified in rgb() format, with the color components given as integers with no separating whitespace. The fill will become transparent when the detection becomes stale.

Remarks

Only has an effect if OverlayConfiguration.showDetections is true.

Default Value

rgb(0,0,255)

Optional filterCameras

filterCameras?: boolean

Filter cameras returned by the browser.

If set to true, only cameras that are deemed appropriate for barcode scanning will be offered in the camera selector.

Default Value

true

Optional focusOnTap

focusOnTap?: boolean

Indicate if single-tapping the overlay should attempt to trigger autofocus.

Remarks

Triggering autofocus is currently only available on Android devices.

Default Value

true

Optional maskColor

maskColor?: string

Color to use for de-emphasizing the area around the viewfinder.

The color will be used to create a mask around the viewfinder/region of interest to aid the user in focusing the camera on the barcode.

A semi-translucent dark color works best, e.g. rgba(0,0,0,0.5) would use a semi-translucent black.

Default Value

undefined

Optional primaryColor

primaryColor?: string

Color to use for drawing UI elements such as the viewfinder and camera selector. Must be specified in rgb() format, with the color components given as integers with no separating whitespace.

Default Value

rgb(255,255,255)

Optional showCameraSelector

showCameraSelector?: boolean

Indicate if the camera selector should be shown in the overlay.

Default Value

true

Optional showDetections

showDetections?: boolean

Indicate if the overlay should draw the bounding boxes of detected barcodes on top of the camera preview.

Default Value

true

Optional showFlashlight

showFlashlight?: boolean

Indicate if the flashlight toggle should be shown in the overlay.

Remarks

Flashlight functionality is not supported in some browsers.

Default Value

true

Optional showTargetingLine

showTargetingLine?: boolean

Indicate if a horizontal line should be drawn to aid in positioning 1D barcodes.

Default Value

true

Optional showZoom

showZoom?: boolean

Indicate if the zoom control should be shown in the overlay.

Remarks

This is only supported for browsers that support the 'zoom' constraint, see: https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints#zoom Notably, Safari versions earlier than 17.4 and Firefox do not support this feature.

Default Value

true

Optional targetingLineActiveColor

targetingLineActiveColor?: string

Color to use for drawing the horizontal targeting line when a barcode was detected. Must be specified in rgb() format, with the color components given as integers with no separating whitespace.

Defaultvalue

rgb(255,0,0)

Optional viewfinderBorderWidth

viewfinderBorderWidth?: number

Border width in pixels of the viewfinder, the rectangle around the region of interest.

Remarks

The allowed range is 1 to 20 pixels. Values outside the range are clamped.

Default Value

1

Optional viewfinderCornerRadius

viewfinderCornerRadius?: number

Corner radius in pixels of the viewfinder, the rectangle around the region of interest.

This property applies only to the viewfinder and overrides the OverlayConfiguration.cornerRadius property.

The allowed range of the corner radius is 0 to 20 pixels.

Default Value

0

Optional zoomOnDoubleTap

zoomOnDoubleTap?: boolean

Indicate if double-tapping the overlay should cause the camera to zoom in.

Remarks

This is only supported for browsers that support the 'zoom' constraint, see: https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints#zoom Notably, Safari versions earlier than 17.4 and Firefox do not support this feature.

Default Value

true (where supported)

Settings

Member Visibility

Theme

On This Page

cornerRadiuscustomLogoSizecustomLogoSrcdetectionBorderColordetectionBorderWidthdetectionFillColorfilterCamerasfocusOnTapmaskColorprimaryColorshowCameraSelectorshowDetectionsshowFlashlightshowTargetingLineshowZoomtargetingLineActiveColorviewfinderBorderWidthviewfinderCornerRadiuszoomOnDoubleTap