Skip to content

Attributes

The available components are:

document-reader

Attribute Info Data type Default value Values
locale The language of the component interface. If empty, the language is selected from the browser settings, if it is not found there, the system language is taken. string en ru, en, de, pl, it, hu, ch, sk, uk, fr, es, pt, ar, nl, id, vi, ko, ms, ro, gr, tr, jp, cz, th, hi, bn, he, fi, sv, da, hr, no
internal-scenario The component document verification scenario. For more details, see the Processing Scenarios section. string MrzAndLocate MrzAndLocate, MrzOrLocate, Mrz, Locate
multipage-processing Whether to allow processing of two pages in cases when the component detects an ID1-sized document. Multipage processing is not triggered for documents of other formats.
If true, the component asks for the second page and processes it. If false, only one page/side of the document is processed regardless the document format.
boolean false true, false
start-screen Whether to show the start screen with two options for the document image uploading: From camera and From gallery.
If true, the start screen is shown.
If false, no start screen is shown and instead the camera of the device is turned on automatically to capture the image of the document.
boolean false true, false
multiple Whether to allow uploading more than one file via the file system. Can be set to true only if startScreen is true. boolean true true, false
camera-id Ability to select a camera. You can get the device ID using navigator.mediaDevices.enumerateDevices(). string undefined camera id string value
license To use the component on test environments, set the base64 license value to the license attribute. string undefined base64 license value
copyright Whether to show the Regula copyright footer. boolean true true, false
object-fit Object-fit of the video element. string contain cover, contain
change-camera Show the camera switch button. boolean false true, false

camera-snapshot

Attribute Info Data type Default value Values
locale The language of the component interface. If empty, the language is selected from the browser settings, if it is not found there, the system language is taken. string en ru, en, de, pl, it, hu, ch, sk, uk, fr, es, pt, ar, nl, id, vi, ko, ms, ro, gr, tr, jp, cz, th, hi, bn, he, fi, sv, da, hr, no
start-screen Whether to show the start screen with two options for the document image uploading: From camera and From gallery. If true, the start screen is shown. If false, no start screen is shown and instead the camera of the device is turned on automatically to capture the image of the document. boolean false true, false
multiple Whether to allow uploading more than one file via the file system. Can be set to true only if startScreen is true. boolean true true, false
camera-id Ability to select a camera. You can get the device ID using navigator.mediaDevices.enumerateDevices(). string undefined camera id string value
copyright Whether to show the Regula copyright footer. boolean true true, false
object-fit Object-fit of the video element. string contain cover, contain
change-camera Show the camera switch button. boolean false true, false

Customization

Using CSS variables, you can change the font and the main colors of the components.

Variable Info Default value
--font-family The font family of all text elements. If you change the font family, make sure to adjust the fond size so the message on the start screen would fit the frame. Noto Sans, sans-serif
--font-size The font size for the text elements. 16px
--main-color Color for the graphic elements of the component. By default, the brand Regula violet is set. #663399
--hover-color Buttons hover color. #7c45b4
--active-color Buttons active color. #663399

For example:

CSS:

.my-custom-style {
    --font-family: Arial, sans-serif;
    --main-color: green;
}

HTML:

<document-reader class="my-custom-style"></document-reader>

Processing Scenarios

For the web components, you can select one of the following processing scenarios:

Scenario Description
Locate Detects the document boundaries and returns cropped by the boundaries image.
Mrz Detects the machine readable zone and returns text fields with the MRZ data.
MrzOrLocate Includes functionality of the Mrz and Locate scenarios. First, it searches for the MRZ, and if it finds it, the component returns the text fields and finishes the processing. If there is no MRZ, the document boundaries are detected, and the cropped image is returned.
MrzAndLocate Crops the image by the document boundaries and returns text fields with the MRZ data. If the MRZ is not detected, the processing is not completed.