Quick Integration

Summary

This page shows you how to integrate the two camera components but does not detail all available methods and options. See the Document Camera Component and Face Camera Component pages for detailed information about each component.

Index

Document Camera Integration
Face Camera Integration

Document Camera Integration

To integrate the Document Camera Component, begin by adding the custom HTML element to your page's markup. This step sets up the component within your application, allowing you to leverage its functionality. Here's an example of how to include the Document Camera Component in your HTML:
```
<live-document-camera
  id="live-document-camera"      
  class="documentCamera">
</live-document-camera>
```
You can use any id or class attribute to uniquely identify the component or to apply styles as needed. By assigning an ID or class, you can control and reference the component through your JavaScript code.

Use standard CSS to style and position the Document Camera component, using CSS properties such as width, height, border, margin, padding, position.

At this point, nothing is being rendered to the camera, so most implementations may want to initially set the display property of the component to none using CSS. This approach keeps the component hidden until you are ready to activate it or display its contents. For example, you might add the following CSS rule:
```
.documentCamera {
  display: none;
}
```
For detailed information on the available parameters and options, refer to the Document Camera Component documentation page.
Attach event listeners to the component you added in the previous step. Most implementations will want to listen for at least the following events:
```
const liveDocumentCamera = document.getElementById('live-document-camera');

liveDocumentCamera.addEventListener(LiveDocumentCamera.OpenEventName, onOpened);
liveDocumentCamera.addEventListener(LiveDocumentCamera.CloseEventName, onClosed);
liveDocumentCamera.addEventListener(LiveDocumentCamera.FailureEventName, onFailure);
liveDocumentCamera.addEventListener(LiveDocumentCamera.CaptureEventName, onCaptured);
```
Details:
- OpenEventName Triggered when the OS camera feed starts streaming to the camera component. Although not strictly necessary to listen for this event, implementations that initially hide the camera until it is in use may want to handle this event to update the camera's visibility.
- CloseEventName Triggered when the OS camera feed stops streaming to the camera. This may occur due to an error or a successful capture. In both cases, the respective event will be issued in addition to the CloseEventName event. Similar to OpenEventName, this event does not need to be listened to unless required by your implementation.
- FailureEventName Triggered when the camera encounters an error. This event includes additional information about the error in the event details. For a detailed breakdown of error codes and causes, refer to the Document Camera Component documentation page.
- CaptureEventName Triggered when the camera successfully captures a document, either automatically or manually (via user interaction). This event includes the capture response data. For an in-depth breakdown of the capture response, refer to the Document Camera Componentdocumentation page.
(Optionally) Initialize the SmartCapture module: It's recommended to initialize the SmartCapture module used by the camera after the page is loaded but before the camera is opened. This can speed up camera initialization, though it's not strictly necessary —if the module isn't initialized ahead of time, the camera will automatically initialize it when started.
```
SmartCaptureModule.getInstance().init();
```
Proceed with Your Workflow: This completes the setup for using the smart document capture component. Use the data returned in the CaptureEventName event to proceed with your workflow. For most implementations, the next step is to upload the captured image for processing and validation.

Face Camera Integration

Integrate the Face Camera component by adding the custom HTML element to your page's markup. This sets up the component within your application and lets you use its features. For example:
```
<live-face-camera
  id="live-face-camera"
  class="faceCamera"
  environment="development">
</live-face-camera>
```
You can use any id or class attribute to uniquely identify the component or to apply styles as needed. By assigning an ID or class, you can control and reference the component through your JavaScript code.

By default, the environment is set to production, meaning you do not need to specify it unless you want to enable development mode.

Use standard CSS to customize the appearance, size, layout, and positioning of the Face Camera component using CSS properties such as width, height, border, margin, padding, and position.

You may want to initially set the display property of the component to none since nothing is being rendered to the camera at this time. The component will remain hidden until you're ready to activate it or display its contents.
```
.faceCamera {
  display: none;
}
```
For detailed information about the available parameters and options, see the Face Camera Component documentation page.
Attach event listeners to the component you added in the previous step. Most implementations will want to listen for at least the following events:
```
const liveFaceCamera = document.getElementById('live-face-camera');

liveFaceCamera.addEventListener(LiveFaceCamera.OpenEventName, onOpened);
liveFaceCamera.addEventListener(LiveFaceCamera.CloseEventName, onClosed);
liveFaceCamera.addEventListener(LiveFaceCamera.CaptureEventName, onCaptured);
liveFaceCamera.addEventListener(LiveFaceCamera.FailureEventName, onFailure);
```
Details:
- OpenEventName Triggered when the OS camera feed starts streaming to the camera component. Although not strictly necessary to listen for this event, implementations that initially hide the camera until it is in use may want to handle this event to update the camera's visibility.
- CloseEventName Triggered when the OS camera feed stops streaming to the camera. This may occur due to an error or a successful capture. In both cases, the respective event will be issued in addition to the CloseEventName event. Similar to OpenEventName, this event does not need to be listened to unless required by your implementation.
- FailureEventName Triggered when the camera encounters an error. This event includes additional information about the error in the event details. For a detailed breakdown of error codes and causes, refer to the Face Camera Component documentation page.
- CaptureEventName Triggered when the Face Camera Component successfully captures an image of the user's face, whether automatically or manually by user interaction. This event includes the capture response data. For an in-depth breakdown of the capture response, refer to the Face Camera Component documentation page.
After you finish integrating the component and set up the required event listeners, use the returned data from the capture event to continue the workflow.

The capture event contains the captured image of the user's face, providing you with the necessary data to continue. In most implementations, the next step will be to upload the captured image for liveness checks and/or face match. These processes help ensure the authenticity of the captured image and verify the user's identity.

By using the data from the capture event and following the appropriate processing and validation steps, you can efficiently integrate the Face Camera Component into your application and enhance the user experience with smart face capture technology.

Summary​

Index​

Document Camera Integration​

Face Camera Integration​

Summary

Index

Document Camera Integration

Face Camera Integration