@smile_identity/smart-camera-web

Smart-Camera-Web

This is a WebComponent library built to enable us capture selfies and liveness images for use with SmileIdentity.

It works in concert with our server-side libraries.

Here's an example full-stack integration using our NodeJS Server-Side Library

Installation

We support installation through NPM and by adding a script tag from our CDN

Install Via NPM

npm install @smile_identity/smart-camera-web@<version>

In your VueJS / AngularJS / React page or component, import the package this way

import '@smile_identity/smart-camera-web'

Install via a script tag

<script src="https://cdn.smileidentity.com/js/<version>/smart-camera-web.js"></script>

We use semantic versioning. As such, an example of a valid link will be:

<script src="https://cdn.smileidentity.com/js/v1.0.0-beta.2/smart-camera-web.js"></script>

Usage

After installing, and importing if required, you can use the web-component by following these two steps

Steps

• Insert the following markup in your page / component

<smart-camera-web>
</smart-camera-web>

• Listen for the imagesComputed event in your page / component

const smartCameraWeb = document.querySelector('smart-camera-web');

smartCameraWeb.addEventListener('imagesComputed', (e) => {
  const data = e.detail;

  // add any textual data that may be required here
});

imagesComputed is a CustomEvent returning data — in e.detail — of the shape:

{
  partner_params: {
    libraryVersion: String,
    permissionGranted: Boolean, // expected to be `true`
  },
  images: [
    {
      file: '',
      image_type_id: Number, // as recommended here: https://docs.smileidentity.com/products/core-libraries#images-required
      image: String // base64 encoded string of image
    }
  ]
}

We advise that the partner_params published be merged with other partner_params sent with your request.

Notes

This library can be used with most JS frameworks / libraries directly. However, for ReactJS, there need to be a few extra steps. This is due to the cross-compatibility issues between React and WebComponents.

In order to work around this, we've found this tutorial helpful in the past.

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.