# @regulaforensics/vp-frontend-document-components

> Regula framework agnostic web components to work with webcamera

Latest version **9.8.3074** (published 2026-09-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install @regulaforensics/vp-frontend-document-components
pnpm add @regulaforensics/vp-frontend-document-components
yarn add @regulaforensics/vp-frontend-document-components
bun add @regulaforensics/vp-frontend-document-components
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 9.8.3074 |
| Published | 2026-09-07 |
| First published | 2021-10-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 1.9 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Regula Forensics, Inc. |
| Maintainers | regula, ikliashchou |

## Links

- npm: https://www.npmjs.com/package/@regulaforensics/vp-frontend-document-components
- Homepage: https://storybook-document.regulaforensics.com/
- npm.io page: https://npm.io/package/@regulaforensics/vp-frontend-document-components

## Dependencies (2)

- [qrcode.react](https://npm.io/package/qrcode.react.md) ^4.2.0
- [@regulaforensics/document-reader-webclient](https://npm.io/package/@regulaforensics/document-reader-webclient.md) ^9.8.1068

## Recent versions

- 9.8.3074 (latest) — 2026-09-07
- 9.9.3118-rc (rc) — 2026-10-03
- 9.9.3117-nightly (nightly) — 2026-10-02
- 7.2.1573-stage (stage) — 2024-03-29
- 9.9.3116-rc — 2026-10-02
- 9.9.3115-rc — 2026-10-01
- 9.9.3114-nightly — 2026-09-30
- 9.9.3113-rc — 2026-09-30
- 9.9.3112-nightly — 2026-09-29
- 9.9.3111-rc — 2026-09-29
- 9.9.3110-nightly — 2026-09-28
- 9.9.3109-nightly — 2026-09-27
- 9.9.3108-rc — 2026-09-26
- 9.9.3107-nightly — 2026-09-25
- 9.9.3106-rc — 2026-09-25
- … 1276 more at https://npm.io/package/@regulaforensics/vp-frontend-document-components/versions

## README

# Regula Document Reader SDK Web Components

* [How to Install](#how-to-install)
* [Documentation](#documentation)
* [Demo Application](#demo-application)
* [Sample Projects](#sample-projects)
* [Technical Support](#technical-support)
* [Business Enquiries](#business-enquiries)

## How to Install

Document Reader Web Components package contains a number of predefined and configurable components, as described in the table below.

| Component                                                                                                               | Description                                                                                                                                                                                                                                                                                                                                                                                              |
|-------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| <span style="white-space: nowrap">[Smart capture](#smart-capture-component)</span> <br/>(`document-reader`)             | Recommended component for most cases, as it is easy to integrate yet flexibly configurable.<br/> <ul><li>Takes photo by the device's camera **automatically**, when the document is presented in the frame in focus.</li> <li>Can take photo **manually** by using dedicated capture button.</li> <li>Provides predefined UI and behavior.</li> <li>Have wide range of configurable parameters.</li><ul> |
| [Snapshot](#snapshot-component) <br/> <span style="white-space: nowrap">(`camera-snapshot`)</span>                      | <ul><li>Can take photo **manually** by using dedicated capture button.</li><li>Provides predefined UI and behavior.</li><li>Have wide range of configurable parameters.</li></ul>                                                                                                                                                                                                                        |
| <a target="_blank" href="https://docs.regulaforensics.com/develop/doc-reader-sdk/web-components/advanced/">Advanced</a> | <ul><li>Can handle the extended range of the document recognition tasks.</li><li>Provides the most advanced configuration capabilities.</li><li>Has no predefined graphical interface, leaving UI implementation to you.</li></ul>                                                                                                                                                                       |

### Before You Start

* Never keep the license in production environment. On production environments, the <a target="_blank" href="https://docs.regulaforensics.com/develop/doc-reader-sdk/overview/licensing/#domain-name-licensing">domain name licensing</a> must be used. Using the explicit license in the source code of your project is applicable only in development and for testing.
* Using HTTPS protocol is a must. Document Reader Web Components use the `getUserMedia` method to display the video stream from the camera—this feature is available only in secure contexts.
* The Web Components are registered on the web page itself, so make sure to import the library to your website before adding any of the components to the web page code.
* Only the modern browser versions are supported, see the [compatibility](#compatibility) section. Polyfills are not included in the package by default.

### Compatibility

| Devices              | ![Chrome](https://raw.githubusercontent.com/alrra/browser-logos/main/src/chrome/chrome_48x48.png) | ![FireFox](https://raw.githubusercontent.com/alrra/browser-logos/main/src/firefox/firefox_48x48.png) | ![Safari](https://raw.githubusercontent.com/alrra/browser-logos/main/src/safari/safari_48x48.png) |
|:---------------------|:-------------------------------------------------------------------------------------------------:|:----------------------------------------------------------------------------------------------------:|:-------------------------------------------------------------------------------------------------:|
| **Mobile (iOS)**     |                                                99                                                 |                                                  99                                                  |                                                11                                                 |
| **Mobile (Android)** |                                                66                                                 |                                                  63                                                  |                                                 -                                                 |
| **Desktop**          |                                                61                                                 |                                                  63                                                  |                                                11                                                 |

To support the older browser versions in your project, install the required polyfill packages manually.
Follow the link to npm package <a href="https://www.npmjs.com/package/@webcomponents/webcomponentsjs" target="_blank">@webcomponents/webcomponentsjs</a> for installation details.

### Step 1: Install Library

* [npm](#npm)
* [CDN](#cdn)

#### npm

1\. Install the package <a href="https://www.npmjs.com/package/@regulaforensics/vp-frontend-document-components" target="_blank">vp-frontend-document-components</a>:

```bash
npm i @regulaforensics/vp-frontend-document-components
```

2\. Import the function `defineComponents` and the class `DocumentReaderService` into your `.js` file:

* With module bundler:

```javascript
import { defineComponents, DocumentReaderService } from '@regulaforensics/vp-frontend-document-components';
```

* Without module bundler:

```javascript
import { defineComponents, DocumentReaderService } from './node_modules/@regulaforensics/vp-frontend-document-components/dist/main.js';
```

#### CDN

1\. Connect the script to your `.html` file. Use a CDN link in the following format: `unpkg.com/:package@:version/:file`.

For example:

```html
<script src="https://unpkg.com/@regulaforensics/vp-frontend-document-components@latest/dist/main.iife.js"></script>
```

2\. Import the function `defineComponents` and the class `DocumentReaderService` into your `.js` file:

```javascript
const { defineComponents, DocumentReaderService } = window.Regula;
```

### Step 2: Add Component

* [Smart capture](#smart-capture-component)
* [Snapshot](#snapshot-component)

#### Smart Capture Component

1\. Add `DocumentReaderService` to the global variable `RegulaDocumentSDK` and set a <a target="_blank" href="https://docs.regulaforensics.com/develop/doc-reader-sdk/web-components/getting-started/scenarios/">processing scenario</a>:

```javascript
window.RegulaDocumentSDK = new DocumentReaderService();

window.RegulaDocumentSDK.recognizerProcessParam = {
  processParam: {
    scenario: 'MrzAndLocate',
  },
};
window.RegulaDocumentSDK.imageProcessParam = {
  processParam: {
    scenario: 'MrzAndLocate',
  },
};
```

2\. Define the components and initialize the service:

* **Production** environment. <a target="_blank" href="https://docs.regulaforensics.com/develop/doc-reader-sdk/overview/licensing/#domain-name-licensing">Domain name licensing</a> is used, so don't add the license to the project source code:

```javascript
defineComponents().then(() => window.RegulaDocumentSDK.initialize());
```

* **Development** environment. Use this option only when your product is under development or testing, and you still don't expose your application to the internet, as your license needs to be added to the project source code:

```javascript
defineComponents().then(() => window.RegulaDocumentSDK.initialize({ license: '<BASE64_LICENSE_KEY>' }));
```

<a href="https://support.regulaforensics.com/hc/en-us/articles/15378060500881-How-to-convert-a-license-file-to-BASE64" target="_blank">How to convert a license file to the Base64 string</a>

!!! warning
    Once the development is finished and your product is ready to be exposed to the internet, make sure that you have removed the license from your source code.

3\. Add the component tag to the `.html` file:

```html
<document-reader></document-reader>
```

#### Snapshot Component

1\. Define the components:

```javascript
defineComponents();
```

2\. Add the component tag to the `.html` file:

```html
<camera-snapshot></camera-snapshot>
```

## Documentation

<a target="_blank" href="https://docs.regulaforensics.com/develop/doc-reader-sdk/web-components/">Regula Document Reader SDK Web Components Documentation</a>

<a target="_blank" href="https://dev.regulaforensics.com/DocumentReaderSDK-WebComponents-Docs/">Regula Document Reader SDK Web Components API Reference</a>

## Demo Application

<a target="_blank" href="https://api.regulaforensics.com/?utm_source=npm">Demo Application</a>

## Sample Projects

There are several project examples that demonstrate the integration way of Regula Document Reader SDK Web Components, visit <a target="_blank" href="https://github.com/regulaforensics/document-web-components-samples">our repository on GitHub</a>.

Visit the <a target="_blank" href="https://storybook-document.regulaforensics.com/">Storybook</a> website to see the live demo.

## Technical Support

To submit a request to the Support Team, visit <a target="_blank" href="https://support.regulaforensics.com/hc/en-us/requests/new?utm_source=npm">Regula Help Center</a>.

## Business Enquiries

To discuss business opportunities, fill the <a target="_blank" href="https://explore.regula.app/docs-support-request">Enquiry Form</a> and specify your scenarios, applications, and technical requirements.

---
_Source: https://npm.io/package/@regulaforensics/vp-frontend-document-components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._