Usage

Add the component

After installation and necessary imports:

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

Selfie only

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

ID Document only

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

Selfie and Document

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

For basic color theming, add the theme-color attribute to the component with a valid css hex value

<smart-camera-web theme-color="#7AAAFA"></smart-camera-web>

Selfie Capture

Initially, you'll see this instruction screen (unless this is turned off), guiding the user on best practices for good selfie capture, this will be followed by the selfie capture screen prompting the user to present their face and a review screen:

Instructions screen

Take selfie screen

Selfie review screen

To turn off the instruction screen, add the hide-instructions attribute to the component

<smart-camera-web hide-instructions></smart-camera-web>

Document Capture

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

Document instruction screen

Document capture screen

Document review screen

Capture front of document only

<!-- Example: Capture front of document only -->
<document-capture-screens hide-back-of-id></document-capture-screens>

<!-- Example: Capture selfie and front of document only -->
<smart-camera-web capture-id hide-back-of-id></smart-camera-web>

Handle events

Handle the smart-camera-web.publish event:

When the user approves the captured image, a 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 the 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

Process request on backend

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 product 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.

Handling 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"
    }
  }
}

Handling the publish event:

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

Handling the cancel event

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

Handling the 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"
    }
  }
}

Handling the publish event

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

Handling the cancel event

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

Handling the 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.

Camera not loading

Please see the trouble shooting guide here for situations where the camera is not loading.

Support

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