The available component is:
idv-flow
The web components are based on WebAssembly (.wasm module), which is our core C++ code compiled for use in browsers and wrapped with a JS layer. It is exactly the same code as built for all the other platform SDK packages.
Please note that:
- The components work only under the HTTPS protocol on the website.
- The components library does register the components on the web page itself, so make sure to import the library to your web site before adding the components to the web page code.
| Devices |  |
 |
 |
|---|---|---|---|
| Mobile (iOS) | 99 (iOS14.4+) | 99 (iOS14.4+) | 11 |
| Mobile (Android) | 69 | 63 | - |
| Desktop | 66 | 69 | 11 |
On the command line, navigate to the root directory of your project:
cd /path/to/project
Run the following command:
npm init
Answer the questions in the command line questionnaire.
Install idv-capture-web:
npm i @regulaforensics/idv-capture-web
Create index.html and index.js files in the root directory of the project.
Import @regulaforensics/idv-capture-web into your index.js:
import './node_modules/@regulaforensics/idv-capture-web/dist/main.js';In index.html connect index.js and add the name of the component you want to use. Available components:
<idv-flow></idv-flow>
For example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My app</title>
</head>
<body>
<idv-flow></idv-flow>
<script type="module" src="index.js"></script>
</body>
</html>Connect the script in your .html file. CDN link: unpkg.com/:package@:version/:file
For example:
<script src="https://unpkg.com/@regulaforensics/idv-capture-web@latest/dist/main.iife.js"></script>Add the name of the component to the html, as in the example above.
Use IdvIntegrationService to setup idv flow.
General example of the integration step by step
/** create service */
const service = new IdvIntegrationService();
/** create events listener, which set to the service */
const idvEventListener = (event) => {
console.log(event);
};
/** set up service settings */
service.sessionRestoreMode = true;
service.eventListener = idvEventListener;
/** for convenience, we will use an asynchronous function. You also can use Promises */
(async function () {
/** set modules */
const initResult = await service.initialize({
modulesConfig: { docreader: { devLicense: 'yourBase64license' } },
includedModules: [IdvModules.LIVENESS, IdvModules.DOC_READER], //import IdvModules from @regulaforensics/idv-capture-web
});
/** if something goes wrong, the command error will contain an error field. */
if (initResult.error) {
console.log(initResult.error);
return;
}
const configureResult = await service.configure({
host: 'https://your.host.com',
userName: '',
password: '',
});
if (configureResult.error) {
console.log(configureResult.error);
return;
}
const prepareResult = await service.prepareWorkflow({
workflowId: 'your_workflow_id',
});
if (prepareResult.error) {
console.log(prepareResult.error);
return;
}
const metadata = { anyMetadata: 'Any Metadata' };
const locale = 'en-us'; // 'en-us' for example. Should be the language of your workflow
const startWorkflowResult = await service?.startWorkflow({ locale: locale, metadata: metadata });
if (startWorkflowResult.error) {
console.log(startWorkflowResult.error);
return;
}
console.log('WORKFLOW FINISHED :', startWorkflowResult);
})();You can subscribe to the component events.
For example:
/** your listener */
const idvEventListener = (event) => {
console.log(event);
};
const service = new IdvIntegrationService();
service.eventListener = idvEventListener;nonce - set CSP nonce id to the style tag
const service = new IdvIntegrationService();
service.nonce = nonceId;sessionRestoreMode - set restore mode to the idv-capture-web . restores the session from the current step (for example, if the page was accidentally reloaded)
const service = new IdvIntegrationService();
service.sessionRestoreMode = true;version - returns the version of the component
const service = new IdvIntegrationService();
console.log(service.version);Check types in the index.d.ts
async initialize(config: InitConfig): Promise<{ error?: BaseInitializationError }> - initialize the idv-web-capture worker.
async configure( config: ConnectionConfig | UrlConnectionConfig ): Promise<ConfigureCompletion | UrlConfigureCompletion> - configures the service. accepts input parameters for connecting to the platform
async getWorkFlows(params?: WorkflowListRequest): Promise<WorkflowListCompletion> - returns list of available workflows
async prepareWorkflow({ workflowId }: { workflowId: string }): Promise<PrepareWorkflowCompletion> - prepared service with workflowId. In this method, the component checks the compatibility of modules and steps in the workflow.
async startWorkflow(config?: StartWorkflowConfig): Promise<WorkflowCompletion> - this method starts workflow. We recommend showing the web component immediately before executing this method and deleting the web component after the promise of this method resolves.
async deinitialize(): Promise<DeinitializeCompletion> - deinitialize the service. After this command you should run initialize method if you want to continue working with the service. We recommend executing this command when you have completed the necessary work on the page.