npm package: @identityd/cardauth
Description: yesid card authentication with card detection and ocr
Author: intisar suleiman
Latest version: 1.0.32

# IDT-Camera-Web

Identity-Tech Web component is a javascript library to enable capturing of face and ID Cards. The library supports selfie and portrait capturing, ID Card scanning for OCR, and matching between face captured and face on the ID Card.

The library works with a server side APIs for OCR and face matching.

## Installation
We support installation through NPM and by adding a script tag from our CDN

Install Via NPM
```
npm install @identityd/yesid-sdk
```
In your Ionic / React page or component, import the package this way

```

import '@identityd/yesid-sdk'

....

```

Install via a script tag
```

<script src="https://unpkg.com/@identityd/yesid-sdk@2.0.1/identityd.js" type="module"></script>

```


### Dependencies
This library depend on external libraries for qr-code functionality, backend communication, and peer communication between components.

Dependencies via npm

Dependencies via Javascript

```
npm i @tensorflow/tfjs
npm i @teachablemachine/image
npm i axios
npm i qrious
npm i peerjs

```

```
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.6.0/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@0.8/dist/teachablemachine-image.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
<script src="https://unpkg.com/peerjs@1.3.1/dist/peerjs.min.js"></script>
```

## Usage
Follow the following steps to add components to your page

### Steps

#### 1. Add needed tag to your page

##### For Face:
```
<idt-face-camera-web id="face" options="off" capture="manual" ></idt-face-camera-web>
```

##### For ID Card
```
<idt-card-camera-web id="card" type="card" cardtype="tz" options="off" scan="ocr"  capture="manual"></idt-card-camera-web>


<idt-card-camera-web id="card-back" type="card-back" cardtype="mz" options="off" scan="mrz" capture="manual" read="auto"></idt-card-camera-web>

```

#### Tag Options/Attributes

|Attribute       |Description                    |Options                      |
|----------------|-------------------------------|-----------------------------|
|id              |This id a common attribute to identify the element in your page|Optional|
|options         |This attribute is to allow for camera options to appear. You use options to decide which camera you want to show<br/><strong>Default: </strong>on|on &#124; off|
|mode            |This specifies whether the camera should show when the page loads or should first show the placeholder with a button to start capturing.<br/> normal - shows the placeholder and a button<br/>live - shows the camera on page load<br/><strong>Default: </strong>normal|live &#124; normal|
|capture         |This option allows for automatic capture.<br/><strong>Default: </strong>manual|manual &#124; auto|
|scan            |This tag only works for `idt-card-camera-web` component. This tag specifies which type of card scanning do you want to do. If not set, it will try to scan for all; `ocr, mrz, bardcode, qrcode`<br/><strong>Default: </strong>all|orc &#124; mrz &#124; all|
|type            |This tag only works for `idt-card-camera-web` component. It specifies which side of the card do you want to display<br/><strong>Default: </strong>card |card &#124; card-back|
|read            |This tag only works for `idt-card-camera-web` component. If it is set to `auto`, the component will scan the card automatically after capturing. If it is set to `manual`, a button will show which will need to be clicked to read the card<br/><strong>Default: </strong>manual|auto &#124; manual|
|deviceCamera    |This specifies the page to be used to capture image from external device.|Optional<br/> example. `camere_page.html`|
|liveliness      |This option enables liveliness detection | true &#124; false |
|cardtype        |This attribute defines the id type country.If set to `mz` the card detection feature will detect mozambique id cards. If it set to `tz` the card detectin feature will detect tanzanian id cards | mz &#124; tz




#### 2.  Listen for events in your page / component
```
const  faceCameraWeb = document.querySelector('idt-face-camera-web');
faceCameraWeb.addEventListener('faceImageComputed', (e) => {
	const  data = e.detail;
});
```

```
const  cardCameraWeb = document.querySelector('idt-card-camera-web');
cardCameraWeb.addEventListener('cardImageComputed', (e) => {
	const  data = e.detail;
	// your code to process
});
```

```
const  scanResponse = document.querySelector('idt-card-camera-web');
cardCameraWeb.addEventListener('scanResponse', (e) => {
	const  data = e.detail;
	// your code to process
});
```

`faceImageComputed, cardImageComputed, scanResponse`  are  [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)  returning data — in  `e.response` 


### Steps
In your page you can keep images state by declaring variable, and update the state of these variable on the image captured event callbacks. Then you can run matching as below.

```
function tryMatching() {
	if(faceImage && cardImage){
		matchFaces(cardImage, faceImage, function(data){
			document.getElementById("similarityValue").innerHTML= "<h2>"+data[0].similarity+"</h2>";
		});
	}
}
```

## Notes
This library can be used with most JS frameworks

Please note that the library expects that the application is running on a secured channel (https) 

## Support
This library has been tested on the latest versions of Chrome, Edge, Firefox, and Safari. If any issues are found with some browsers, please notify us.

## Keywords
[WebComponent](https://www.npmjs.com/search?q=keywords:WebComponent) 	&nbsp;&nbsp; [WebRTC](https://www.npmjs.com/search?q=keywords:WebRTC)