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>

Messages

To change the standard component messages or any text, specify the language you are using (or add your own) and the label you want to change (you can see the list of available languages in the attribute descriptions section, locale attribute):

const element = document.querySelector('document-reader');
element.translations = {
   en: {
      fromCamera: 'Use your camera',
   },
};

Note: to see the changes, don't forget to set the language you changed to the locale attribute.

<document-reader locale="en"></document-reader>

List of labels used in the component:

Label Default message in en locale Used in
success Success! document-reader, camera-snapshot
fileCorrupt This file is corrupt or not supported document-reader, camera-snapshot
selectAnotherFile Please select another file document-reader, camera-snapshot
error Error! document-reader, camera-snapshot
somethingWentWrong Something went wrong document-reader, camera-snapshot
tryAgain Try again document-reader, camera-snapshot
fromCamera From camera document-reader, camera-snapshot
fromGallery From gallery document-reader, camera-snapshot
cameraUnavailable Camera unavailable! document-reader, camera-snapshot
preparingCamera Preparing the camera... document-reader, camera-snapshot
noCameraAvailable No camera available document-reader, camera-snapshot
incorrectCameraId No camera with the specified ID found. document-reader, camera-snapshot
allowAccessToCamera Allow access to the camera and reload this page to continue. document-reader, camera-snapshot
cameraConnection Make sure the camera is connected correctly. document-reader, camera-snapshot
checkCameraId Check if the specified camera ID is correct. document-reader, camera-snapshot
scanIDInBrowser Scan an ID in your browser document-reader
useYourDeviceCamera Use your device camera to scan a document or select a photo of the document from the gallery document-reader
processingFinished Processing finished. document-reader
largeFile This file is too large to be uploaded document-reader
selectSmallerFile Please select a smaller file document-reader
versionNotSupported Your browser version is not supported document-reader
updateBrowser Update your browser version document-reader
licenseError A license error has occurred document-reader
licenseExpired The license cannot be found or has expired document-reader
timeout Timeout document-reader
processing Processing... document-reader
preparingService Preparing the service... document-reader
detectingDocument Detecting a document... document-reader
placeDocumentIntoFrame Fit the document into the frame document-reader
noFocus No camera focus document-reader
moveCloser Move closer document-reader
glaresOnDocument Avoid glare on the document document-reader
holdDocumentStraight Hold the document straight document-reader
documentProcessing Document processing... document-reader
flipDocument Flip the document document-reader
verified Verified! document-reader
positionDocumentCenter Position the document in the center camera-snapshot
photoCapturedSuccessfully The photo is captured successfully. camera-snapshot
uploadPhoto Upload a photo camera-snapshot
useCameraOrGallery Use your device camera or select a photo from the gallery camera-snapshot

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.