Skip to content

Multipage Processing

Multipage processing lets the Document Reader SDK Web Components process documents that contain more than one page.

With multipage processing enabled in the supported processing scenario, the Document Reader SDK processes the presented page, checks whether it is an ID1-sized document, and, if so, prompts for the second page to process. Multipage processing is not triggered for documents of other formats.

To activate the Multipage Mode, enable the multipageProcessing parameter:

window.RegulaDocumentSDK.recognizerProcessParam = {
    processParam: {
        scenario: InternalScenarios.MrzAndLocate,
        multipageProcessing: true
    },
};

In this case, the Web Component controls the document processing flow automatically, handling the pages one by one and displaying UI animated tips.

Double-Page Spread

To process up to two document pages in a single scan, enable doublePageSpread. The pages must be visible in the frame or image.

window.RegulaDocumentSDK.recognizerProcessParam = {
    processParam: {
        scenario: InternalScenarios.MrzAndLocate,
        doublePageSpread: true
    },
};

Manual Multipage Mode

You can also control the multipage document processing flow explicitly with the Manual Multipage Mode. In this case, you can interrupt the scanning after a single page is processed (for example, to display a custom screen) and then resume scanning for the next page.

Follow the instructions below.

1. Enable the multipageProcessing mode.

2. Enable the manualMultipageMode setting:

const documentReaderElement = document.createElement('document-reader');
documentReaderElement.settings = {
    manualMultipageMode: true
}

3. Add the document-reader Web Component to the DOM:

const documentReaderElement = document.createElement('document-reader');
document.body.append(documentReaderElement);

4. Start scanning a new document by calling the startNewDocument() method:

window.RegulaDocumentSDK.startNewDocument();

5. Present the document for the SDK to process a single page.

6. To determine whether to continue the document processing, check the morePagesAvailable parameter in the document-reader event response:

const isMorePagesAvailable = !!event.detail.data.response.rawResponse.morePagesAvailable;

The isMorePagesAvailable Boolean value indicates whether the document has more pages to process.

7. Decide whether to continue scanning the next page or restart the entire process to scan other documents.

Note

Before continuing, remove the document-reader component from the DOM and add it back again.

  • To scan the next page of the same document, use the startNewPage() method:
window.RegulaDocumentSDK.startNewPage();
  • To start a new scanning session for another document, use the startNewDocument() method:
window.RegulaDocumentSDK.startNewDocument();

For additional implementation details, see the following Examples section.

Examples