@smile_identity/smart-camera-web

    1.0.0-beta.4 • Public • Published

    Smart Camera Web

    Build

    SmartCameraWeb is a Web Component used to capture images — selfies, liveness images, ID Document images — for use with SmileIdentity.

    It works together with our Server to Server libraries, acting as a user interface client.

    Here's an example full stack integration using our NodeJS library.

    Guide

    In order to build with this, you need to follow the following steps:

    1. Choose a Server to Server Library
    2. Install the Web SDK
    3. Use the Web SDK
    4. Parse Images to Server to Server Library & Submit to SmileIdentity

    Choose a Server to Server Library

    We currently have Server to Server Libraries in the following languages / run-times.

    In this documentation, our code samples will use the NodeJS Server to Server 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.3/smart-camera-web.js"></script>

    Usage

    On successful installation, and importing if required, you can use the web component by following these two steps.

    Steps

    1. Insert the following markup in your page / component

      • For Selfie Capture / Liveness Images only

        <smart-camera-web>
        </smart-camera-web>
      • For Selfie Capture / Liveness, and ID Images

        <smart-camera-web capture-id>
        </smart-camera-web>

      The following image should show up on your web page, if installation, and import, was successful.

      After granting access by clicking the button, you should see the capture screen below

      On clicking the "Take Selfie" button, you should be navigated to a review screen.

      You can review the selfie taken or select it, when it meets your criteria.

      When the capture-id attribute is added, we have the following extra screens.

      • ID Camera

      • ID Review

    2. Handle the imagesComputed event in your page / component

    On clicking the "Yes, use this one" button for the selfie / liveness images flow, or the "Approve" icon on the capture-id flow, an imagesComputed event will be published.

    imagesComputed is a CustomEvent returning data — in e.detail. Here's a sample:

    {
      partner_params: {
        libraryVersion: "1.0.0-beta.3",
        permissionGranted: true
      },
      images: [
        {
          image_type_id: 2,
          image: "/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAA..."  // truncated base64 encoded string of image
        },
        {
          image_type_id: 6,
          image: "/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAA..."
        },
        {
          image_type_id: 6,
          image: "/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAA..."
        },
        {
          image_type_id: 6,
          image: "/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAA..."
        },
        {
          image_type_id: 6,
          image: "/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAA..."
        },
        {
          image_type_id: 6,
          image: "/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAA..."
        },
        {
          image_type_id: 6,
          image: "/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAA..."
        },
        {
          image_type_id: 6,
          image: "/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAA..."
        },
        {
          image_type_id: 6,
          image: "/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAA..."
        },
        {
          image_type_id: 3,
          image: "/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAA..."
        },
      ]
    }

    partner_params are documented here, and image_type_id is explained here

    Here, we handle the imagesComputed event by sending the data to an endpoint.

    <script>
      const app = document.querySelector('smart-camera-web');
    
      const postContent = async (data) => {
        const options = {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(data)
        };
    
        try {
          const response = await fetch('/', options)
          const json = await response.json();
    
          return json;
        } catch (e) {
          throw e;
        }
      };
    
      app.addEventListener('imagesComputed', async (e) => {
    
        try {
          const response = await postContent(e.detail);
    
          console.log(response);
        } catch (e) {
          console.error(e);
        }
      });
    </script>

    The sample endpoint is built using our NodeJS Server to Server library and ExpressJS. This is the code below:

    const express = require('express');
    const { v4: UUID } = require('uuid');
    
    if (process.env.NODE_ENV === 'development') {
      const dotenv = require('dotenv');
    
      dotenv.config();
    }
    
    const SIDCore = require('smile-identity-core');
    const SIDSignature = SIDCore.Signature;
    const SIDWebAPI = SIDCore.WebApi;
    
    const app = express();
    
    app.use(express.json({ limit: '500kb' }));
    app.use(express.static('public'));
    
    app.post('/', async (req, res, next) => {
      try {
        const { PARTNER_ID, API_KEY, SID_SERVER } = process.env;
        const connection = new SIDWebAPI(
          PARTNER_ID,
          '/callback',
          API_KEY,
          SID_SERVER
        );
    
        const partner_params_from_server = {
          user_id: `user-${UUID()}`,
          job_id: `job-${UUID()}`,
          job_type: 4 // job_type is the simplest job we have which enrolls a user using their selfie
        };
    
        const { images, partner_params: { libraryVersion } } = req.body;
    
        const options = {
          return_job_status: true
        };
        
        const partner_params = Object.assign({}, partner_params_from_server, { libraryVersion });
        
        
        const result = await connection.submit_job(
          partner_params,
          images,
          {},
          options
        );
    
        res.json(result);
      } catch (e) {
        console.error(e);
      }
    });
    
    // NOTE: This can be used to process responses. don't forget to add it as a callback option in the `connection` config on L22
    // https://docs.smileidentity.com/further-reading/faqs/how-do-i-setup-a-callback
    app.post('/callback', (req, res, next) => {
    });
    
    app.listen(process.env.PORT || 4000);

    You can also build this using any of the other Server to Server libraries.

    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.

    Install

    npm i @smile_identity/smart-camera-web

    DownloadsWeekly Downloads

    18

    Version

    1.0.0-beta.4

    License

    ISC

    Unpacked Size

    66.2 kB

    Total Files

    15

    Last publish

    Collaborators

    • titi-smile-id
    • camerondgray
    • beaglebets
    • bbares
    • tams~smileid