Initially, you'll see this instruction screen (unless this is turned off), guiding the user on , 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
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:
Here's a script example to handle the event and send data to a backend endpoint:
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.
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);
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:
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
Support
Tested on the latest versions of Chrome, Edge, Firefox, and Safari. If compatibility issues arise on certain browsers, please notify us.
When the user approves the captured image, a smart-camera-web.publish event is dispatched. The event returns a payload in e.detail.
More details
This approach can also be achieved using other .
SmartCameraWeb is compatible with most JavaScript frameworks and libraries. For integration with , refer to this due to React-WebComponents compatibility issues.
