Usage
After installing, and importing if required, you can use the web-component by following these steps:
1. Insert the following markup in your page / component
For Selfie Capture / Liveness Images only
<smart-camera-web>
</smart-camera-web>
For Selfie Capture / Liveness Images, and ID images
<smart-camera-web capture-id>
</smart-camera-web>
For Selfie Capture / Liveness Images, and ID images (front and back)
<smart-camera-web capture-id="back">
</smart-camera-web>
To Select the Document Capture Mode for ID images add the
document-capture-modes attribute with one of camera, upload, or a comma separated combination like camera,upload.<smart-camera-web capture-id="back" document-capture-modes="camera,upload">
</smart-camera-web>
2. The following image should show up on your web page, if installation, and import, was successful.
Camera Access Permission
3. After granting access by clicking the button, you start by capturing a selfie and liveness images. You should see the capture screen below
Capture Selfie Screen
- Click on Take a Selfie and follow the prompts on the screen to take both the Selfie and Liveness images.
- At the end of the selfie capture process, you should see the Selfie review screen.
Selfie Review Screen
If the Selfie you took is satisfactory, select "Yes, use this one" or select "Re-take selfie" the selfie again running through steps 3 to 5.
4. If you intend to also capture the ID card image and added the
capture-id attribute, additional screens related to ID card capture are displayed in addition to the Selfie related screens- Capture your ID card photo
ID Card Capture Screen
- After taking the ID card photo, you should see the review screen
ID Card Review Screen
5. Handle the
imagesComputed event in your page / componentOn clicking the "Yes, use this one" button for the selfie / liveness images flow, or the "Approve" icon on the
capture-id flow, an imagesComputed event will be published.{
partner_params: {
libraryVersion: String,
permissionGranted: Boolean, // expected to be `true`
},
images: [
{
file: '',
image_type_id: Number, // as recommended here: https://docs.smileidentity.com/products/core-libraries#images-required
image: String // base64 encoded string of image
}
]
}
Here is a sample:
{
partner_params: {
libraryVersion: "1.0.0-beta.3",
permissionGranted: true
},
images: [
{
image_type_id: 2,
image: "/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAA..." // truncated base64 encoded string of image
},
{
image_type_id: 6,
image: "/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAA..."
},
{
image_type_id: 6,
image: "/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAA..."
},
{
image_type_id: 6,
image: "/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAA..."
},
{
image_type_id: 6,
image: "/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAA..."
},
{
image_type_id: 6,
image: "/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAA..."
},
{
image_type_id: 6,
image: "/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAA..."
},
{
image_type_id: 6,
image: "/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAA..."
},
{
image_type_id: 6,
image: "/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAA..."
},
{
image_type_id: 3,
image: "/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAA..."
},
]
}
We advise that the
partner_params published be merged with other partner_params sent with your request. You can read more about image_type_id here.Here, we handle the imagesComputed event by sending the data to an 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('imagesComputed', async (e) => {
try {
const response = await postContent(e.detail);
console.log(response);
} catch (e) {
console.error(e);
}
});
</script>
The sample endpoint is built using our NodeJS Server to Server library and ExpressJS. This is the code below:
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.smileidentity.com/further-reading/faqs/how-do-i-setup-a-callback
app.post('/callback', (req, res, next) => {
});
app.listen(process.env.PORT || 4000);
Last modified 3mo ago