JavaScript Document Scanner SDK

To start the document scanner, we must first create a DocumentScannerConfiguration object, or simply a dictionary in vanilla javascript, as follows.

const config = {
    containerId: containerId,
};

The only required property is the containerId, string, that should match the container where you want the document scanner to pop up.

DocumentScannerConfiguration inherits the base properties:

• containerId – The id of the containing HTML element where the Document Scanner will be initialized. Required
• videoConstraints – The desired video resolution. Optional, defaults to 3840x2160
• mirrored – Whether the screen should be mirrored. Useful when using a user-facing camera. false by default
• preferredCamera – Camera label or camera device id. If not available, a default camera is used as fallback
• onError – Callback when something went wrong. Optional

The configuration object also accepts the following parameters (values displayed are defaults):

acceptedAngleScore: 75,
acceptedSizeScore: 75,
autoCaptureSensitivity: 0.66,
autoCaptureEnabled: true,
ignoreBadAspectRatio: true,
acceptedBrightnessThreshold: 0, // Ranges from 0 to 255. Only accept scans with an averageBrightness (see below) of x or higher.

Additionally, you can also use the configuration object for react-like styling. It accepts the following parameters for document outline, hint text label and capture button color (values displayed are defaults):

style: {
    outline: {
        polygon: {
            strokeCapturing: "green",
            strokeSearching: "yellow",
            fillCapturing: "transparent",
            fillSearching: "transparent",
            strokeWidth: "2px"
        },
        label: {
            position: "absolute",
            top: "90%",
            left: "50%",
            transform: "translate(-50%, -50%)",
            textAlign: "center",
            backgroundColor: "rgba(0, 0, 0, 0.7)",
            color: "white",
            borderRadius: "0.25em",
            padding: "0.5em",
            fontFamily: "sans-serif",
            fontSize: "1em"
        },
        path: {
             stroke: "green";
             strokeWidth: 4;
        }
    },
    captureButton: {
        color: "white"
    }
};

Note that if you wish to do your styling in css, and not in a reactive design pattern, you are more than welcome to.