Capture Pictures without a Session(onlyCapture)
You can use the WebSDK to capture the images of the front, the back and the selfie without doing a full onboarding.
There are times when you need to take the pictures of the Id and the Selfie and handle that images yourself, in such case you can still benefit from the models and the UI build into the WebSDK to help the user capture the best possible picture.
Step 1: Create an HTML file
This HTML loads the webSDK using a script tag but you could also include it using NPM, It also set the viewport so the webSDK can work properly and include our main.js file.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://sdk.incode.com/sdk/onBoarding-<<WEB_SDK_VERSION>>.js" defer></script>
<script type="module" src="/main.js"></script>
<link href="/style.css" rel="stylesheet" />
<title>Capture Example</title>
</head>
<body>
<div id="camera-container"></div>
</body>
</html>Step 2: Create the Incode WebSDK Instance
We need to wait for all the content to be loaded before creating the instance, so we add the creation code inside a function attached to a listener.
let incode;
const container = document.getElementById("camera-container");
async function app() {
incode = window.OnBoarding.create({
apiURL: "<<DEMO_URL_0>>"
});
//Ready to run the WebSDK, add your renderCamera here!
}
document.addEventListener("DOMContentLoaded", app);Step 3: Call the RenderCamera Method with onlyCapture=true
onlyCapture=trueThis is the minimal code needed to get the results, that imageBase64 is ready for you to handle as you wish.
incode.renderCamera("front", container, {
onSuccess: (reponse)=>console.log(response.imageBase64),
onError: (error)=> console.log(error.message),
onlyCapture: true,
});Code Sample Available
To see a full example running including:
- Capture of Front Id, Back Id and Selfie.
- How to link the steps together with error handling.
- Presents the results in the same page at the end of the capture.
Please refer to the capture-javascript example
Updated 3 months ago