@regulaforensics/vp-frontend-face-components 7.1.1697-rc → 7.1.1698-nightly

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +68 -194
  2. package/dist/index.d.ts +6 -43
  3. package/dist/main.iife.js +18 -18
  4. package/dist/main.js +1637 -1641
  5. package/package.json +1 -1
package/README.md CHANGED
@@ -7,7 +7,6 @@
7
7
  - [Install via CDN](#install-via-cdn)
8
8
  - [Settings](#settings)
9
9
  - [Customization](#customization)
10
- - [Package Resources](#package-resources)
11
10
  - [Events](#events)
12
11
  - [Response](#response)
13
12
  - [Custom Translations](#custom-translations)
@@ -19,7 +18,7 @@
19
18
 
20
19
  ## Overview
21
20
 
22
- The Face SDK Web Components let you add automatic capture of a user's selfie and liveness check to your web site. The components capture a face from the device camera and can either simply detect a face on the captured photo or confirm the <a href="https://docs.regulaforensics.com/develop/face-sdk/overview/introduction/#liveness-assessment" target="_blank">face liveness</a>.
21
+ The Face SDK Web Components let you add automatic capture of a user's selfie and liveness check to your web site. The components capture a face from the device camera and can either simply detect a face on the captured photo or confirm the face <a href="https://docs.regulaforensics.com/develop/overview/#liveness-detection" target="_blank">liveness</a>.
23
22
 
24
23
  The available components are the following:
25
24
 
@@ -115,8 +114,6 @@ Note that we have removed the `videoRecording` setting. Now you should use `reco
115
114
 
116
115
  You can set any parameter using `settings`. Find below examples of applying all the settings at once as well as using just some of them.
117
116
 
118
- Note that `settings` must be applied **after** the component has been added to the page’s DOM (for example, after calling `container.append(faceCapturEl)`). If settings are applied before the component is added to the DOM, they may not take effect.
119
-
120
117
  An example of using all the settings:
121
118
 
122
119
  ````javascript
@@ -192,9 +189,9 @@ Here are all the available settings:
192
189
 
193
190
  | Setting | Info | Data type | Default value | Values | Used in |
194
191
  |:--------------------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------:|:--------------------------------------:|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|---------------------------------|
195
- | `locale` | Language of the component. The value is determined based on the following priority:<br><br>1. `locale` component attribute takes the highest priority if explicitly set.<br>2. If `locale` is not set, the system checks the `html.lang` attribute.<br>3. If no `html.lang` attribute is available, the system attempts to determine the language from `window.navigator`.<br>4. If none of the above are available, the default value `en` is used. | `string` | `en` | `ru`, `en`, `de`, `pl`, `it`, `hu`, `zh`, `sk`, `uk`, `fr`, `es`, `pt`, `ar`, `nl`, `id`, `vi`, `ko`, `ms`, `ro`, `el`, `tr`, `ja`, `cs`, `th`, `hi`, `bn`, `he`, `fi`, `sv`, `da`, `hr`, `no` | `face-liveness`, `face-capture` |
192
+ | `locale` | Language of the component. | `string` | `en` | `ru`, `en`, `de`, `pl`, `it`, `hu`, `zh`, `sk`, `uk`, `fr`, `es`, `pt`, `ar`, `nl`, `id`, `vi`, `ko`, `ms`, `ro`, `el`, `tr`, `ja`, `cs`, `th`, `hi`, `bn`, `he`, `fi`, `sv`, `da`, `hr`, `no` | `face-liveness`, `face-capture` |
196
193
  | `url` | Backend URL. | `string` | `https://faceapi.regulaforensics.com/` | any url | `face-liveness` |
197
- | `copyright` | Whether to show the Regula copyright footer. | `boolean` | `true` | `true`, `false` | `face-liveness`, `face-capture` |
194
+ | `copyright` | Whether to show the Regula copyright footer. | `boolean` | `true` | `true`, `false` | `face-liveness`, `face-capture` |
198
195
  | `cameraId` | Ability to select a camera by defining the camera ID. | `string` | `undefined` | `camera id string value` | `face-liveness`, `face-capture` |
199
196
  | `changeCamera` | Whether to show the "Camera Switch" button. Note that if `livenessType = 0` (active liveness), the button will not be displayed on mobile devices regardless of the `changeCamera` setting. | `boolean` | `true` | `true`, `false` | `face-liveness`, `face-capture` |
200
197
  | `startScreen` | Whether to show the Start screen with video instructions. If `true`, the start screen is shown. If `false`, no start screen is shown and instead the camera of the device is turned on automatically to capture a face. | `boolean` | `true` | `true`, `false` | `face-liveness`, `face-capture` |
@@ -260,12 +257,10 @@ component.settings = {
260
257
  ```
261
258
 
262
259
  ### CSS Parts
260
+ To customize the appearance, use the part attribute and define the desired CSS properties. (Note: The specificity of the ::part styles is greater than that of the styles set via settings). Examples:
263
261
 
264
- To customize the appearance, use the `::part` attribute to define the desired CSS properties. Note that `::part` styles take precedence over styles set via settings.
265
-
266
- For example:
262
+ ```css
267
263
 
268
- ```javascript
269
264
  /** general component overlay */
270
265
  face-liveness {
271
266
  background-color: #e6e6e6;
@@ -362,37 +357,7 @@ face-liveness::part(retry-screen-subtitle-text) {
362
357
  }
363
358
  ```
364
359
 
365
- For more details about `::part()` CSS pseudo-elements, see the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part" target="_blank">MDN Web Docs article</a>.
366
-
367
- ## Package Resources
368
-
369
- For proper operation, Face SDK Web Components require several package files:
370
-
371
- * WASM (`Liveness.wasm`, `Liveness.data`)
372
- * worker (`Liveness.worker.js`)
373
-
374
- By default, these files are downloaded from Regula servers, but you can set your own sources. To do this, perform the following steps:
375
-
376
- **1.** Retrieve the current worker path from the component settings. This path points to where the files are currently being loaded from (on Regula servers):
377
-
378
- ```javascript
379
- const component = document.querySelector('face-liveness');
380
- const workerPath = component.settings.workerPath;
381
- ```
382
-
383
- **2.** Upload all files (`Liveness.worker.js`, `Liveness.wasm`, `Liveness.data`) to your own location.
384
-
385
- !!! warning
386
- The files must be located in the same directory and have the same names as called before.
387
-
388
- **3.** Update the `workerPath` setting to your custom host directory where all three files are located:
389
-
390
- ```javascript
391
- const component = document.querySelector('face-liveness');
392
- component.settings.workerPath = 'https://<CUSTOM_PATH_TO_WASM_AND_WORKER_FILES_PATH>';
393
- ```
394
-
395
- To decrease file size, on your server you can apply the desired <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Encoding" target="_blank">compression method</a>.
360
+ For more details about ::part() CSS pseudo-elements, see the article at [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/::part).
396
361
 
397
362
 
398
363
  ## Events
@@ -421,7 +386,7 @@ The generated event object (`event.detail`) contains three fields that describe
421
386
  }
422
387
  ```
423
388
 
424
- ### Type of actions
389
+ Type of actions:
425
390
 
426
391
  | Type of action | Description of the action | The component |
427
392
  |:-------------------------|:---------------------------------------------------------------------------------------|:-------------------------------|
@@ -451,7 +416,7 @@ In cases of unsuccessful work, the `data` field will contain the following field
451
416
  }
452
417
  ```
453
418
 
454
- ### Table of event causes
419
+ Table of event causes:
455
420
 
456
421
  | Reason | Description of the reason |
457
422
  |:----------------------------|:--------------------------------------------------------------------------------------------------------|
@@ -471,16 +436,21 @@ In cases of unsuccessful work, the `data` field will contain the following field
471
436
  | `INCORRECT_CAMERA_ID` | No camera with the specified ID found. |
472
437
  | `WEBSERVICE_NOT_COMPATIBLE` | The web service and component versions are incompatible. |
473
438
  | `HTTP_NOT_SUPPORTED` | The web component does not work over the HTTP protocol, use HTTPS instead. |
474
- | `CANCELLED` | The user has clicked the Close button. |
439
+ | `CANCELLED` | The user has clicked by close button |
440
+
441
+ The table below describes the cases of event generation:
475
442
 
476
- ### Cases of event generation
443
+ ### face-liveness & face-capture
477
444
 
478
445
  <table>
479
446
  <thead>
480
447
  <tr>
481
- <th>Event condition</th>
448
+ <th>Event condition </th>
482
449
  <th>Event type</th>
483
- <th>Event object `event.detail`</th>
450
+ <th>
451
+
452
+ Event object `event.detail`
453
+ </th>
484
454
  <th>Description</th>
485
455
  </tr>
486
456
  </thead>
@@ -488,7 +458,12 @@ In cases of unsuccessful work, the `data` field will contain the following field
488
458
  <tr>
489
459
  <td>The component is mounted in the DOM.</td>
490
460
  <td>
491
- `face-liveness`<br><br>`face-capture`
461
+
462
+ `face-liveness`
463
+ <br>
464
+ <br>
465
+ `face-capture`
466
+
492
467
  </td>
493
468
  <td>
494
469
 
@@ -501,6 +476,7 @@ In cases of unsuccessful work, the `data` field will contain the following field
501
476
 
502
477
  </td>
503
478
  <td>
479
+
504
480
  To receive this event, you must wrap the component in another element (for example, a div) and add an addEventListener to it. When the component appears in the DOM, the event will pop up.
505
481
 
506
482
  For example:
@@ -513,11 +489,15 @@ For example:
513
489
 
514
490
  </td>
515
491
  </tr>
516
-
517
492
  <tr>
518
- <td>The "Get started" button was pressed.</td>
493
+ <td>The "Get started" button is pressed.</td>
519
494
  <td>
520
- `face-liveness`<br><br>`face-capture`
495
+
496
+ `face-liveness`
497
+ <br>
498
+ <br>
499
+ `face-capture`
500
+
521
501
  </td>
522
502
  <td>
523
503
 
@@ -531,11 +511,15 @@ For example:
531
511
  </td>
532
512
  <td></td>
533
513
  </tr>
534
-
535
514
  <tr>
536
- <td>The "Retry" button was pressed.</td>
515
+ <td>The "Retry" button is pressed.</td>
537
516
  <td>
538
- `face-liveness`<br><br>`face-capture`
517
+
518
+ `face-liveness`
519
+ <br>
520
+ <br>
521
+ `face-capture`
522
+
539
523
  </td>
540
524
  <td>
541
525
 
@@ -549,75 +533,37 @@ For example:
549
533
  </td>
550
534
  <td></td>
551
535
  </tr>
552
-
553
536
  <tr>
554
- <td>The "Close" button was pressed.</td>
555
- <td>
556
- `face-capture`
557
- </td>
537
+ <td>The "Close" button is pressed.</td>
558
538
  <td>
559
539
 
560
- ```javascript
561
- {
562
- action: "CLOSE",
563
- data: {
564
- reason: "CANCELLED",
565
- status: 0
566
- }
567
- }
568
- ```
540
+ `face-liveness`
541
+ <br>
542
+ <br>
543
+ `face-capture`
569
544
 
570
- </td>
571
- <td></td>
572
- </tr>
573
-
574
- <tr>
575
- <td>The liveness assessment session had not started, but the "Close" button was pressed.</td>
576
- <td>
577
- `face-liveness`
578
545
  </td>
579
546
  <td>
580
547
 
581
548
  ```javascript
582
549
  {
583
550
  action: "CLOSE",
584
- data: {
585
- reason: "CANCELLED",
586
- status: 0
587
- }
551
+ data: null
588
552
  }
589
553
  ```
590
554
 
591
555
  </td>
592
556
  <td></td>
593
557
  </tr>
594
-
595
558
  <tr>
596
- <td>The liveness assessment session had started before the "Close" button was pressed.</td>
597
- <td>
598
- `face-liveness`
599
- </td>
559
+ <td>The work of the component is completed successfully.</td>
600
560
  <td>
601
561
 
602
- ```javascript
603
- {
604
- action: "CLOSE",
605
- data: {
606
- reason: "CANCELLED",
607
- transactionId: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
608
- status: 0
609
- }
610
- }
611
- ```
612
-
613
- </td>
614
- <td></td>
615
- </tr>
562
+ `face-liveness`
563
+ <br>
564
+ <br>
565
+ `face-capture`
616
566
 
617
- <tr>
618
- <td>The work of the component is completed successfully.</td>
619
- <td>
620
- `face-liveness`<br><br>`face-capture`
621
567
  </td>
622
568
  <td>
623
569
 
@@ -625,41 +571,24 @@ For example:
625
571
  {
626
572
  action: "PROCESS_FINISHED",
627
573
  data: {
628
- response: { ... },
629
- status: 1
630
- }
574
+ response: { ... },
575
+ status: 1
576
+ },
631
577
  }
632
578
  ```
633
579
 
634
580
  </td>
635
581
  <td></td>
636
582
  </tr>
637
-
638
583
  <tr>
639
584
  <td>The work of the component failed.</td>
640
585
  <td>
641
- `face-capture`
642
- </td>
643
- <td>
644
-
645
- ```javascript
646
- {
647
- action: "PROCESS_FINISHED",
648
- data: {
649
- reason: "An event has occurred",
650
- status: 0
651
- }
652
- }
653
- ```
654
586
 
655
- </td>
656
- <td></td>
657
- </tr>
658
-
659
- <tr>
660
- <td>The liveness assessment session had not started, but the work of the component failed.</td>
661
- <td>
662
587
  `face-liveness`
588
+ <br>
589
+ <br>
590
+ `face-capture`
591
+
663
592
  </td>
664
593
  <td>
665
594
 
@@ -669,61 +598,22 @@ For example:
669
598
  data: {
670
599
  reason: "An event has occurred",
671
600
  status: 0
672
- }
673
- }
674
- ```
675
-
676
- </td>
677
- <td></td>
678
- </tr>
679
-
680
- <tr>
681
- <td>The liveness assessment session had started, and then the work of the component failed.</td>
682
- <td>
683
- `face-liveness`
684
- </td>
685
- <td>
686
-
687
- ```javascript
688
- {
689
- action: "PROCESS_FINISHED",
690
- data: {
691
- reason: "An event has occurred",
692
- transactionId: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
693
- status: 0
694
- }
601
+ },
695
602
  }
696
603
  ```
697
604
 
698
605
  </td>
699
606
  <td></td>
700
607
  </tr>
701
-
702
608
  <tr>
703
609
  <td>The work of the component finished by timeout.</td>
704
- <td>
705
- `face-capture`
706
- </td>
707
610
  <td>
708
611
 
709
- ```javascript
710
- {
711
- action: "PROCESS_FINISHED",
712
- data: {
713
- reason: "TIMEOUT_ERROR",
714
- status: 0
715
- }
716
- }
717
- ```
612
+ `face-liveness`
613
+ <br>
614
+ <br>
615
+ `face-capture`
718
616
 
719
- </td>
720
- <td></td>
721
- </tr>
722
-
723
- <tr>
724
- <td>The work of the component finished by timeout.</td>
725
- <td>
726
- `face-liveness`
727
617
  </td>
728
618
  <td>
729
619
 
@@ -731,46 +621,30 @@ For example:
731
621
  {
732
622
  action: "PROCESS_FINISHED",
733
623
  data: {
734
- reason: "TIMEOUT_ERROR",
735
- transactionId: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
624
+ reason: "TIMEOUT_ERROR"
736
625
  status: 0
737
- }
626
+ },
738
627
  }
739
628
  ```
740
629
 
741
630
  </td>
742
631
  <td></td>
743
632
  </tr>
744
-
745
633
  <tr>
746
634
  <td>The component is initialized and ready to work.</td>
747
635
  <td>
748
- `face-capture`
749
- </td>
750
- <td>
751
-
752
- ```javascript
753
- {
754
- action: "SERVICE_INITIALIZED",
755
- data: null
756
- }
757
- ```
758
636
 
759
- </td>
760
- <td></td>
761
- </tr>
762
-
763
- <tr>
764
- <td>The component is initialized and ready to work.</td>
765
- <td>
766
637
  `face-liveness`
638
+ <br>
639
+ <br>
640
+ `face-capture`
641
+
767
642
  </td>
768
643
  <td>
769
644
 
770
645
  ```javascript
771
646
  {
772
647
  action: "SERVICE_INITIALIZED",
773
- transactionId: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
774
648
  data: null
775
649
  }
776
650
  ```
@@ -778,7 +652,6 @@ For example:
778
652
  </td>
779
653
  <td></td>
780
654
  </tr>
781
-
782
655
  </tbody>
783
656
  </table>
784
657
 
@@ -896,6 +769,7 @@ The list of labels used in the component:
896
769
  | **turnHeadLeft** | Turn head left a bit to look straight | `face-liveness`, `face-capture` |
897
770
  | **turnHeadRight** | Turn head right a bit to look straight | `face-liveness`, `face-capture` |
898
771
 
772
+
899
773
  ## Examples
900
774
 
901
775
  You can find examples of using the components on the <a href="https://github.com/regulaforensics/face-web-components-samples" target="_blank">Samples page</a>.
package/dist/index.d.ts CHANGED
@@ -180,48 +180,7 @@ export declare class FaceLivenessWebComponent extends HTMLElement {
180
180
  disconnectedCallback(): void;
181
181
  }
182
182
 
183
- export declare interface FaceTranslations {
184
- showOnlyOneFace?: string;
185
- preparingCamera?: string;
186
- allowAccessCamera?: string;
187
- somethingWentWrong?: string;
188
- incorrectCameraId?: string;
189
- checkCameraId?: string;
190
- preparingService?: string;
191
- allowAccessToCamera?: string;
192
- error?: string;
193
- versionNotSupported?: string;
194
- updateBrowser?: string;
195
- licenseError?: string;
196
- licenseExpired?: string;
197
- onlyPortraitOrientation?: string;
198
- turnDeviceIntoPortrait?: string;
199
- tryAgain?: string;
200
- noCameraAvailable?: string;
201
- checkCameraConnection?: string;
202
- noMaskSunglassesHeaddress?: string;
203
- ambientLighting?: string;
204
- lookStraight?: string;
205
- fitYourFace?: string;
206
- moveCloser?: string;
207
- moveAway?: string;
208
- holdSteady?: string;
209
- turnHead?: string;
210
- processing?: string;
211
- retryButtonText?: string;
212
- followGuidelinesText?: string;
213
- letsTryAgainTitle?: string;
214
- noCameraPermission?: string;
215
- goButton?: string;
216
- centerFaceTurnHead?: string;
217
- centerFace?: string;
218
- selfieTime?: string;
219
- errorCode?: string;
220
- illumination?: string;
221
- cameraLevel?: string;
222
- noAccessories?: string;
223
- getReady?: string;
224
- }
183
+ export declare type FaceTranslations = Partial<Record<Labels, string>>;
225
184
 
226
185
  export declare class FullScreenContainer extends HTMLElement {
227
186
  private _root;
@@ -243,7 +202,11 @@ export declare interface IFaceLiveness extends IFaceDetection {
243
202
  'device-orientation'?: boolean;
244
203
  }
245
204
 
246
- export declare type Locales = 'ru' | 'en' | 'de' | 'pl' | 'it' | 'hu' | 'zh' | 'sk' | 'uk' | 'fr' | 'es' | 'pt' | 'ar' | 'nl' | 'id' | 'vi' | 'ko' | 'ms' | 'ro' | 'el' | 'tr' | 'ja' | 'cs' | 'th' | 'hi' | 'bn' | 'he' | 'fi' | 'sv' | 'da' | 'hr' | 'no' | string;
205
+ declare type Labels = 'showOnlyOneFace' | 'preparingCamera' | 'allowAccessCamera' | 'somethingWentWrong' | 'incorrectCameraId' | 'checkCameraId' | 'preparingService' | 'allowAccessToCamera' | 'error' | 'versionNotSupported' | 'updateBrowser' | 'licenseError' | 'licenseExpired' | 'onlyPortraitOrientation' | 'turnDeviceIntoPortrait' | 'tryAgain' | 'noCameraAvailable' | 'checkCameraConnection' | 'noMaskSunglassesHeaddress' | 'ambientLighting' | 'lookStraight' | 'fitYourFace' | 'moveCloser' | 'moveAway' | 'holdSteady' | 'turnHead' | 'removeOcclusion' | 'turnHeadUp' | 'turnHeadDown' | 'turnHeadLeft' | 'turnHeadRight' | 'blinkYourEyes' | 'processing' | 'retryButtonText' | 'followGuidelinesText' | 'letsTryAgainTitle' | 'noCameraPermission' | 'goButton' | 'centerFaceTurnHead' | 'centerFace' | 'selfieTime' | 'errorCode' | 'illumination' | 'cameraLevel' | 'noAccessories' | 'getReady' | 'httpNotSupported' | 'webServerNotCompatible' | 'processCompleted';
206
+
207
+ declare type Languages = 'ru' | 'en' | 'de' | 'pl' | 'it' | 'hu' | 'zh' | 'sk' | 'uk' | 'fr' | 'es' | 'pt' | 'ar' | 'nl' | 'id' | 'vi' | 'ko' | 'ms' | 'ro' | 'el' | 'tr' | 'ja' | 'cs' | 'th' | 'hi' | 'bn' | 'he' | 'fi' | 'sv' | 'da' | 'hr' | 'no';
208
+
209
+ export declare type Locales = Languages | string;
247
210
 
248
211
  export declare const RecordingProcess: {
249
212
  readonly ASYNCHRONOUS_UPLOAD: 0;