Skip to content

Camera Screen

The camera screen appears once document processing begins. It displays the camera frame, toolbar, animations, and hint messages designed to guide users in capturing the document. The camera frame outlines the area for document capture, while the toolbar provides essential controls for actions such as flipping or changing the camera. Animations and hint messages offer real-time guidance to ensure the document is captured correctly.

To customize the appearance, use the part attribute and define the desired CSS properties. For example:

document-reader::part(foo) {
    /* Styles to apply to the `foo` part */
}

Toolbar

The toolbar section contains a set of buttons used for document processing. It can be customized to align with specific branding and functional requirements. Customizable elements include:

  • Cancel processing
  • Capture document manually
  • Flip camera preview
  • Change camera

Camera Frame Toolbar for the document-reader web component with control buttons highlighted

Camera Frame Toolbar Container for the document-reader web component with control buttons highlighted

Part element Description
controls-process-close-button Cancels document processing.
controls-process-button Captures the document manually.
controls-mirror-button Flips the camera preview horizontally.
controls-change-camera-button Changes the camera.
controls-container Toolbar container, including all control buttons.

Hint Messages

The hint messages provide real-time guidance to users, ensuring the document is captured correctly.

Camera Frame Screen for the document-reader web component with hint elements highlighted

Part element Description
hint-container Camera frame container.
hint-status-icon Icon indicating that the document has been detected.
hint-status-message Container element for the hint message.
hint-status-message-title Hint text message.

Multipage Animation

If multipage processing is enabled, the SDK processes the front side of the document and recognizes its format. If the SDK detects an ID1-sized document, it prompts for the second page. Multipage processing is not triggered for documents of other formats.

Camera Frame Screen for the document-reader web component in multipage mode, displaying the front side hint

Camera Frame Screen for the document-reader web component in multipage mode, displaying the rear side hint

Part element Description
hint-next-page-front-icon Front animation image.
hint-next-page-back-icon Back animation image.
controls-skip-button Skip the multipage processing.

Next Steps