renderCamera

Understanding The `renderCamera` Component

The renderCamera component is a versatile tool within the Incode Flow that serves multiple functionalities. This component can be utilized in concert with the following modules, each catering to a different requirement:

ID Capture: This module facilitates the capture of user identification.
Face Capture: Primarily used for facial recognition and verification, this module captures a selfie of the user.
PoA Capture: Designed to capture the user's proof of address.
Document Capture: This module is responsible for capturing and processing data from documents.

Each module has a unique function, and with the renderCamera component, you can customize their functionality to meet your specific needs.

Implementation of the `renderCamera` Component

Implementing the renderCamera component into your web application involves calling the Incode webSDK method as follows:

const container = document.getElementById("your-container-id");

incode.renderCamera("front", container, {
  onSuccess: onSuccess,
  onError: onError,
});

const onSuccess = () => {
  /* Insert success handler code here */
};
const onError = () => {
  /* Insert error handler code here */
};

Parameters

The renderCamera component accepts the following parameters:

Name	Type	Description	Values
type	string	Specifies the type of image to be captured	front, back, selfie, document, passport, secondId, thirdId
container	HTMLElement	Refers to the HTML element where the component will be rendered	-
options	cameraOptions	Defines the configuration options for the Camera component	-

cameraOptions

The cameraOptions parameter offers a range of configuration options for the Camera component:

Name	Type	Description
onSuccess	function	Callback triggered when detection is successful
onError	function	Callback triggered when detection is unsuccessful
token	Object	Session object (optional)
numberOfTries	Number	Defines the number of capture attempts
onLog	function	Function with a logger
permissionMessage	String	Message displayed in the permission screen. Default: "Press "Allow" to continue."
permissionBackgroundColor	String	Background of the permissions screen. Default: "#696969"
sendBase64	boolean	If you need to send the image in base64, set this to true (only if type = 'selfie')
timeout	number	The timeout in milliseconds for looking for a face (only if type = 'selfie')
showPreview	boolean	Set to true to show capture preview. (only if type = 'selfie')
stream	MediaStream	If you send a stream, it won't ask the user again. This is an advanced option.
nativeCamera	boolean	This is only optional for documents. If set to true, it's going to use the native camera for the capture (default: false)
showTutorial	boolean	Option to show the tutorial (default: false)
isRecordingEnabled	boolean	Option to record the capture camera (default: false)
onRestartOnboarding	function	Callback for the restart flow after camera access is denied (default: () => window.location.reload())
showDoublePermissionsRequest	boolean	Option to show the custom permission prompt (default: false)
onlyAllowCapture	boolean	Option to disable the uploading of files and images. Only works when the type is document and nativeCamera is set to true (default: false)
disableFullScreen	boolean	Option to disable the full screen behaviour our SDK has. This will use the container width and height. Use this only for Desktop apps. (default:false)
showCustomCameraPermissionScreen	boolean	Option to open a modal with instructions to allow camera permissions when user denies them. (default:false)

Callback Response

For the renderCamera component the response will change based on the type you assign, for more details on the different response consult the specific use case.

Use Cases

ID Capture (Card)

When you enable the ID Capture module in your Incode Flow, you can use the renderCamera component with the types 'front' and 'back'. This allows capturing a diversity of card IDs such as drivers license, INE credential, etc through the device camera. Depending on the selected type, you will be able to use the corresponding tutorial and receive the corresponding onSuccess response object.

Implementation

const container = document.getElementById("your-container-id");
// Initialize your session trough yous backend solution
const session = getOnboardingSession();
// Initialize the Incode webSDK
const incode = OnBoarding.create({
  apiURL: "<https://incode-api-url.com>",
  lang: "en",
});

function renderFrontCamera() {
	incode.renderCamera("front", container, {
		token: session,
	  onSuccess: (callback) => {
		  if (callback.skipBackIdCapture) {
			  processId();
		  } else {
			  renderBackCamera();
		  }
		},
	  onError: onError,
	});
}

function renderBackCamera() {
	incode.renderCamera("back", container, {
		token: session,
	  onSuccess: () => {
		  processId();
		},
	  onError: onError,
	});
}

function processId() {
}

const onError = () => {
  /* Insert error handler code here */
};

function init() {
	renderFrontCamera();
}

OnSuccess response object

Common for Front and Back

Name	Type	Description
classification	Boolean	Is server classified image as a Id flag
correctGlare	Boolean	Is the glare in good range flag
correctSharpness	Boolean	Is the sharpness in the good range flag
countryCode	String	Valid ISO alpha-2 or alpha-3 code of the ID issuing country
glare	Number	Glare level (0-100)
horizontalResolution	Number	Horizontal resolution in pixels
issueName	String	Name of provided ID
issueYear	Number	The year when the ID was issued
readability	Boolean	Is the data readable from the ID flag
sessionStatus	String	Current status of the session
sharpness	Number	Sharpness level (0-100)
typeOfId	String	Type of ID (ID, Passport...)

