Usage

After installation and necessary imports:

1. Add the desired markup to your page/component:

   • For Selfie Capture / Liveness Images Only:

     <selfie-capture-screens></selfie-capture-screens>

   • ID Images only:

     <document-capture-screens></document-capture-screens>

   • For Selfie Capture / Liveness and ID Images:

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

   Selfie Capture

   Initially, you'll see this instruction screen, guiding the user on best practices for good sefie capture:

   After granting access, the capture screen appears prompting the user to present their face and take a selfie:

   Upon capturing a selfie, you'll be presented with the review screen:

   Document Capture

   If the capture-id attribute is used, you will be presented with additional screens for document capture (front, back (optional), review):

   

2. Handle the smart-camera-web.publish event:

   When the user approves the captured image, an smart-camera-web.publish event is dispatched. The event returns a CustomEvent payload in e.detail.

   Here's a script example to handle the event and send data to a backend 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("smart-camera-web.publish", async (e) => {
       try {
         const response = await postContent(e.detail);
   
         console.log(response);
       } catch (e) {
         console.error(e);
       }
     });
   </script>

Note: when using the selfie-capture-screens listen to selfie-capture-screens.publish event to get the selfie and liveness images. For document-capture-screens listen to the document-capture-screens.publish event for the document image. More details here

The provided backend endpoint uses the NodeJS Server to Server library and ExpressJS:

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.usesmileid.com/further-reading/faqs/how-do-i-setup-a-callback
app.post("/callback", (req, res, next) => {});

app.listen(process.env.PORT || 4000);

This approach can also be achieved using other Server to Server libraries.

Handle Events

Selfie and liveness images

To receive the images after they have been captured, you can listen to the custom event selfie-capture-screens.publish. The data posted to this event has the structure:

{
  "detail": {
    "images": [{ "image": "base64 image", "image_type_id": "" }],
    "meta": {
      "version": "version of the library in use"
    }
  }
}

Usage:

document
  .querySelector("selfie-capture-screens")
  .addEventListener("selfie-capture-screens.publish", function (event) {
    console.log(event.detail);
  });

Handling cancel event

document
  .querySelector("selfie-capture-screens")
  .addEventListener("selfie-capture-screens.cancelled", function (event) {
    console.log(event.detail);
  });

Handling back event

document
  .querySelector("selfie-capture-screens")
  .addEventListener("selfie-capture-screens.back", function (event) {
    console.log(event.detail);
  });

Document Image

Capture events emit document-capture-screens.publish, providing captured images and metadata:

{
  "detail": {
    "images": [{ "image": "base64-encoded image", "image_type_id": "" }],
    "meta": {
      "version": "library version"
    }
  }
}

To handle this event:

document
  .querySelector("document-capture-screens")
  .addEventListener("document-capture-screens.publish", function (event) {
    console.log(event.detail);
  });

Handling cancel event

document
  .querySelector("document-capture-screens")
  .addEventListener("document-capture-screens.cancelled", function (event) {
    console.log(event.detail);
  });

Handling back event

document
  .querySelector("document-capture-screens")
  .addEventListener("document-capture-screens.back", function (event) {
    console.log(event.detail);
  });

Compatibility

SmartCameraWeb is compatible with most JavaScript frameworks and libraries. For integration with ReactJS, refer to this tutorial due to React-WebComponents compatibility issues.

Support

Tested on the latest versions of Chrome, Edge, Firefox, and Safari. If compatibility issues arise on certain browsers, please notify us.