Update README.md

README.md

+Installation
+1. Install dependencies :
+~ For Windows run :
+                            
+npm i skyid-sdk-web-win
+
+                        
+~ For Linux/Mac run :
+                            
+npm i skyid-sdk-web-lx
+
+                        
+2. You will find the ‘skyid_impl_v1.js’ file in the assets folder:
+structure_of_folder
+3.In your components import the Jquery and the SDK Web :
+                            
+<script>
+import $ from 'jquery';
+import * as skyid_imp from '../assets/skyid_impl_v1'; //Location of 'skyid_impl_v1.js' file
+...
+</script>
+
+                        
+4.copy the code bellow inside the useEffect(){...} lifecycle Hook:
+                            
+  useEffect(()=>{
+        skyid_imp.initViewComponent()
+        // init SDK
+        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")
+    },[])
+
+                        
+5.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>
+  
+
+                        
+6.Add CSS style:
+                            
+<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;
+}
+
+</style>
+
+
+
+
+
+
+
 # Getting Started with Create React App
 
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).