{"_id":"@azakawcompliance/azakaw-liveness-sdk","_rev":"5-d9e7823a7be03a177e8ca8979dcfb156","name":"@azakawcompliance/azakaw-liveness-sdk","dist-tags":{"latest":"1.0.5"},"versions":{"1.0.0":{"name":"@azakawcompliance/azakaw-liveness-sdk","version":"1.0.0","keywords":[],"author":{"name":"Azakaw"},"license":"ISC","_id":"@azakawcompliance/azakaw-liveness-sdk@1.0.0","maintainers":[{"name":"azakaw","email":"cristiano@azakaw.com"},{"name":"tareqazakaw","email":"tareq@azakaw.com"},{"name":"maaz-siddiqui-azakaw","email":"maaz.siddiqui@azakaw.com"}],"dist":{"shasum":"071eee42e1eec1970fcad98453b59e5fa43d020c","tarball":"https://registry.npmjs.org/@azakawcompliance/azakaw-liveness-sdk/-/azakaw-liveness-sdk-1.0.0.tgz","fileCount":7,"integrity":"sha512-PuqKtAISJJbLVTUHV72BAdI2muPMi1SghIclshPLoQuanw4nxosvFRDGYxe9pFbRvyxqT8X60ZCC7IeFeLgwOg==","signatures":[{"sig":"MEUCIQDZJLDjEq/HCNZtm4jzyPgY4DDVX9v+L5V8inMXeLW8WwIgfrBvCxux731B99MxVrzJnuaze6QNCSjcXUQsdGhpydc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":13542380},"main":"./dist/main.js","type":"module","types":"./dist/types/index.d.ts","module":"./dist/main.js","exports":{".":{"types":"./dist/types/index.d.ts","import":"./dist/main.js","default":"./dist/main.js"}},"gitHead":"22a399062f8f457bf6af7630b23c17d6565f7911","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"maaz-siddiqui-azakaw","email":"maaz.siddiqui@azakaw.com"},"_npmVersion":"10.9.3","description":"Azakaw web sdk includes the web components required for customer liveness.","directories":{},"_nodeVersion":"22.20.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/azakaw-liveness-sdk_1.0.0_1779715256910_0.5812582559202768","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@azakawcompliance/azakaw-liveness-sdk","version":"1.0.1","keywords":[],"author":{"name":"Azakaw"},"license":"ISC","_id":"@azakawcompliance/azakaw-liveness-sdk@1.0.1","maintainers":[{"name":"azakaw","email":"cristiano@azakaw.com"},{"name":"tareqazakaw","email":"tareq@azakaw.com"},{"name":"maaz-siddiqui-azakaw","email":"maaz.siddiqui@azakaw.com"}],"dist":{"shasum":"a1562bb155cac3b12dc43c0b6907667d13102250","tarball":"https://registry.npmjs.org/@azakawcompliance/azakaw-liveness-sdk/-/azakaw-liveness-sdk-1.0.1.tgz","fileCount":7,"integrity":"sha512-PCtfjEC+qUNh+CnSQP+EKO1hTYdHgqJixdMrU/pVMC2wuhcxvaa1M3VtwB2Wh6gUiTqpGQTq1D+wV08lkZIh2g==","signatures":[{"sig":"MEYCIQCdsKjy7eDz+XgNeKbptr+hNFBgfSg3ihFxWa5ZhzRiNAIhAJWmXp/SHqIoAEdKwnqpGFRvoYh2ZiEdl9+7k3KUWQuY","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":13543033},"main":"./dist/main.js","type":"module","types":"./dist/types/index.d.ts","module":"./dist/main.js","exports":{".":{"types":"./dist/types/index.d.ts","import":"./dist/main.js","default":"./dist/main.js"}},"gitHead":"5136c97299a79bc9bcdef4c26eda77485bda5f78","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"maaz-siddiqui-azakaw","email":"maaz.siddiqui@azakaw.com"},"_npmVersion":"11.6.2","description":"Azakaw web sdk includes the web components required for customer liveness.","directories":{},"_nodeVersion":"24.13.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/azakaw-liveness-sdk_1.0.1_1779724034123_0.5220286617000198","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@azakawcompliance/azakaw-liveness-sdk","version":"1.0.2","keywords":[],"author":{"name":"Azakaw"},"license":"ISC","_id":"@azakawcompliance/azakaw-liveness-sdk@1.0.2","maintainers":[{"name":"azakaw","email":"cristiano@azakaw.com"},{"name":"tareqazakaw","email":"tareq@azakaw.com"},{"name":"maaz-siddiqui-azakaw","email":"maaz.siddiqui@azakaw.com"}],"dist":{"shasum":"558320093e57e8ab30d67a7ed9d2c7ab6db6d1e3","tarball":"https://registry.npmjs.org/@azakawcompliance/azakaw-liveness-sdk/-/azakaw-liveness-sdk-1.0.2.tgz","fileCount":7,"integrity":"sha512-qfTu0znjPFP+pGmPlWjRrPr5tvVXoB+Ye1W6EIvfP88bbffKZtz8OaBnjglmtCv1Wtc0VmGoDSoFi6CkApyduA==","signatures":[{"sig":"MEQCIFmhCVReltzRUTJ0j40kBUs2PJADJkm2TIstvT/EkiLLAiAuCvUSaPvC+u1GQlC26StL5p1uOidqj5fit58vW/Z/bA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":13543034},"main":"./dist/main.js","type":"module","types":"./dist/types/index.d.ts","module":"./dist/main.js","exports":{".":{"types":"./dist/types/index.d.ts","import":"./dist/main.js","default":"./dist/main.js"}},"gitHead":"3afb6b17c54f956ea590a9bcf5fadabb021e8ffa","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"maaz-siddiqui-azakaw","email":"maaz.siddiqui@azakaw.com"},"_npmVersion":"11.6.2","description":"Azakaw web sdk includes the web components required for customer liveness.","directories":{},"_nodeVersion":"24.13.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/azakaw-liveness-sdk_1.0.2_1779737416006_0.03196831102347475","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"@azakawcompliance/azakaw-liveness-sdk","version":"1.0.4","keywords":[],"author":{"name":"Azakaw"},"license":"ISC","_id":"@azakawcompliance/azakaw-liveness-sdk@1.0.4","maintainers":[{"name":"azakaw","email":"cristiano@azakaw.com"},{"name":"tareqazakaw","email":"tareq@azakaw.com"},{"name":"maaz-siddiqui-azakaw","email":"maaz.siddiqui@azakaw.com"}],"dist":{"shasum":"0e35f24ae5ce720a77c4abe2011af885ac3c5e76","tarball":"https://registry.npmjs.org/@azakawcompliance/azakaw-liveness-sdk/-/azakaw-liveness-sdk-1.0.4.tgz","fileCount":4,"integrity":"sha512-XjPHdJMlB5jX5ix53TYVFygLRlqQ2cwFoQZ+AL51iQNarFpJEZk31N4b0b7UdfPvXvOU66lIlpa7tMoPI0dG0g==","signatures":[{"sig":"MEYCIQCBvIgklfVjwvYlRp8jzdjHhqXRaik3TEnDNMsEtt21SgIhANABNTQQDoBiAYcP9WWEGn/R7IUP1V8NPL1jbjDKa4+D","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":946434},"main":"./dist/main.js","type":"module","types":"./dist/types/index.d.ts","module":"./dist/main.js","exports":{".":{"types":"./dist/types/index.d.ts","import":"./dist/main.js","default":"./dist/main.js"}},"gitHead":"315223cb662108e74637cebc9a15c4db42582e33","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"_npmUser":{"name":"maaz-siddiqui-azakaw","email":"maaz.siddiqui@azakaw.com"},"_npmVersion":"11.6.2","description":"Azakaw web sdk includes the web components required for customer liveness.","directories":{},"_nodeVersion":"24.13.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/azakaw-liveness-sdk_1.0.4_1781281447171_0.618501103425926","host":"s3://npm-registry-packages-npm-production"}},"1.0.5":{"name":"@azakawcompliance/azakaw-liveness-sdk","version":"1.0.5","description":"Azakaw web sdk includes the web components required for customer liveness.","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"main":"./dist/main.js","module":"./dist/main.js","type":"module","types":"./dist/types/index.d.ts","exports":{".":{"types":"./dist/types/index.d.ts","import":"./dist/main.js","default":"./dist/main.js"}},"keywords":[],"author":{"name":"Azakaw"},"license":"ISC","gitHead":"75dfa8cc8d191d8164a8605e988e02c83e488921","_id":"@azakawcompliance/azakaw-liveness-sdk@1.0.5","_nodeVersion":"25.0.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-68VObL84m55msguSh8IpcckQM9mHhlxLEohCGDwGrtbpTRtplE5AeoCCsc3GwWpD6/Q7xdiu02nDvm+k5Usf4Q==","shasum":"b4a99c9261f95a3be64f40467c77566a0da1332f","tarball":"https://registry.npmjs.org/@azakawcompliance/azakaw-liveness-sdk/-/azakaw-liveness-sdk-1.0.5.tgz","fileCount":4,"unpackedSize":946429,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCaEStC1+J7vF1/DLtmrk6ZMq67/6dyQQIJlvKvoFm8fgIgHxgBi2nTh8m1tmXn0a5U/NxDGq2TQr+XCAt4+QWpjLQ="}]},"_npmUser":{"name":"tareqazakaw","email":"tareq@azakaw.com"},"directories":{},"maintainers":[{"name":"azakaw","email":"cristiano@azakaw.com"},{"name":"tareqazakaw","email":"tareq@azakaw.com"},{"name":"maaz-siddiqui-azakaw","email":"maaz.siddiqui@azakaw.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/azakaw-liveness-sdk_1.0.5_1781291330223_0.6861305352065636"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-25T13:20:56.741Z","modified":"2026-06-12T19:08:50.533Z","1.0.0":"2026-05-25T13:20:57.195Z","1.0.1":"2026-05-25T15:47:14.371Z","1.0.2":"2026-05-25T19:30:16.344Z","1.0.4":"2026-06-12T16:24:07.402Z","1.0.5":"2026-06-12T19:08:50.388Z"},"author":{"name":"Azakaw"},"license":"ISC","keywords":[],"description":"Azakaw web sdk includes the web components required for customer liveness.","maintainers":[{"name":"azakaw","email":"cristiano@azakaw.com"},{"name":"tareqazakaw","email":"tareq@azakaw.com"},{"name":"maaz-siddiqui-azakaw","email":"maaz.siddiqui@azakaw.com"}],"readme":"# azakaw-liveness-sdk\r\n\r\nWeb Component that wraps the azakaw-liveness SDK. Ships a custom element\r\n`` registered globally on import.\r\n\r\n# Table of contents\r\n\r\n- [Overview](#overview)\r\n- [Installation](#installation)\r\n- [Usage](#usage)\r\n- [API](#api)\r\n\r\n## Overview\r\n\r\nThe Azakaw web SDK allows you to add customer liveness in your web application using web components. It provides you with a custom element that encapsulates the functionality of the customer liveness.\r\n\r\n\r\n## Installation \r\n\r\n```bash\r\nnpm install @azakawcompliance/azakaw-liveness-sdk\r\n\r\n```\r\n\r\n### Important Note\r\n\r\nThe web components are registered on the web page itself, so it is necessary that the library is imported on your website before using it in your code.\r\n\r\n\r\n## Usage\r\n\r\n```ts\r\nimport '@azakawcompliance/azakaw-liveness-sdk';\r\n```\r\nIn the HTML file you can then use the customer `` element, for example:\r\n\r\n```html\r\n\r\n```\r\n\r\nThe import side-effect registers `` and augments\r\n`HTMLElementTagNameMap` / `HTMLElementEventMap` so Angular template refs\r\ntype-check correctly:\r\n\r\n### Option A — Angular CLI consumer (recommended)\r\n\r\n```\r\n@Component({\r\n selector: 'app-component',\r\n schemas: [CUSTOM_ELEMENTS_SCHEMA],\r\n templateUrl: './component.html',\r\n})\r\nexport class AppComponent implements AfterViewInit, OnDestroy {\r\n @ViewChild('liveness')\r\n liveness!: ElementRef;\r\n\r\n ngAfterViewInit() {\r\n this.liveness.nativeElement.settings = {\r\n livenessType: 0,\r\n customization: {\r\n onboardingScreenStartButtonBackground: '#c45656',\r\n },\r\n };\r\n\r\n this.liveness.nativeElement?.addEventListener(\r\n 'success',\r\n (res)=> {\r\n console.log('success', res);\r\n }\r\n );\r\n }\r\n\r\n ngOnDestroy(): void {\r\n this.liveness?.nativeElement?.removeEventListener(\r\n 'success', () => {}\r\n );\r\n }\r\n}\r\n```\r\n\r\n## API\r\n\r\n### Inputs\r\n\r\n| Input | Type | Default | Required | Description |\r\n|-------------|-------------------------------------------------|--------------|----------|--------------------------------------------------------------------------------------------------------------------|\r\n| session-id | `string` | `null` | yes | A short-lived session identifier minted by your backend. The SDK validates it server-side before starting capture. |\r\n| host-origin | `string` | `null` | optional | The URL on which your web application is hosted. |\r\n| environment | `LivenessEnvironment` (`Sandbox \\| Production`) | `Production` | optional | Target environment for the liveness session. |\r\n| region | `LivenessRegion` (`KSA \\| Qatar \\| UAE`) | `UAE` | optional | Region in which the liveness session is processed. |\r\n\r\n### Events\r\n\r\n| Event Name | Returns | Description |\r\n|------------|---------|--------------------------------------|\r\n| livenessChangeAction | `AzakawLivenessEvent` | Fired liveness [Actions](#Actions) |\r\n| success | `AzakawLivenessResult` | Fired when user success the liveness |\r\n| failed | `AzakawLivenessResult` | Fired when user error the liveness |\r\n\r\n### AzakawLivenessResult\r\n\r\nThe payload returned by the `success` and `failed` events. On a failed check, `image` and `estimatedAge` are `null`.\r\n\r\n| Properties | Type | Description |\r\n|---------------|-----------------------------------|-----------------------------------------------------------------------------|\r\n| status | `confirmed \\| not_confirmed \\| unknown` | Outcome of the liveness check. |\r\n| sessionId | `string` | The session identifier associated with the liveness check. |\r\n| transactionId | `string` | The unique transaction identifier for this liveness attempt. |\r\n| estimatedAge | `string \\| null` | The estimated age of the user. `null` when the liveness check fails. |\r\n| image | `string \\| null` | The captured selfie image (base64). `null` when the liveness check fails. |\r\n\r\n\r\n\r\n\r\n### Actions\r\n\r\n| Event Name | Description |\r\n|------------|---------------------------------------|\r\n| ELEMENT_VISIBLE | The component is appended in the DOM. |\r\n| PRESS_START_BUTTON | The \"Get started\" button is pressed. |\r\n| PRESS_RETRY_BUTTON |The \"Retry\" button is pressed. |\r\n| CLOSE | The \"Close\" button is pressed. |\r\n| PROCESS_FINISHED | The component has finished its work. |\r\n| SERVICE_INITIALIZED | The component has started its work.|\r\n| RETRY_COUNTER_EXCEEDED | The component has finished its work due to the exceeded number of transaction attempts. |\r\n\r\n### Translation\r\nThe list of labels used in the component:\r\n\r\n| Label | Default message in `en` locale |\r\n|-------------------------------|------------------------------------------------------------------------------------------------------------------------------|\r\n| **showOnlyOneFace** | Make sure there is only one face on the screen. |\r\n| **preparingCamera** | Preparing the camera... |\r\n| **allowAccessCamera** | Allow access to the camera |\r\n| **somethingWentWrong** | Something went wrong |\r\n| **incorrectCameraId** | No camera with the specified ID found. |\r\n| **checkCameraId** | Check if the specified camera ID is correct. |\r\n| **preparingService** | Preparing the service... |\r\n| **allowAccessToCamera** | Allow access to the camera and reload this page to continue. |\r\n| **error** | Error! |\r\n| **versionNotSupported** | Your browser version is not supported. |\r\n| **updateBrowser** | Update your browser version |\r\n| **licenseError** | A license error has occurred |\r\n| **licenseExpired** | The license cannot be found or has expired |\r\n| **onlyPortraitOrientation** | Portrait orientation only |\r\n| **turnDeviceIntoPortrait** | Please turn your device into portrait mode |\r\n| **tryAgain** | Try again |\r\n| **noCameraAvailable** | No camera available |\r\n| **checkCameraConnection** | Check the camera connection and try again. |\r\n| **lookStraight** | Look straight |\r\n| **fitYourFace** | Center your face |\r\n| **moveCloser** | Move closer |\r\n| **moveAway** | Move away |\r\n| **holdSteady** | Hold steady |\r\n| **takeAPhoto** | Take a selfie |\r\n| **processing** | Processing... |\r\n| **retryButtonText** | Retry |\r\n| **followGuidelinesText** | But please follow these guidelines: |\r\n| **letsTryAgainTitle** | Let's try that again |\r\n| **noCameraPermission** | Camera unavailable! |\r\n| **goButton** | Go |\r\n| **selfieTime** | Selfie time! |\r\n| **ambientLighting** | Ambient lighting is not too bright or too dark and there are no shadows or glare on your face |\r\n| **noMaskSunglassesHeaddress** | Neutral facial expression (no smiling, eyes open and mouth closed), no mask, sunglasses or headwear |\r\n| **turnHead** | Turn your head a bit |\r\n| **centerFaceTurnHead** | Center your face, turn your head |\r\n| **centerFace** | Center your face |\r\n| **errorCode** | Error code: |\r\n| **illumination** | Good illumination. |\r\n| **cameraLevel** | Camera at eye level. |\r\n| **noAccessories** | No accessories: glasses, mask, hat, etc. |\r\n| **getReady** | Get ready |\r\n| **removeOcclusion** | Remove items covering your face |\r\n| **tooMuchTurn** | Avoid turning your head too much. A small turn is enough. |\r\n| **turnHeadUp** | Turn head up a bit to look straight |\r\n| **turnHeadDown** | Turn head down a bit to look straight |\r\n| **turnHeadLeft** | Turn head left a bit to look straight |\r\n| **turnHeadRight** | Turn head right a bit to look straight |\r\n| **configurationErrorTitle** | Configuration error |\r\n| **configurationErrorMessage** | Please provide a session-id on the element. |\r\n| **sessionExpiredTitle** | Session expired |\r\n| **sessionExpiredMessage** | The authenticated session is no longer valid. |\r\n| **connectionErrorTitle** | Connection error |\r\n| **connectionErrorMessage** | We could not reach the Azakaw service. Please check your connection and try again. |\r\n| **initializingSession** | Initializing secure session… |\r\n| **retryAction** | Retry |\r\n| **startNewSessionAction** | Start a new session |\r\n\r\n### Settings\r\n\r\nHere are all the available settings:\r\n\r\n| Setting | Info | Data type | Default value | Values | Used in |\r\n|:--------------------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:---------:|:--------------------------------------:|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|---------------------------------|\r\n| `locale` | Language of the component. The value is determined based on the following priority:

1. `locale` component attribute takes the highest priority if explicitly set.
2. If `locale` is not set, the system checks the `html.lang` attribute.
3. If no `html.lang` attribute is available, the system attempts to determine the language from `window.navigator`.
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`, `uz` | `azakaw-liveness`, `face-capture` |\r\n| `cameraId` | Ability to select a camera by defining the camera ID. | `string` | `undefined` | `camera id string value` | `azakaw-liveness`, `face-capture` |\r\n| `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` | `azakaw-liveness`, `face-capture` |\r\n| `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` | `azakaw-liveness`, `face-capture` |\r\n| `finishScreen` | Whether to show the Result screen (`success screen`, `retry-screen`). If `true`, the Result screen is shown to the user. If `false`, no Result screen is displayed, and, during a single session, **the user has only one attempt to pass the liveness assessment**.

In cases where `finishScreen` is set to `false`, we recommend to monitor [Events](#events) associated with the liveness assessment and then display relevant information to the user based on those events. This approach ensures that the user receives necessary feedback even though the Result screen is not displayed by the component itself. | `boolean` | `true` | `true`, `false` | `azakaw-liveness`, `face-capture` |\r\n| `closeDisabled` | Whether to disable the \"Close\" button of the component. If set to `true`, the \"Close\" button is hidden from the user. | `boolean` | `false` | `true`, `false` | `azakaw-liveness`, `face-capture` |\r\n| `recordingProcess` | Whether to enable a video recording of the process. If set to `0`, the video is sent to the server with an additional request. If set to `1`, the video is sent to the server with the liveness package. If set to `2`, the video isn't sent. The video format depends on the browser: MP4 for Safari, WEB for other browsers. | `number` | `0` | `0`, `1`, `2` | `azakaw-liveness` |\r\n| `tag` | The server generates a unique identifier for each session before starting a verification process. Using `tag`, you can set a custom value. Make sure that `tag` is unique for each session. | `string` | `undefined` | any unique for each session | `azakaw-liveness` |\r\n| `retryCount` | Using the `retryCount` setter, you can set the number of liveness transaction attempts for the user. Once the attempts are exhausted, the component will display a white screen and throw the \"RETRY_COUNTER_EXCEEDED\" event. By default, the number of attempts is unlimited. Setting the value to **0** removes the limit on the number of attempts, while any positive number limits the attempts. | `number` | `undefined` | number of the attempts count | `azakaw-liveness` |\r\n| `headers` | Before starting the camera capture, the component sends a `start` request to the server and receives the initialization data in response. Once the component successfully completes two stages of verification, it sends the received data to the API for processing. You can use the `headers` setter to set the headers for the HTTP POST method. Additionally, the video recording is transmitted to the server along with these `headers`. | `object` | `undefined` | object with headers (key, value). | `azakaw-liveness` |\r\n| `customization` | You can customize the element's color, font, and image by using this object. See the [Customization](#customization) section below. | `object` | `undefined` | object with customization settings | `azakaw-liveness`, `face-capture` |\r\n| `nonce` | You can set a unique nonce value to maintain the CSP policy. | `string` | `undefined` | unique nonce value | `azakaw-liveness`, `face-capture` |\r\n| `rotationAngle` | Desktop only. By using the `rotationAngle` setter, you can specify an angle to compensate for the rotation of your physical camera. When set to values of `90` and `-90`, the component's design will switch to a mobile (vertical) orientation. | `number` | `undefined` | `0`,`180`,`90`,`-90` | `azakaw-liveness`, `face-capture` |\r\n| `holdStillDuration` | For the Capture screen, sets the duration that the user needs to stand straight and look in the camera. | `number` | `undefined` | seconds | `face-capture` |\r\n| `timeoutInterval` | Timeout for the Capture screen. | `number` | `undefined` | seconds | `face-capture` |\r\n| `livenessType` | You can choose a scenario for the liveness assessment. `0` - active liveness, full process that requires head rotation; `1` - passive liveness, a person is asked to only take a selfie, no head rotation required. | `number` | `0` | `0`, `1` | `azakaw-liveness` |\r\n| `detectOcclusion` | Whether to disable the face occlusion hint. | `boolean` | `true` | `true`, `false` | `face-capture` |\r\n| `tenant` | A label used to group transactions by specific customers, applications, or other criteria. | `string` | `undefined` | tenant | `azakaw-liveness` |\r\n| `env` | A label used to differentiate transactions by development stages. | `string` | `undefined` | env | `azakaw-liveness` |\r\n| `captureButton` | Whether to enable user-triggered capture. Shows the **Capture** button, desktop layout height increases accordingly. When enabled, the shot is taken only on user action. | `boolean` | `false` | `true`, `false` | `azakaw-liveness`, `face-capture` |\r\n\r\n\r\n### Customization\r\n\r\nYou can customize the color of some elements, fonts, and images with the help of the `customization` field in the `settings` object. The customization settings are the following:\r\n\r\n| Setting | Info | Migrate from | Data type | Default value |\r\n|:---------------------------------------------|:------------------------------------------------------------------------------|-------------------------|:-------------------------------:|:-----------------------:|\r\n| `fontFamily` | Font. | `--font-family` | string | `Noto Sans, sans-serif` |\r\n| `fontSize` | Base font size. | `--font-size` | string | `16px` |\r\n| `onboardingScreenStartButtonBackground` | Instruction screen button background color. | `--main-color` | string | `#7E57C5` |\r\n| `onboardingScreenStartButtonBackgroundHover` | Instruction screen button background hover color. | `--hover-color` | string | `#7C45B4` |\r\n| `onboardingScreenStartButtonTitle` | Instruction screen button text color. | | string | `#FFFFFF` |\r\n| `onboardingScreenStartButtonTitleHover` | Instruction screen button text hover color. | | string | `#FFFFFF` |\r\n| `onboardingScreenIllumination` | Instruction screen \"Illumination\" icon image. | | base64 or url or imported image | `` |\r\n| `onboardingScreenAccessories` | Instruction screen \"No accessories\" icon image. | | base64 or url or imported image | `` |\r\n| `onboardingScreenCameraLevel` | Instruction screen \"Camera level\" icon image. | | base64 or url or imported image | `` |\r\n| `cameraScreenFrontHintLabelBackground` | Сamera screen plate with info message background color. | `--plate-color` | string | `#E8E8E8` |\r\n| `cameraScreenFrontHintLabelText` | Сamera screen plate with info message text color. | | string | `#000000` |\r\n| `cameraScreenSectorActive` | User progress sector color (available only in the azakaw-liveness component). | | string | `#7E57C5` |\r\n| `cameraScreenSectorTarget` | Target sector color (available only in the azakaw-liveness component). | `--target-sector-color` | string | `#BEABE2` |\r\n| `cameraScreenStrokeNormal` | Stroke color of the camera circle. | | string | `#7E57C5` |\r\n| `cameraScreenStrokeWidth` | Stroke width of the camera circle. | | number | 3 |\r\n| `processingScreenProgress` | Processing screen spinner color. | | string | `#7E57C5` |\r\n| `retryScreenEnvironmentImage` | Retry screen environment image. | | base64 or url or imported image | `` |\r\n| `retryScreenPersonImage` | Retry screen person image. | | base64 or url or imported image | `` |\r\n| `retryScreenRetryButtonBackground` | Retry screen button background color. | `--main-color` | string | `#7E57C5` |\r\n| `retryScreenRetryButtonBackgroundHover` | Retry screen button background hover color. | `--hover-color` | string | `#7C45B4` |\r\n| `retryScreenRetryButtonTitle` | Retry screen button text color. | | string | `#FFFFFF` |\r\n| `retryScreenRetryButtonTitleHover` | Retry screen button text hover color. | | string | `#FFFFFF` |\r\n| `successScreenImage` | Success screen image. | | base64 or url or imported image | `` |\r\n\r\n\r\n\r\n\r\n## Settings\r\nAn example of using all the settings:\r\n\r\n````javascript\r\nconst component = document.getElementsByTagName('azakaw-liveness')[0];\r\n\r\ncomponent.settings = {\r\n locale: 'en',\r\n cameraId: '123',\r\n changeCamera: true,\r\n startScreen: true,\r\n closeDisabled: true,\r\n finishScreen: true,\r\n tag: 'sessionIdValue',\r\n tenant: 'ABCDEF',\r\n env: 'Production',\r\n retryCount: 5,\r\n recordingProcess: 1,\r\n captureButton: false,\r\n customization: {\r\n fontFamily: 'Noto Sans, sans-serif',\r\n fontSize: '16px',\r\n onboardingScreenStartButtonBackground: '#7E57C5',\r\n onboardingScreenStartButtonBackgroundHover: '#7c45b4',\r\n onboardingScreenStartButtonTitle: '#FFFFFF',\r\n onboardingScreenStartButtonTitleHover: '#FFFFFF',\r\n cameraScreenFrontHintLabelBackground: '#E8E8E8',\r\n onboardingScreenIllumination: 'https://path-to-image.com',\r\n onboardingScreenAccessories: 'data:image/svg+xml;base64,PHN2...',\r\n onboardingScreenCameraLevel: importedImage,\r\n cameraScreenFrontHintLabelText: '#000000',\r\n cameraScreenSectorActive: '#7E57C5',\r\n cameraScreenSectorTarget: '#BEABE2',\r\n cameraScreenStrokeNormal: '#7E57C5',\r\n cameraScreenStrokeWidth: 3,\r\n processingScreenProgress: '#7E57C5',\r\n retryScreenRetryButtonBackground: '#7E57C5',\r\n retryScreenRetryButtonBackgroundHover: '#7c45b4',\r\n retryScreenRetryButtonTitle: '#FFFFFF',\r\n retryScreenRetryButtonTitleHover: '#FFFFFF',\r\n retryScreenEnvironmentImage: 'https://path-to-image.com',\r\n retryScreenPersonImage: 'data:image/svg+xml;base64,PHN2...',\r\n successScreenImage: importedImage,\r\n }\r\n}\r\n\r\n````\r\n\r\nAn example of using just the selected settings:\r\n\r\n````javascript\r\nconst yourSettings = {\r\n customization: {\r\n fontFamily: 'Noto Sans, sans-serif',\r\n fontSize: '18px',\r\n }\r\n}\r\n\r\nconst component = document.getElementsByTagName('azakaw-liveness')[0];\r\n\r\ncomponent.settings = yourSettings;\r\n\r\n````\r\n","readmeFilename":"README.md"}