Usage
Add the component
After installation and necessary imports:
Add the desired images capture markup to your page/component:
<selfie-capture-screens></selfie-capture-screens>
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:



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



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.
Last updated
Was this helpful?