Document Capture

This component can be found under the Sybrin.Document namespace and is called DocumentCaptureComponent.

Full name: Sybrin.Document.DocumentCaptureComponent.

It is a component that wraps the document capture functionality provided by the Sybrin Document JavaScript API and presents it in the form of a simple UI. It's recommended that you use this component if you do not wish to create your own UI and simply want to use the document capture functionality provided by the Sybrin Document Web SDK.

With default styling, the document capture component appears as follows:

Document Capture Component

Upon initializing, the user's camera will start and the component will display a video feed with a countdown timer while the user centers their document inside the rectangle. This action can be cancelled, resulting in the onCaptureCancelled event firing.

If an error occurs, the onCaptureError event will fire.

If document capture completes, the onCaptureResult event will fire.

Initialization

The document capture component can be initialized using the following

code:

HTML

<div id='document-capture'></div>

JavaScript

var options = new Sybrin.Document.Options({});

// Option 1: Passing an id
var component = new Sybrin.Document.DocumentCaptureComponent({ 
    id: 'document-capture',
    options: options,
    countryCode: countryCode,
    documentTypeId: documentTypeId,
    documentTypeName: documentTypeName
});

// Option 2: Passing a DOM element
var element = document.getElementById('document-capture');
var component = new Sybrin.Document.DocumentCaptureComponent({ 
    element: element,
    options: options,
    countryCode: countryCode,
    documentTypeId: documentTypeId,
    documentTypeName: documentTypeName
});

component.initialize();

The countryCode parameter may be obtained using the Country Select component.

The documentTypeId and documentTypeName parameters may be obtained using the Document Select component.

The Sybrin Web SDK provides the option to either pass down the ID of the element you wish to use for component initialization, or to pass the element directly.

Please note that 'document-capture' is just an example in this context and the ID may be changed as desired as long as it matches the value passed down during component initialization in JavaScript.

During initialization, the document capture component allows for a number of configuration options that may be provided using an object literal. The parameters that may be used on the object include the following:

Required:

• id (string): ID of the element you wish to use for component initialization. Not required if element is passed.

• countryCode: The country code of the document. Used during capture, in conjunction with document type parameters, to determine page count. May be obtained by using the Country Select component.

• documentTypeId: The document type ID of the document. Used during capture, in conjunction with country code parameters, to determine page count. May be obtained by using the Document Select component.

• documentTypeName: The document type name of the document. Used during capture, in conjunction with country code parameters, to determine page count. May be obtained by using the Document Select component.

• element (HTMLElement): Element you wish to use for component initialization. Not required if id is passed.

• api (Sybrin.Document.API): Instance of a JavaScript API that may be pre-configured as desired. Not required if an instance of options is passed.

• options (Sybrin.Document.Options): Configuration options to instantiate Sybrin.Document.Api with. Not required if an instance of api is passed.

Optional:

• deviceId (string): ID of a specific device to use for document capture.

• translations ({ [key: string]: string }): An object literal representing a dictionary lookup that will be used for translating the component. Please see the translations section on this page for a list of all translatable text, as well as the localization page for a detailed description on how to implement localization.

• imageCaptureFormat (string: 'jpeg' | 'png'): Sets the format that the images will be captured in. Defaults to JPEG.

Warning: Initialization will fail if the intended host element does not exist yet.

Always ensure that the initialize function is only called after the DOM is loaded.

Destruction

The document capture component may be removed from the UI by calling the destroy() function on it.

Example:

component.destroy();

Functions

Initialize

initialize(): void

Initializes the component's DOM and events.

Destroy

destroy(): void

Destroys the component's DOM and events.

Set Translations

setTranslations(translations?: { [key: string]: string; }): void

Changes the component's translations to the provided values and updates the DOM accordingly.

Events

The document capture component offers multiple events. To hook onto an event, simply assign a function to it.

The following options are available:

• onCaptureResult(result: DocumentCaptureResult)

• onCaptureError(error: string)

• onCaptureCancelled()

• onBeforeCapture()

On Capture Result

This function is invoked after document capture completes. To hook onto the event, you may use the following code:

component.onCaptureResult = function(result) {
    console.log(result);
}

The result parameter is of type Sybrin.Document.DocumentCaptureResult and includes the following properties:

• success (boolean): Whether or not the document was captured successfully.

• facingMode (string): The facing direction of the camera used during capture.

• message (string): Additional information when applicable, for instance an error message if one occurred.

• originalDocumentImages (string[]): Base64 string array of the original photos of the document.

• documentImage (string[]): Base64 string array of the processed photos of the document (if the document crop component was used).

• correlationId (string): The unique identifier used for advanced tracking and backend data synchronization.

• countryCode (string): The Alpha-3 standard country code of the country that was selected during the journey.

• documentType (string): The document type name string of the document type that was selected during the journey.

• ocrResults (DocumentOcrResult[]): The array of document OCR result instances representing the data that was read from the images.

On Capture Error

This function is invoked when something goes wrong and an error occurs during document capture. To hook onto the event, you may use the following code:

component.onCaptureError = function(error) {
    console.log('An error occurred: ', error);
}

The error parameter is of type string.

On Capture Cancelled

This function is invoked when document captured was started, but then cancelled before completion. To hook onto the event, you may use the following code:

component.onCaptureCancelled = function() {
    // Your code here
}

No parameter is provided to this function call.

On Before Capture

This function is invoked before the camera feed is launched when document capture starts.

component.onBeforeScan = function() {
    // Your code here
}

No parameter is provided to this function call.

Styling

The document capture component is structured a follows:

<div class="sybrin-document-container sybrin-sdk-container">
    <div class="sybrin-document-component-section sybrin-sdk-component-section">
        <div class="sybrin-document-video-container sybrin-sdk-video-container">
        </div>
    </div>
    <div class="sybrin-document-button-section sybrin-sdk-button-section sybrin-document-align-left">
        <button class="sybrin-document-cancel sybrin-document-flow-button sybrin-sdk-flow-button sybrin-secondary">Cancel</button>
    </div>
</div>

The classes and elements specified above may be used to freely style the document scan component as desired. To do so, simply create a stylesheet and include it in the project, then style according to the above classes and elements.

Styling implementation example:

HTML

index.html

<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css" media="screen"/>
</head>
<body>
    <div id='component'></div>
</body>
</html>

CSS

styles.css

.sybrin-document-flow-button.sybrin-secondary {
    color: #963296;
    background-color: #f3e0f3;
    border: 2px solid #f3e0f3;
}

Before Styling

After Styling

Translations

Currently, no translations are available.