Get started with the Custom UI in the Capacitor Barcode Scanner SDK

BarcodeCustomUIComponent

BarcodeCustomUIComponent exposes an API for configuring a native camera view that detects barcodes in real time. The component bridges the native SDK and your web-based UI. The native camera view is positioned relative to your web view, and the component provides methods to control the camera and receive barcode detection results.

Usage

BarcodeCustomUIComponent provides the following lifecycle methods for managing the camera view and handling frame updates:

View lifecycle and frame updates

• attachScannerAtFrame: Attaches the scanner at explicit frame coordinates and registers result callbacks.
• attachScannerOnElement: Computes the frame from the provided HTMLElement, attaches the scanner, and registers result callbacks.
• updateScannerViewFrame: Repositions the scanner at explicit frame coordinates.
• updateScannerViewFrameFromElement: Recomputes the frame from the provided HTMLElement and repositions the scanner.
• detachScannerView: Detaches the scanner view and unregisters result callbacks.
• freezeCamera and unfreezeCamera: Pause and resume the camera preview without detaching the scanner view.

Attaching the scanner

When attaching, you must provide either a frame or an HTML element plus sendToBack. The scanner will be rendered in relation to the specified frame or element, and the camera preview will be displayed in that area.

sendToBack controls layering relative to the Capacitor WebView:

• false (default): The scanner is rendered in front of the WebView.
• true: The scanner is rendered behind the WebView. The WebView must be transparent over the scanner area for the camera preview to be visible.

Result handlers are registered as part of the attachment call, so barcode events can be delivered immediately after attachment completes. You can also pass an initial configuration to apply scanner settings during attachment.

Updating the scanner frame

Call updateScannerViewFrame or updateScannerViewFrameFromElement at any time to keep the native view aligned with layout changes, such as orientation changes, resizing, or animated UI transitions.

Detaching the scanner

When scanning is no longer needed, call detachScannerView to remove the scanner view from the native hierarchy and unregister result callbacks. You can attach the scanner again later.

Handling barcode detection results

Barcode detection is handled through BarcodeCustomUIResultHandlers, which are registered when the scanner is attached. The component forwards native scanner events to these callbacks:

• onBarcodeScannerResult: Triggered when barcode results are detected.
• onBarcodeTap: Triggered when a barcode is tapped while selection overlay is enabled.
• onError: Triggered when an error occurs during scanning or result processing.

Attach Scanner View with Result Handlers

loading...

See full example on GitHub

Example

View the example project for a complete implementation of the BarcodeCustomUIComponent in a Capacitor app.

Want to scan longer than one minute?

Generate a free trial license to test the Scanbot SDK thoroughly.

Get free trial license

Scanbot SDK is part of the Apryse SDK product family

A mobile scan is just the start. With Apryse SDKs, you can expand mobile workflows into full cross‑platform document processing. Whether you need to edit PDFs, add secure digital signatures, or use a fast, customizable document viewer and editor, Apryse gives you the tools to build powerful features quickly.

Learn more

Was this helpful?