## Installation
### `1. Install dependencies :`

**Note: this is a one-way operation. Once you `eject`, you can't go back!**

* ~ For `Windows` run :
                            
npm i skyid-sdk-web-win

                        
* ~ For `Linux/Mac` run : 
                            
npm i skyid-sdk-web-lx

### `2.In your components import the Jquery and the SDK Web :`
       

import $ from 'jquery';

import * as skyid_imp from '../assets/skyid_impl_v1'; //Location of 'skyid_impl_v1.js' file
...


                        
### `3.copy the code bellow inside the useEffect(){...} lifecycle Hook:`

         useEffect(()=>{
        skyid_imp.initViewComponent()
        skyid_imp.skyid_fa_remote_sdk_initialization()
        $( document ).ready(function() {
        $("#skyid_fa_document_container").show(500);
        $( "#skyid_da_smart_ocr_button" ).click(function() {
                skyid_imp.skyid_fa_auth_request_smart_ocr();
                $("#skyid_da_smart_ocr_button").prop('disabled', true);
                $("#skyid_da_smart_ocr_button").html("extraction d'information en cours ...");
        });
    
        $( "#skyid_fa_next" ).click(function() {
            $( "#skyid_fa_start_button" ).show()
          skyid_imp.show_matching_step();
        });
    
        $( "#skyid_fa_start_button" ).click(function() {
                  // start SDK face analysis
                  skyid_imp.start_face_scan() ;
                       $( "#skyid_fa_start_button" ).hide();
                       $( "#msg" ).html("Scanne de visage en cours ....");
         });
    
    });
    
    const fileSelector = document.getElementById('file-upload');
      fileSelector.addEventListener('change', (event) => {
        const myimage = event.target.files[0];
        skyid_imp.readImage(myimage);
      });
    
    // demo call
    skyid_imp.skyid_fa_auth_request_smart_ocr_recover("1671122267893033679")
    },[])

                        
### `4.Copy the HTML code :`
                            
<div class="wrapper">
  <div id="skyid_fa_document_container">
          
    <div id="skyid_document_browser">
        <label For="file-upload" class="custom-file-upload" id="doc_file_label">
             Charger votre document ici
        </label>
        <input id="file-upload" type="file" value="" accept="image/png, image/jpeg"/>
        <button   id="skyid_da_smart_ocr_button" class="button-36" role="button">Extraire les information de document</button>
        <button   id="skyid_fa_next" class="button-36" role="button">Suivant</button>
        <br/><br/>
        <img id="doc_img" src='../assets/no-img-placeholder.png' width="640px" height="480px" alt=""/>
        <p id="extracted_feilds"></p>
    </div>
    <div id="liveness_frame">
        <div id="skyid_liveness" ></div>
        <br/><br/>
        <button   id="skyid_fa_start_button" class="button-36" role="button">Démarrer</button>
        <br/>
        <div id="msg"></div>
        
    </div>
  </div>
  

                        
### `5.Add CSS style:`
                            

     html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    background-color: #f5f5f5;
    display: table;
    }

    footer {
    background-color: black;
    font-size:12px;
    display: table-row;
    padding: 20px;
    height: 0;
    font-family: Arial, Helvetica, sans-serif;
    }

    .column {
    float: left;
    padding: 20px;
    }

    /* Clear floats after the columns */
    .row:after {
    content: "";
    display: table;
    clear: both;
    }
    .button-36 {
    background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%);
    border-radius: 8px;
    border-style: none;
    box-sizing: border-box;
    color: #FFFFFF;
    cursor: pointer;
    flex-shrink: 0;
    font-family: "Inter UI","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
    font-size: 16px;
    font-weight: 500;
    height: 4rem;
    padding: 0 1.6rem;
    text-align: center;
    text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
    transition: all .5s;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    }

    .button-36:hover {
    box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
    transition-duration: .1s;
    }

    @media (min-width: 768px) {
    .button-36 {
     padding: 0 2.6rem;
     }
     }

     input[type="file"] {
    display: none;
    }

     .custom-file-upload {
     border: 1px solid #ccc;
     background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%);
     border-radius: 8px;
     color: #FFFFFF;
    flex-shrink: 0;
    font-family: "Inter UI","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
    }

    .custom-file-upload:hover {
    box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
    transition-duration: .1s;
    }

    #skyid_fa_document_container{
      margin: auto;
    width: 90%;
    text-align: center;
    }
    #skyid_da_smart_ocr_button, #skyid_fa_next,#skyid_fa_document_container,#skyid_fa_start_button{
      display: none;
    }
    #extracted_feilds{
      display:none;
    border: 2px solid #000;
    overflow: scroll;
    }
    #liveness_frame{
    display: none;
    text-align: center;
    }
    #skyid_liveness{
    display: flex;
    justify-content: center;
    }




# test

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Lints and fixes files
```
npm run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
