sonic-widget 2.4.8 → 2.5.1

package/README.md

@@ -1,312 +1,312 @@
-<center> 
-
-<h1> SONIC WIDGET </h1>
-
-[![version](https://img.shields.io/npm/v/sonic-widget?style=flat)](https://www.npmjs.com/package/sonic-widget)
-[![downloads](https://img.shields.io/npm/dm/sonic-widget?style=flat)](https://www.npmjs.com/package/sonic-widget)
-[![jsdelivr](https://data.jsdelivr.com/v1/package/npm/sonic-widget/badge)](https://www.jsdelivr.com/package/npm/sonic-widget)
-[![NPM](https://img.shields.io/npm/l/sonic-widget)](https://www.jsdelivr.com/package/npm/sonic-widget)
-
-</center>
-
-## Installation:
-
-**Sonic Widget** - _used to show the onboard kyc at your web page itself._
-
-Use this script tag to get access to the widget:
-
-```html
-<script src="https://cdn.jsdelivr.net/npm/sonic-widget@2.4.8/dist/index.min.js"></script>
-```
-
-or 
-
-in **Angular** can be used by installing package from npm
-
-```shell
-npm install sonic-widget
-```
-
-and adding path in `angular.json`
-
-```json
-"scripts": [ "node_modules/sonic-widget/dist/index.js" ]
-```
-
-
-## Implementation Details for Angular TypeScript:
-
-**Steps:-**
-
-1. Create or open an angular TS project.
-
-2. Use this script tag to get access to the widget at initial html page:
-
-```html
-<script src="https://cdn.jsdelivr.net/npm/sonic-widget@2.4.8/dist/index.min.js"></script>
-```
-
-or 
-
-it can be added in `angular.json` by installing the npm package
-
-```json
-"scripts": [ "node_modules/sonic-widget/dist/index.js" ]
-```
-
-3. At `app.component.html`, Add a button with the id **`xxxx`**. It is used to call the widget by on click event.
-
-```html
-<button id="xxxx">Open</button>
-```
-
-4. Add a div tag with the id **`sonic-web-widget`** at the specific place. It is used to display the sonic module with the help of this id.
-
-```html
-<div id="sonic-web-widget"></div>
-```
-
-5. Add a declaration for var *sonic* at TS file `app.component.ts`.
-
-```ts
-declare var sonic: any;
-```
-
-6. Next, add the functionality to call widget in the base of onInit.
-
-```ts
-ngOnInit(): void {
-	
-	const config = {
-		baseurl: string, // the base url of the backend server
-		docModelUrl: string, // the doc model url of the document recognition process 
-		maskModelUrl: string, // the mask model url of the mask detect process
-		showPage: boolean, // used to show the page or not
-		ipInfoKey: string, // api key to detect vpn used or not from "ipInfo.io" (Optional)
-		videoURL: string, // url of video to do (e.g: demo doing kyc) (Optional)
-		appId: string, // application policy identifier
-		accountId: string, // account can be taken from operator axiom account
-		appName: string, // representing name of the application (Optional)
-		userName: string, // user prospective data
-		userId: string, // user document number to identity
-		email: string, // user prospective data
-		phone: string, // user prospective data
-		applicationNo: string, // user prospective data
-		isMalay: boolean, //used to change the default language english to malay
-		branchId: string, //used to identify the bank branch
-		sendLogsEmail: boolean, //used to send logs through email
-		blinkThreshold: number, // used for blink threshold
-		objectPersonThreshold: number, // used for object Person score threshold
-		objectPhoneThreshold: number, // used for object Phone score threshold
-		onMessage: function (data) {}, // callback function, when api response message or error or any other actions
-	};
-
-	// get the element used in the action button 
-	var container = document.getElementById('xxxx');
-	// on click of element widget works
-	container?.addEventListener('click', function () {
-		sonic?.SonicWidget(config);
-	});
-}
-```
-
-7. Add service worker for widget to protect the multiple calls for tensorflow. So, it will have cache to reuse it. Here, I'm adding `service-worker.js` file at `src/assets` folder. So, below steps will be based on this file path.
-
-```javascript
-const CACHE_NAME = 'demo-app-ai-tensorflow-models-cache-v1';
-const urlsToCache = [
-    // coco ssd - tensorflow model
-    // document model - teachable machine drive link or folder path 
-    // mask model - teachable machine drive link or folder path 
-    // face landmark model - mediapipe tasks-vision
-    // hand landmark model - mediapipe tasks-vision
-    // Add more model files if necessary
-  ]
-
-self.addEventListener('install', function(event) {
-  // Perform install steps
-  event.waitUntil(
-    caches.open(CACHE_NAME)
-      .then(function(cache) {
-        return cache.addAll(urlsToCache);
-      })
-  );
-});
-
-self.addEventListener('fetch', function(event) {
-    const request = event.request;
-  
-    // Skip caching for requests from browser extensions
-    if (request.url.startsWith('chrome-extension://')) {
-      return;
-    }
-  
-    event.respondWith(
-      caches.match(request)
-        .then(function(response) {
-          // Cache hit - return response
-          if (response) {
-            return response;
-          }
-  
-          // Clone the request
-          const fetchRequest = request.clone();
-  
-          return fetch(fetchRequest).then(
-            function(response) {
-              // Check if we received a valid response
-              if(!response || response.status !== 200 || response.type !== 'basic') {
-                return response;
-              }
-  
-              // Clone the response
-              const responseToCache = response.clone();
-              // Save the response for future matching
-              caches.open(CACHE_NAME)
-                .then(function(cache) {
-                  cache.put(request, responseToCache);
-                });
-  
-              return response;
-            }
-          );
-        })
-    );
-});
-```
-8. Use this script tag to get access to the service worker at initial html page:
-
-```html
-<script src="src/assets/service-worker.js"></script>
-```
-
-or 
-
-it can be added in `angular.json` by installing the npm package
-
-```json
-"scripts": [ ..., "src/assets/service-worker.js" ]
-```
-
-9. Register the service worker at your required place:
-```ts
-	ngAfterViewInit(): void {
-		if ('serviceWorker' in navigator) {
-			window.addEventListener('load', () => {
-				navigator.serviceWorker.register('/demo-app/assets/service-worker.js').then(
-					(registration) => {
-						console.log(
-							'ServiceWorker registered with scope: ',
-							registration.scope
-						);
-					},
-					(err) => {
-						console.error('ServiceWorker registration failed: ', err);
-					}
-				);
-			});
-		}
-	}
-```
-
-&nbsp;
-
-## Implementation Details for Vanilla JavaScript:
-
-**Steps:-**
-
-1. Create or open an html file.
-
-2. Add a button with the id **`xxxx`**. It is used to call the widget by on click event.
-
-```html
-<button id="xxxx">Open</button>
-```
-
-3. Add a div tag with the id **`sonic-web-widget`** at the last or beginning of the body tag. It is used to display the sonic module with the help of this id.
-
-```html
-<div id="sonic-web-widget"></div>
-```
-
-4. Add a Script tag to the head tag or body tag. And use the latest version.
-
-```html
-<script src="https://cdn.jsdelivr.net/npm/sonic-widget@2.4.8/dist/index.min.js"></script>
-```
-
-5. Next, add the script tag at a necessary place. But add below the widget script.
-
-```html
-<script>
-	const config = {
-		baseurl: string, // the base url of the backend server
-		docModelUrl: string, // the doc model url of the document recognition process
-		maskModelUrl: string, // the mask model url of the mask detect process
-		showPage: boolean, // used to show the page or not
-		ipInfoKey: string, // api key to detect vpn used or not from "ipInfo.io" (Optional)
-		videoURL: string, // url of video to do (e.g: demo doing kyc) (Optional)
-		appId: string, // application policy identifier
-		appName: string, // representing name of the application (Optional)
-		accountId: string, // account can be taken from operator axiom account
-		userName: string, // user prospective data
-		userId: string, // user document number to identity
-		email: string, // user prospective data
-		phone: string, // user prospective data
-		applicationNo: string, // user prospective data
-		isMalay: boolean, //used to change the default language english to malay
-		branchId: string, // branch id to identify the branch of the bank
-		sendLogsEmail: boolean, //used to send logs through email
-		blinkThreshold: number, // threshold used to calculate the user blinked or not, with range limit 0-1(default value is 0.35)
-		objectPersonThreshold: number, // used for object Person score threshold with range limit 0-1(default value is 0.35)
-		objectPhoneThreshold: number, // used for object Phone score threshold with range limit 0-1(default value is 0.35)
-		onMessage: function (data) {}, // callback function, when api response message or error or any other actions
-	};
-	// get the element used in the action button 
-	var container = document.getElementById('xxxx');
-	// on click of element widget works
-	container.addEventListener('click', function () {
-		sonic.SonicWidget(config);
-	});
-</script>
-```
-
-_Here, the config variable is used to pass the data. And the container variable is to get the dom element of the id **`xxxx`** button and add it to the event listener. It checks if the button is clicked and sends the config object data to the **`sonic`** module.
-**`sonic.SonicWidget(config)`**_
-
-_You can get the logs with **`onMessage`** for all actions and stages.
-Check with **`data.code`**_
-
-```
-0 - info message from application 
-1 - success api call
--1 - failed api call
--2 - error message from application 
--3 - configuration error message 
-2 - on close application
-```
-
-**Note:-**
-
-<!-- - _**`serviceWorkerPath`** should pass as a string value. It is used as the service worker path and its default path is **`/demo-app/assets/service-worker.js`** and Cache name should be different to fix conflict._ -->
-- _**`baseurl`** should pass as a string value. It is used as the base URL for API calls._
-- _**`docModelUrl`** should pass as a string value. It is used as the base URL for document model._
-- _**`maskModelUrl`** should pass as a string value. It is used as the base URL for mask model._
-- _**`showPage`** is used to pass a boolean value ( **`true`** or **`false`** ). To toggle the widget page open or close._
-- _**`ipInfoKey`** should pass as a string value. It is used to detect whether vpn is used or not from "ipInfo.io" with this api key and it is optional._
-- _**`videoURL`** should pass as a string value as url. It is used to show the video onboard sonic kyc and it is optional._
-- _**`accountId`** should pass as a string value. It is used to get the JWT token and proceed with the operator account._
-- _**`isMalay`** is used to pass a boolean value ( **`true`** or **`false`** ). To toggle the widget default language english or malay._
-- _**`branchId`** should pass as a string value. It is used to find bank branch available for operator account for onboard sonic kyc._
-- _**`appId`** should pass as a string value. It is used to find an application policy for onboard sonic kyc._
-- _**`appName`** should pass as a string value. It is used for onboard kyc application name. it is optional and default **`Sonic`** ._
-- _**`userName`** should pass as a string value. It is used to create an application for onboard sonic kyc._
-- _**`userId`** should pass as a string value. It is used to create an application for onboard sonic kyc and to compare your identity with the document._
-- _**`email`** should pass as a string value. It is used to create an application for onboard sonic kyc._
-- _**`phone`** should pass as a string value. It is used to create an application for onboard sonic kyc._
-- _**`applicationNo`** should pass as a string value. It is used to create an application for onboard sonic kyc._
-- _**`sendLogsEmail`** is used to pass a boolean value. It is used to send logs to client email address._
-- _**`blinkThreshold`** is used to pass a numerical value. It is used to check the user blinks (range 0-1 and default 0.5)._
-- _**`objectPersonThreshold`** is used to pass a numerical value. It is used to check the image person as object found with required score as threshold (range 0-1 and default 0.925)._
-- _**`objectPhoneThreshold`** is used to pass a numerical value. It is used to check the image phone/laptop as object found with required score as threshold (range 0-1 and default 0.5)._
-- _**`onMessage`** is a callback function. It is getting called when the API gives a message or at any configuration error. Return data is an object with its API endpoint and result._
+<center> 
+
+<h1> SONIC WIDGET </h1>
+
+[![version](https://img.shields.io/npm/v/sonic-widget?style=flat)](https://www.npmjs.com/package/sonic-widget)
+[![downloads](https://img.shields.io/npm/dm/sonic-widget?style=flat)](https://www.npmjs.com/package/sonic-widget)
+[![jsdelivr](https://data.jsdelivr.com/v1/package/npm/sonic-widget/badge)](https://www.jsdelivr.com/package/npm/sonic-widget)
+[![NPM](https://img.shields.io/npm/l/sonic-widget)](https://www.jsdelivr.com/package/npm/sonic-widget)
+
+</center>
+
+## Installation:
+
+**Sonic Widget** - _used to show the onboard kyc at your web page itself._
+
+Use this script tag to get access to the widget:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/sonic-widget@2.5.1/dist/index.min.js"></script>
+```
+
+or 
+
+in **Angular** can be used by installing package from npm
+
+```shell
+npm install sonic-widget
+```
+
+and adding path in `angular.json`
+
+```json
+"scripts": [ "node_modules/sonic-widget/dist/index.js" ]
+```
+
+
+## Implementation Details for Angular TypeScript:
+
+**Steps:-**
+
+1. Create or open an angular TS project.
+
+2. Use this script tag to get access to the widget at initial html page:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/sonic-widget@2.5.1/dist/index.min.js"></script>
+```
+
+or 
+
+it can be added in `angular.json` by installing the npm package
+
+```json
+"scripts": [ "node_modules/sonic-widget/dist/index.js" ]
+```
+
+3. At `app.component.html`, Add a button with the id **`xxxx`**. It is used to call the widget by on click event.
+
+```html
+<button id="xxxx">Open</button>
+```
+
+4. Add a div tag with the id **`sonic-web-widget`** at the specific place. It is used to display the sonic module with the help of this id.
+
+```html
+<div id="sonic-web-widget"></div>
+```
+
+5. Add a declaration for var *sonic* at TS file `app.component.ts`.
+
+```ts
+declare var sonic: any;
+```
+
+6. Next, add the functionality to call widget in the base of onInit.
+
+```ts
+ngOnInit(): void {
+	
+	const config = {
+		baseurl: string, // the base url of the backend server
+		docModelUrl: string, // the doc model url of the document recognition process 
+		maskModelUrl: string, // the mask model url of the mask detect process
+		showPage: boolean, // used to show the page or not
+		speedCheckURL: string, // public URL of the internet speed check
+		videoURL: string, // url of video to do (e.g: demo doing kyc) (Optional)
+		appId: string, // application policy identifier
+		accountId: string, // account can be taken from operator axiom account
+		appName: string, // representing name of the application (Optional)
+		userName: string, // user prospective data
+		userId: string, // user document number to identity
+		email: string, // user prospective data
+		phone: string, // user prospective data
+		applicationNo: string, // user prospective data
+		isMalay: boolean, //used to change the default language english to malay
+		branchId: string, //used to identify the bank branch
+		sendLogsEmail: boolean, //used to send logs through email
+		blinkThreshold: number, // used for blink threshold
+		objectPersonThreshold: number, // used for object Person score threshold
+		objectPhoneThreshold: number, // used for object Phone score threshold
+		onMessage: function (data) {}, // callback function, when api response message or error or any other actions
+	};
+
+	// get the element used in the action button 
+	var container = document.getElementById('xxxx');
+	// on click of element widget works
+	container?.addEventListener('click', function () {
+		sonic?.SonicWidget(config);
+	});
+}
+```
+
+7. Add service worker for widget to protect the multiple calls for tensorflow. So, it will have cache to reuse it. Here, I'm adding `service-worker.js` file at `src/assets` folder. So, below steps will be based on this file path.
+
+```javascript
+const CACHE_NAME = 'demo-app-ai-tensorflow-models-cache-v1';
+const urlsToCache = [
+    // coco ssd - tensorflow model
+    // document model - teachable machine drive link or folder path 
+    // mask model - teachable machine drive link or folder path 
+    // face landmark model - mediapipe tasks-vision
+    // hand landmark model - mediapipe tasks-vision
+    // Add more model files if necessary
+  ]
+
+self.addEventListener('install', function(event) {
+  // Perform install steps
+  event.waitUntil(
+    caches.open(CACHE_NAME)
+      .then(function(cache) {
+        return cache.addAll(urlsToCache);
+      })
+  );
+});
+
+self.addEventListener('fetch', function(event) {
+    const request = event.request;
+  
+    // Skip caching for requests from browser extensions
+    if (request.url.startsWith('chrome-extension://')) {
+      return;
+    }
+  
+    event.respondWith(
+      caches.match(request)
+        .then(function(response) {
+          // Cache hit - return response
+          if (response) {
+            return response;
+          }
+  
+          // Clone the request
+          const fetchRequest = request.clone();
+  
+          return fetch(fetchRequest).then(
+            function(response) {
+              // Check if we received a valid response
+              if(!response || response.status !== 200 || response.type !== 'basic') {
+                return response;
+              }
+  
+              // Clone the response
+              const responseToCache = response.clone();
+              // Save the response for future matching
+              caches.open(CACHE_NAME)
+                .then(function(cache) {
+                  cache.put(request, responseToCache);
+                });
+  
+              return response;
+            }
+          );
+        })
+    );
+});
+```
+8. Use this script tag to get access to the service worker at initial html page:
+
+```html
+<script src="src/assets/service-worker.js"></script>
+```
+
+or 
+
+it can be added in `angular.json` by installing the npm package
+
+```json
+"scripts": [ ..., "src/assets/service-worker.js" ]
+```
+
+9. Register the service worker at your required place:
+```ts
+	ngAfterViewInit(): void {
+		if ('serviceWorker' in navigator) {
+			window.addEventListener('load', () => {
+				navigator.serviceWorker.register('/demo-app/assets/service-worker.js').then(
+					(registration) => {
+						console.log(
+							'ServiceWorker registered with scope: ',
+							registration.scope
+						);
+					},
+					(err) => {
+						console.error('ServiceWorker registration failed: ', err);
+					}
+				);
+			});
+		}
+	}
+```
+
+&nbsp;
+
+## Implementation Details for Vanilla JavaScript:
+
+**Steps:-**
+
+1. Create or open an html file.
+
+2. Add a button with the id **`xxxx`**. It is used to call the widget by on click event.
+
+```html
+<button id="xxxx">Open</button>
+```
+
+3. Add a div tag with the id **`sonic-web-widget`** at the last or beginning of the body tag. It is used to display the sonic module with the help of this id.
+
+```html
+<div id="sonic-web-widget"></div>
+```
+
+4. Add a Script tag to the head tag or body tag. And use the latest version.
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/sonic-widget@2.5.1/dist/index.min.js"></script>
+```
+
+5. Next, add the script tag at a necessary place. But add below the widget script.
+
+```html
+<script>
+	const config = {
+		baseurl: string, // the base url of the backend server
+		docModelUrl: string, // the doc model url of the document recognition process
+		maskModelUrl: string, // the mask model url of the mask detect process
+		showPage: boolean, // used to show the page or not
+		speedCheckURL: string, // public URL of the internet speed check
+		videoURL: string, // url of video to do (e.g: demo doing kyc) (Optional)
+		appId: string, // application policy identifier
+		appName: string, // representing name of the application (Optional)
+		accountId: string, // account can be taken from operator axiom account
+		userName: string, // user prospective data
+		userId: string, // user document number to identity
+		email: string, // user prospective data
+		phone: string, // user prospective data
+		applicationNo: string, // user prospective data
+		isMalay: boolean, //used to change the default language english to malay
+		branchId: string, // branch id to identify the branch of the bank
+		sendLogsEmail: boolean, //used to send logs through email
+		blinkThreshold: number, // threshold used to calculate the user blinked or not, with range limit 0-1(default value is 0.35)
+		objectPersonThreshold: number, // used for object Person score threshold with range limit 0-1(default value is 0.35)
+		objectPhoneThreshold: number, // used for object Phone score threshold with range limit 0-1(default value is 0.35)
+		onMessage: function (data) {}, // callback function, when api response message or error or any other actions
+	};
+	// get the element used in the action button 
+	var container = document.getElementById('xxxx');
+	// on click of element widget works
+	container.addEventListener('click', function () {
+		sonic.SonicWidget(config);
+	});
+</script>
+```
+
+_Here, the config variable is used to pass the data. And the container variable is to get the dom element of the id **`xxxx`** button and add it to the event listener. It checks if the button is clicked and sends the config object data to the **`sonic`** module.
+**`sonic.SonicWidget(config)`**_
+
+_You can get the logs with **`onMessage`** for all actions and stages.
+Check with **`data.code`**_
+
+```
+0 - info message from application 
+1 - success api call
+-1 - failed api call
+-2 - error message from application 
+-3 - configuration error message 
+2 - on close application
+```
+
+**Note:-**
+
+<!-- - _**`serviceWorkerPath`** should pass as a string value. It is used as the service worker path and its default path is **`/demo-app/assets/service-worker.js`** and Cache name should be different to fix conflict._ -->
+- _**`baseurl`** should pass as a string value. It is used as the base URL for API calls._
+- _**`docModelUrl`** should pass as a string value. It is used as the base URL for document model._
+- _**`maskModelUrl`** should pass as a string value. It is used as the base URL for mask model._
+- _**`showPage`** is used to pass a boolean value ( **`true`** or **`false`** ). To toggle the widget page open or close._
+- _**`speedCheckURL`** should pass as a string value. It is used to detect internet speed and intimate the user._
+- _**`videoURL`** should pass as a string value as url. It is used to show the video onboard sonic kyc and it is optional._
+- _**`accountId`** should pass as a string value. It is used to get the JWT token and proceed with the operator account._
+- _**`isMalay`** is used to pass a boolean value ( **`true`** or **`false`** ). To toggle the widget default language english or malay._
+- _**`branchId`** should pass as a string value. It is used to find bank branch available for operator account for onboard sonic kyc._
+- _**`appId`** should pass as a string value. It is used to find an application policy for onboard sonic kyc._
+- _**`appName`** should pass as a string value. It is used for onboard kyc application name. it is optional and default **`Sonic`** ._
+- _**`userName`** should pass as a string value. It is used to create an application for onboard sonic kyc._
+- _**`userId`** should pass as a string value. It is used to create an application for onboard sonic kyc and to compare your identity with the document._
+- _**`email`** should pass as a string value. It is used to create an application for onboard sonic kyc._
+- _**`phone`** should pass as a string value. It is used to create an application for onboard sonic kyc._
+- _**`applicationNo`** should pass as a string value. It is used to create an application for onboard sonic kyc._
+- _**`sendLogsEmail`** is used to pass a boolean value. It is used to send logs to client email address._
+- _**`blinkThreshold`** is used to pass a numerical value. It is used to check the user blinks (range 0-1 and default 0.5)._
+- _**`objectPersonThreshold`** is used to pass a numerical value. It is used to check the image person as object found with required score as threshold (range 0-1 and default 0.925)._
+- _**`objectPhoneThreshold`** is used to pass a numerical value. It is used to check the image phone/laptop as object found with required score as threshold (range 0-1 and default 0.5)._
+- _**`onMessage`** is a callback function. It is getting called when the API gives a message or at any configuration error. Return data is an object with its API endpoint and result._