Skip to main content

HTML Camera | Cordova Document Scanner

As of version 4.1.0, Scanbot SDK Cordova Plugin features HTML-camera-based Barcode Detection on Android.

Beta

This is an Android-only feature. Due to missing features in the WebView this feature is not available on iOS yet. Furthermore, please consider this feature as Beta.

Web SDK

For a full web solution please refer to our Web SDK.

Integrating the HTML Camera#

Create a container view (no specific id is required):

<div id="container"></div>

Initializing video stream#

As the video stream is purely WebView-based, we must separately request camera permission. This can be achieved using our helper function, or you can use any other plugin.

await ScanbotSdk.requestCameraPermission();

Then, using vanilla javascript, pass that element to the static initializer function of ScanbotHTMLCamera

const container = document.getElementById('container');const camera = await ScanbotHTMLCamera.create(container);

We advise that you start your camera stream as early as possible, as it is a relatively resource-heavy operation on the javascript level.

Starting real-time barcode detection#

When everything is ready, start the barcode scanner:

const formats = ["AZTEC", "QR_CODE", ...];this.camera.startBarcodeDetector(formats, async result => {    const barcode = result.barcodes[0];    this.showDetectionResult(barcode.type, barcode.text);});

As soon as you have your desired barcode, stop the detector, to avoid unnecessary resource drain:

this.camera.stopBarcodeDetector();

When navigating out of the camera page, properly dispose of the camera (canvas + video + overlay) element in order to avoid memory leaks and unhandled exceptions:

this.camera.dispose();

While the Camera stream is not dependent on ScanbotSDK License being valid, barcode detection is, so do not forget to check for license validity:

const info = await ScanbotSdk.getLicenseInfo();if (!info.info.isLicenseValid) {    camera.stopBarcodeDetector();    this.showDetectionResult('License expired', 'Barcode detection stopped');    return;}

Viewfinder#

In order to increase performance, and give the camera view a better look-and-feel, you can also add a smaller viewfinder with an overlay to the camera element:

this.camera.addViewFinder(configuration);

The viewfinder can by styled via the configuration parameter. It accepts the following properties:

export class ScanbotHTMLFinderConfiguration {    /**     * Background color of the finder overlay. 'gray' color is not allowed.     * Defaults to black     */    backgroundColor?: string;    /**     * Border style of the finder view     * Defaults to 'solid 2px white'     */    border?: string;    /**     * Corner radius of the finder view, in pixels.     * Defaults to 10     */    borderRadius?: number;    /**     * Relative top margin of the finder frame, in pixels.     * Size and position defaults to centered square 66% of the size of ScanbotHTMLCamera     */    marginTop?: number;    /**     * Relative left margin of the finder frame, in pixels.     * Size and position defaults to centered square 66% of the size of ScanbotHTMLCamera     */    marginLeft?: number;    /**     * Relative width of the finder frame, in pixels.     * Size and position defaults to centered square 66% of the size of ScanbotHTMLCamera     */    width?: number;    /**     * Relative height of the finder frame, in pixels.     * Size and position defaults to centered square 66% of the size of ScanbotHTMLCamera     */    height?: number;}