Document Capture
Last updated
Last updated
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:
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.
The document capture component can be initialized using the following
code:
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')
: 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.
The document capture component may be removed from the UI by calling the destroy()
function on it.
Example:
initialize(): void
Initializes the component's DOM and events.
destroy(): void
Destroys the component's DOM and events.
setTranslations(translations?: { [key: string]: string; }): void
Changes the component's translations to the provided values and updates the DOM accordingly.
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()
This function is invoked after document capture completes. To hook onto the event, you may use the following code:
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.
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:
The error parameter is of type string.
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:
No parameter is provided to this function call.
This function is invoked before the camera feed is launched when document capture starts.
No parameter is provided to this function call.
The document capture component is structured a follows:
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:
Currently, no translations are available.