Classic UI
You can use native components to embed our Document Scanning functionalities directly into your React layouts, allowing you to customize the user interface and experience in great detail and precision.
Scanbot Document Scanner View
ScanbotDocumentScannerView exposes a configurable camera view that allows you to detect documents in real time.
Usage
Embed the component in your layout and use the onDocumentScannerResult callback to handle the document result. The onDetectionResult callback provides the detection status of the document being scanned.
Customize the UI and behavior of ScanbotDocumentScannerView by using the component's properties. Each property is optional, and falls back to its default value if not specified.
More on the available properties can be found here.
Example
loading...
Scanbot Cropping View
ScanbotCroppingView is an interactive UI component designed for extracting the area of interest from an image.
It presents the image to the user and overlays an adjustable four-point polygon.
Users can manually drag the corners to perfectly frame the document or trigger automatic detection to instantly find its edges.
The view also supports rotating the image, allowing for corrections before the final, perspectively corrected area is extracted.
Usage
Customize the UI and behavior of ScanbotDocumentScannerView by using the component's properties. Each property is optional, and falls back to its default value if not specified.
More on the available properties can be found here.
Use a component ref to call methods that initiate the polygon detection, image rotation, or extraction of the area of interest.
This gives you full programmatic control over the cropping process, allowing you to build a customized user experience.
The onCroppedAreaResult callback provides the final result, which you can then use to save the image or update a document.
loading...
Want to scan longer than one minute?
Generate a free trial license to test the Scanbot SDK thoroughly.
Get your free Trial License