Exclusive for Front

Name	Type	Description
state	String	???
skipBackIdCapture	Boolean	Flag for skipping back ID capture

OnError response object

Name	Type	Description

ID Capture Passport

Description

Implementation

const container = document.getElementById("your-container-id");
// Initialize your session trough yous backend solution
const session = getOnboardingSession();
// Initialize the Incode webSDK
const incode = OnBoarding.create({
  apiURL: "<https://incode-api-url.com>",
  lang: "en",
});

function renderSelfieCamera() {
	incode.renderCamera("selfie", container, {
		token: session,
	  onSuccess: (callback) => {
		  if (callback.skipBackIdCapture) {
			  processId();
		  } else {
			  renderBackCamera();
		  }
		},
	  onError: onError,
	});
}

const onError = () => {
  /* Insert error handler code here */
};

function init() {
	renderSelfieCamera();
}

OnSuccess response object

Name	Type	Description

OnError response object

Name	Type	Description

Face Capture

Description

Implementation

const container = document.getElementById("your-container-id");
// Initialize your session trough yous backend solution
const session = getOnboardingSession();
// Initialize the Incode webSDK
const incode = OnBoarding.create({
  apiURL: "<https://incode-api-url.com>",
  lang: "en",
});

function renderSelfieCamera() {
	incode.renderCamera("selfie", container, {
		token: session,
	  onSuccess: (callback) => {
		  if (callback.skipBackIdCapture) {
			  processId();
		  } else {
			  renderBackCamera();
		  }
		},
	  onError: onError,
	});
}

const onError = () => {
  /* Insert error handler code here */
};

function init() {
	renderSelfieCamera();
}

OnSuccess response object

Name	Type	Description

OnError response object

Name	Type	Description

Document and PoA

Description

Implementation

const container = document.getElementById("your-container-id");
// Initialize your session trough yous backend solution
const session = getOnboardingSession();
// Initialize the Incode webSDK
const incode = OnBoarding.create({
  apiURL: "<https://incode-api-url.com>",
  lang: "en",
});

function renderSelfieCamera() {
	incode.renderCamera("document", container, {
		token: session,
	  onSuccess: (callback) => {
		  if (callback.skipBackIdCapture) {
			  processId();
		  } else {
			  renderBackCamera();
		  }
		},
	  onError: onError,
	});
}

const onError = () => {
  /* Insert error handler code here */
};

function init() {
	renderSelfieCamera();
}

OnSuccess response object

Name	Type	Description

OnError response object

Name	Type	Description

ID Capture Passport

Description

Implementation

const container = document.getElementById("your-container-id");
// Initialize your session trough yous backend solution
const session = getOnboardingSession();
// Initialize the Incode webSDK
const incode = OnBoarding.create({
  apiURL: "<https://incode-api-url.com>",
  lang: "en",
});

function renderSelfieCamera() {
	incode.renderCamera("selfie", container, {
		token: session,
	  onSuccess: (callback) => {
		  if (callback.skipBackIdCapture) {
			  processId();
		  } else {
			  renderBackCamera();
		  }
		},
	  onError: onError,
	});
}

const onError = () => {
  /* Insert error handler code here */
};

function init() {
	renderSelfieCamera();
}

OnSuccess response object

Name	Type	Description

OnError response object

Name	Type	Description

Close Method

Description

Implementation

const container = document.getElementById("your-container-id");
// Initialize your session trough yous backend solution
const session = getOnboardingSession();
// Initialize the Incode webSDK
const incode = OnBoarding.create({
  apiURL: "<https://incode-api-url.com>",
  lang: "en",
});

const { close } = incode.renderCamera("selfie", container, {
		token: session,
	  onSuccess: (callback) => {
		  if (callback.skipBackIdCapture) {
			  processId();
		  } else {
			  renderBackCamera();
		  }
		},
	  onError: onError,
	});
}

// then you can close the SDK from your code
document.querySelector("#close-modal").addEventListener("click", () => {
  close(); // this will close the component prematurely, so use it only if you want to abort the process and close the camera
});

const onError = () => {
  /* Insert error handler code here */
};

Understanding The renderCamera Component

Implementation of the renderCamera Component

Parameters

cameraOptions

Callback Response

Use Cases

ID Capture (Card)

ID Capture Passport

Face Capture

Document and PoA

ID Capture Passport

Close Method

Understanding The `renderCamera` Component

Implementation of the `renderCamera` Component