Skip to content

Handling Results

Response Gathering

You can get the response of the component's event in the detail.data.response field of the event object. For example:

const component = document.querySelector('document-reader');

function listener(event) {
    if (event.detail.action === 'PROCESS_FINISHED' && event.detail.data.status === 1) {
        const response = event.detail.data.response;
        console.log(response);
    }
}

component.addEventListener('document-reader', listener);

To get the processing results for each frame, you can set the callback function as in the following example:

window.RegulaDocumentSDK.recognizeListener = (response) => console.log(response);

For more information about event processing, see the Events and Actions for Web Components page.

Results Visualization

The Document Reader Web Components package is used to recognize documents and returns the processing results in a raw JSON form. See more details on the Architecture and Web Components pages.

The structure of the processing results is quite complex and contains a different variety of elements, so this is where Regula Document Reader UI Components package comes to the aid. It is applicable only for React projects, but you can create a wrapper (see the Examples section). This package contains the components that visualize the processing results, so you don't need to parse the raw response yourself—just pass it to the appropriate component, and it will display the data on the UI.

See the example (click to enlarge):

Sample representation of the entire UI component

UI Package Installation

Install the package ui-components:

npm i @regulaforensics/ui-components

UI Package Usage

After the package is installed, you can access the special web component DocReaderContainer. It is the content provider element, that can be used to interact with the request and response.

For more implementation details, explore the React sample project.

See the description of the main UI components as they appear in the sample by the links below. Note that each element can be constructed from the number of subcomponents, not necessarily mentioned on the current page. You may also need to implement additional logic to represent the results.

Tabs:

Output Tabs

Sample representation of the Tabs UI component

Component, combining into one container representation the several content tabs:

ResultsTab

Sample representation of the ResultsTab UI component

Area, intended to keep the tab with the visually-presented document processing results. Serves as a container for several other subcomponents:

StatusLoader

Sample representation of the StatusLoader UI component

Panel, representing the results' loading while the request sending, document processing, and response gathering.

Status

Sample representation of the Status UI component

Area, keeping the general information about the completed document processing:

  • successful/failed checks;
  • general information about the document;
  • processing time.
Info

Sample representation of the Info UI component

Area, keeping detailed information about the processed document and performed checks.

The UI component also contains interactive elements. Some of the recognized text fields are clickable and highlighted on the document image:

Sample Info UI component with highlighted text field

And you can hover the pointer over the document image to zoom the selected fragment (mouse wheel controls the zoom level):

Sample Info UI component with zoomed image fragment

Graphics

Sample representation of the Graphics UI component

Area, organizing all the graphical fields, recognized during the document processing.

Rfid

Sample representation of the RFID UI component

Area, keeping the detailed RFID data and performed checks.

PortraitsComparison

Sample representation of the PortraitsComparison UI component

Area, representing the portrait comparison with external and/or live photos.

RequestViewer

Sample representation of the RequestViewer UI component

In case the Web Service is involved, this area keeps the detailed information about the HTTP request (endpoint and parameters). In the case of client-only processing via the Web Component, this data won't be available.

ResponseViewer

Sample representation of the ResponseViewer UI component

Area, keeping the raw response (in JSON format).

Examples

Next Steps