oth83

SKY ID LIVENESS

SKY ID LIVENESS PACKAGE

Table of Contents

• Features
• Browser Support
• Installing
• Example

Features

• Make XMLHttpRequests from the browser
• Make http requests from node.js
• Supports the Promise API
• Intercept request and response
• Transform request and response data
• Cancel requests
• Automatic transforms for JSON data
• 🆕 Automatic data object serialization to multipart/form-data and x-www-form-urlencoded body encodings
• Client side support for protecting against XSRF

Browser Support

Latest ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔	11 ✔

Installing

Using npm:

$ npm link

$ npm link skyid_liveness

$ npm install skyid_liveness

Using bower:

$ bower install skyid_liveness

Using yarn:

$ yarn add skyid_liveness

Using pnpm:

$ pnpm add skyid_liveness

Using jsDelivr CDN:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/skyid_liveness.min.js"></script>

Using unpkg CDN:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/skyid_liveness.min.js"></script>

Example

note: CommonJS usage

In order to gain the TypeScript typings (for intellisense / autocomplete) while using CommonJS imports with require() use the following approach:

const skyid_liveness = require('skyid_liveness').default;

// axios.<method> will now provide autocomplete and parameter typings

Performing a liveness detection

...
import * as skyid from 'skyid_liveness'

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css'],
})
export class ExampleComponent implements OnInit {
  constructor() { }

  async ngOnInit() {
     
    // const module=await import('assets/static/skyid_main_file_.js')
    // const module=await require('https://api.skyidentification.com:4443/idc_skyid_dist/latest/skyid_fa_sdk-min.js')
    // const cdn = 'https://api.skyidentification.com:4443/idc_skyid_dist/latest/skyid_fa_sdk-min.js';
    // const cdn ="script";

    //     import("/"+cdn+".js").then(module => {

    //       return module.default

    //   }).then(module => {
    //       console.log(module);

    //   }).catch(err => {

    //     console.log(err);

    //   });
    function process_spoof_timeOut() {
      console.log("the face is SPOOF");

      $("#skyid_fa_start_button").html("Redemarrer");
      $("#skyid_fa_start_button").show();
      $("#msg").html("operation non reussie");
    }
    function api_check_callback(my_frame: any, api_result: any) {
      console.log('client respond');
      console.log(api_result);

      $('#skyid_fa_start_button').html('Redemarrer');
      $('#skyid_fa_start_button').show();
      $('#msg').html(
        'Result :' + api_result['class'] + ' score ' + api_result['score']
      );
    }

    const skyid_fa_sdk_token = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
    const skyid_fa_sdk_appId = 'xxxxxxxxxxxx';
    // console.log($('#skyid_fa_start_button'));

    // $( document ).ready(function() {

    skyid.skyid_fa_setup_sdk(skyid_fa_sdk_token, skyid_fa_sdk_appId);

    $('#skyid_fa_start_button').click(function () {
        skyid.skyid_fa_start_face_scan(api_check_callback, process_spoof_timeOut);
      $('#skyid_fa_start_button').hide();
      $('#msg').html('Processing ....');
    });





  }
}

    <div id="skyid_fa_scanning_fragement" style="position: relative;" align="center"> 
      <div id="skyid_fa_container" align="center" style="height:255px;width:340px;border-radius: 15px;border: 10px solid #9a9a9a;display: none;">
            <span id="skyid_fa_text_indicator" style="color: white;text-align:center;font-family: Arial, Helvetica, sans-serif;z-index:99;padding:5px;background-color:#49c947;display:none;">SVP positionner votre visage au centre sans rotation. puis clique sur Demarrer</span>
            <video id="skyid_fa_webcame" align="center" width="360px" height="480px" style="object-fit:cover;" autoplay muted playsinline></video>
            <svg
                width="340"
                height="255"
                className="svg"
                id="skyid_fa_canvas_overlay"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                xmlnsXlink="http://www.w3.org/1999/xlink" style="display: none;">
              <defs>
                <mask id="overlay-mask" x="0" y="0" width="100%" height="100%">
                  <rect x="0" y="0" width="100%" height="100%" fill="#fff"/>
                  <ellipse id="ellipse-mask" cx="50%" cy="54%" rx="32%" ry="36%"  stroke="purple" stroke-width="10" />
                </mask>
              </defs>
              <rect x="0" y="0" width="100%" height="100%" mask="url(#overlay-mask)" fill="#38342b"  fillOpacity="0.95"/>
            </svg>
  
           <canvas id="skyid_fa_canvas_output"> </canvas>
           <canvas id="skyid_fa_canvas_warning"> </canvas>
       </div>
  
       <div id="skyid_fa_msg_container" align="center"
            style="height:480px;width:360px; background: white;z-index: 5;border-radius: 15px;border: 10px solid #9a9a9a;">
  
           <svg id="skyid_fa_success_icon" class="checkmark marging_top_50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52" style="display: none;">
               <circle class="checkmark__circle" cx="26" cy="26" r="25" fill="none"/>
               <path class="checkmark__check" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
           </svg>
  
           <div id="skyid_fa_error_icon" class="marging_top_50" style="display: none;"></div>
  
           <div class="text_container marging_top_20">
               <h3 id="skyid_fa_alert_text" style="text-align:center;font-family: Arial, Helvetica, sans-serif;">chargement des modules ...</h3>
           </div>
           <div id="skyid_fa_spinner" class="lds-dual-ring marging_top_20"></div>
       </div>
  
  
  
  </div>
  
 
  <p id="msg"></p>
   <button id="skyid_fa_start_button" class="button_start" style="display:none;"> Demarrer </button>