# Usage

## Add the component

After installation and necessary imports:

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

{% tabs %}
{% tab title="Selfie only" %}
```html
<selfie-capture-screens></selfie-capture-screens>
```
{% endtab %}

{% tab title="ID Document only" %}
```html
<document-capture-screens></document-capture-screens>
```
{% endtab %}

{% tab title="Selfie and Document" %}
```html
<smart-camera-web capture-id></smart-camera-web>
```
{% endtab %}
{% endtabs %}

{% hint style="success" %}
For **basic color theming,** add the **`theme-color`** attribute to the component with a valid css hex value&#x20;

```html
<smart-camera-web theme-color="#7AAAFA"></smart-camera-web>
```
{% endhint %}

### Selfie Capture

Initially, you'll see this instruction screen (**unless this is turned off**), guiding the user on [best practices for good selfie capture](../../../further-reading/faqs/what-are-good-selfie-best-practices), this will be followed by the selfie capture screen prompting the user to present their face and a review screen:

<div align="center"><figure><img src="https://3401227780-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ma8gvgl1y7j-M_RfiTg%2Fuploads%2FOgdKhb7BS2T0M8mTV8Vw%2Finstructions.jpg?alt=media&#x26;token=5e714739-fa75-4b61-b76e-235c72bf13a4" alt="" width="338"><figcaption><p>Instructions screen</p></figcaption></figure> <figure><img src="https://3401227780-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ma8gvgl1y7j-M_RfiTg%2Fuploads%2FGX8Qs8pRXEWpThTVmDwH%2FTake%20Selfie.jpg?alt=media&#x26;token=b0f292cc-0807-4067-819c-3a521b265bdc" alt="" width="338"><figcaption><p>Take selfie screen</p></figcaption></figure> <figure><img src="https://3401227780-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ma8gvgl1y7j-M_RfiTg%2Fuploads%2FFS6lxrWIZKbJsqK0URPD%2Freview%20screen.jpeg?alt=media&#x26;token=56f9f32f-ab4d-4c30-877c-eabd16959abd" alt="" width="338"><figcaption><p>Selfie review screen</p></figcaption></figure></div>

{% hint style="success" %}
To turn off the instruction screen, add the **`hide-instructions`** attribute to the component

```html
<smart-camera-web hide-instructions></smart-camera-web>
```
{% endhint %}

### 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):

<div><figure><img src="https://3401227780-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ma8gvgl1y7j-M_RfiTg%2Fuploads%2FCaL5h35Cep5SKPc6xs91%2Fdocument%20instructions.jpeg?alt=media&#x26;token=099f1174-44cd-4747-8749-57fb94c76931" alt="" width="338"><figcaption><p>Document instruction screen</p></figcaption></figure> <figure><img src="https://3401227780-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ma8gvgl1y7j-M_RfiTg%2Fuploads%2FqlXcE3ukMNOXEJXK0iRR%2Fdocument%20capture.jpeg?alt=media&#x26;token=e2dd5e12-396b-4f6c-8f2b-702670c0079f" alt="" width="338"><figcaption><p>Document capture screen</p></figcaption></figure> <figure><img src="https://3401227780-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ma8gvgl1y7j-M_RfiTg%2Fuploads%2FuIcYvwCNw15gms8oQOmW%2Fdocument%20review.jpeg?alt=media&#x26;token=35f2d4f1-51ad-4042-8f20-b139e119c78f" alt="" width="338"><figcaption><p>Document review screen</p></figcaption></figure></div>

### Capture front of document only

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

```html
<!-- 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](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent) payload in `e.detail`.

Here's a script example to handle the event and send data to a backend endpoint:

```javascript
<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>
```

{% hint style="warning" %}
Note: when using the `selfie-capture-screens` listen to the `selfie-capture-screens.publish` event to get the selfie and liveness images.&#x20;

For `document-capture-screens` listen to the `document-capture-screens.publish` event for the document image.&#x20;

More details [here](#handling-events)
{% endhint %}

### Process request on backend

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

```javascript
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);
```

{% hint style="success" %}
This approach can also be achieved using other [Server to Server libraries](https://docs.usesmileid.com/integration-options/server-to-server).
{% endhint %}

## 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:

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

### Handling the publish event:

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

### Handling the cancel event

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

### Handling the back event

```javascript
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:

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

### Handling the publish event

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

### Handling the cancel event

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

### Handling the back event

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

## Compatibility <a href="#compatibility" id="compatibility"></a>

`SmartCameraWeb` is compatible with most JavaScript frameworks and libraries. For integration with [ReactJS](https://reactjs.org/), refer to this [tutorial](https://www.robinwieruch.de/react-web-components) due to React-WebComponents compatibility issues.

## Camera not loading

Please see the [trouble shooting guide here](../../../../further-reading/troubleshooting/image-capture-issues-on-web-client#problem-camera-not-loading) for situations where the camera is not loading.

## Support <a href="#support" id="support"></a>

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