> For the complete documentation index, see [llms.txt](https://api2-ekycapis.innov8tif.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://api2-ekycapis.innov8tif.com/okaycam-mobile-sdk/okaycam-mobile-sdk-all/development-guide-face-capture/development-guide-face-capture-for-v3.md).
# Development Guide (Face Capture) for v3
{% tabs %}
{% tab title="Android" %}
### Usage
* Selfie camera can be launched by invoking `start` method on OkaySelfieActivity with context,config and callback method as follow
* Config object is optional if you call from Kotlin (refer to [Configuration ](#configuration)for more info)
* After the image is captured or the user cancel, the callback method will be called (refer [result](#result-callback))
* A License Key is required to start the SDK.
```
OkayCamSelfie.start(this, LICENSE_KEY, config) { success, image, exception ->
// do something with the result
}
```
### Configuration
* The configuration object is optional if is calling from [Kotlin](https://kotlinlang.org/docs/object-declarations.html#using-anonymous-object-as-return-and-value-types).
* Configuration object can be created and can be customized as follow
* If no value is set for properties, default values will be implied
```
val config = OkaySelfieConfig.init(this)
config.frameColor = Color.YELLOW
```
### List of Possible Configurations
This is a complete list of possible configurations that has been provided to the user to make any custom configuration:
| - | Property | Description | Default Value |
| ---------------- | ------------------- | -------------------------------------------------------- | ----------------------------------------- |
| - | width | width to resize the image | null |
| - | imageQuality | quality of image | 1.0f (range from 0 to 1.0) |
| - | outputPath | desired output image path | null |
| - | defaultCameraFacing | initial camera facing when the selfie camera is launched | CameraFacing.FRONT |
| topLabel | text | text of the top label | "Please align your face within the frame" |
| topLabel | color | color of the top label | #FFFFFF |
| topLabel | size | text size of the top label | 24 |
| - | bottomFrameColor | color of the bottom frame | #EB6709 |
| - | captureBtnColor | color of the capture button | #EB144C |
| confirmBtnConfig | backgroundColor | background color of the confirm button | #EB144C |
| confirmBtnConfig | contentColor | content color of the confirm button | #FFFFFF |
| retakeBtnConfig | backgroundColor | background color of the retake button | #EB144C |
| retakeBtnConfig | contentColor | content color of the retake button | #FFFFFF |
| switchBtnConfig | color | color of the switch button | #FFFFFF |
| switchBtnConfig | show | show or hide the camera switch button | true |
{% hint style="info" %}
If there is no value is set for properties, default values will be implied.
{% endhint %}
### Result Callback
* After the image is capture or cancelled by the user, the callback method will be called.
* Result callback has 3 parameters as follow:
| Conditions | Results |
| ---------- | ----------------------------------------------------------------------------------------------------------------------------- |
| Success | It will be true if the image is captured successfully, else it will return false. |
| Images | If it is successful, images will contain the file path the image, else it will return null. |
| Exception | If it is successful, the exception will be null, else it will contain the exception that occurred during the image capturing. |
### Base64 Conversion
```
import com.innov8tif.okaycam.utils.BitmapUtils;
String result = BitmapUtils.INSTANCE.convertToBase64(image);
```
{% endtab %}
{% tab title="iOS" %}
### Usage
For iOS, there will be several steps to initialize and configure the Face Capture settings.
* Instantiate the configuration object. A reference must be passed into the **Navigation Controller** as follows:
```swift
let config = OkaySelfieConfig(navigationController: nav)
```
* Start the process by calling **start** on **OkaySelfieCam** class. Similarly, the result can be handle in the completion handler.
```swift
OkayCamSelfie.start(
okaySelfieConfig: config,
license: yourLicense,
{ filePath, error in
// handle
}
)
```
You will only either receieve the `filePath` or an `error`. One will be valid and the other will be `nil`.
### Configuration
The configuration object can be modified as follow:
```swift
let config = OkaySelfieConfig(navigationController: nav)
config.topLabel.text = "top label text"
config.topLabel.color = .green
config.topLabel.size = 14
config.bottomFrameColor = .darkGray
config.captureBtnColor = .white
config.swichBtnConfig.show = true
config.swichBtnConfig.color = .magenta
config.confirmBtnConfig.backgroundColor = .blue
config.confirmBtnConfig.contentColor = .black
config.retakeBtnConfig.backgroundColor = .orange
config.retakeBtnConfig.contentColor = .black
config.width = 250
config.imageQuality = 1.0
config.defaultCameraFacing = .back
config.outputPath = myCustomFilePath
```
### List of Possible Configurations
This is a complete list of possible configurations that has been provided to the user to make any custom configuration:
| Property | Type | Default Value |
| ------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| topLabel | OkaySelfieLabelConfig | OkaySelfieLabelConfig(text: "Please align your face within the frame", color: UIColor.white, size: CGFloat(18)) |
| bottomFrameColor | UIColor | UIColor(red: 0.92, green: 0.40, blue: 0.04, alpha: 1.0) |
| captureBtnColor | UIColor | UIColor(red: 0.92, green: 0.08, blue: 0.30, alpha: 1.0) |
| confirmBtnConfig | OkayCamBtnConfig | OkayCamBtnConfig(
backgroundColor: UIColor(red: 0.92, green: 0.08, blue: 0.30, alpha: 1.0),
contentColor: UIColor.white
)
|
| retakeBtnConfig | OkayCamBtnConfig | OkayCamBtnConfig(
backgroundColor: UIColor(red: 0.92, green: 0.08, blue: 0.30, alpha: 1.0),
contentColor: UIColor.white
)
|
| switchBtnConfig | SwitchBtnConfig | SwitchBtnConfig(color: UIColor.white, show: false) |
| defaultCameraFacing | OkayCam.CameraDevice | OkayCam.CameraDevice.front |
| outputPath | URL? | nil |
| width | Int? | nil |
| imageQuality | CGFloat | 1.0 (range from 0 to 1.0) |
### Face Capture Liveness
1. Instantiate the configuration object. You must pass a reference to your navigation controller.
```swift
let config = OkayCamAutoSelfieConfig(viewController: nav)
config.width = 500 // Example value
```
2. Start the process by calling `start` on `OkayCamAutoSelfie` class. Similarly, you can handle the result in the completion handler.
```swift
OkayCamAutoSelfie.start(
okaySelfieConfig: config,
license: yourLicense,
{ filePath, error in
// handle
}
)
```
You will only either receieve the `filePath` or an `error`. One will be valid and the other will be `nil`.
#### Configuration
| Property | Default | Type | Description |
|---|
| width | 1080 | Int? | Target width (in pixels) of the captured image after processing. Image scales proportionally to maintain aspect ratio. |
### Result Callback
* After the image is capture or cancelled by the user, the callback method will be called.
* Result callback has 2 parameters as follow:
| Result | Description |
| -------- | -------------------------------------------------------------------------------------------------------------------- |
| filepath | If it is successful, image path will be returned, else nil will be returned. |
| error | If it is successful, the error will be nil, else it will contain the error that occurred during the image capturing. |
### Base64 Conversion
As long as you have imported `OkayCam` module, then you have access to the following function:
```swift
do {
let base64String = try convertImageToBase64(fileUrl: myImageFilePath)
print(base64String)
} catch {
print(error.localizedDescription)
}
```
{% endtab %}
{% tab title="React-Native" %}
### Usage
For React-native, this is an example for the face capture for the custom camera UI design as following:
`captureDocument(license, base64, config)`
To generate **base64** string as output, base64 parameter needs to be set as true.
```
import { captureSelfie } from "react-native-okaycam"
captureSelfie(
license,
{
topLabel: {
text: "Align you face within the frame",
color: "#4287f5",
size: 20
},
bottomFrameColor: "#4287f5",
captureBtnColor: "#ffffff",
switchBtnConfig: {
color: "#ffffff",
show: true
},
confirmBtnConfig: {
backgroundColor: "#4287f5",
contentColor: "#000000"
},
retakeBtnConfig: {
backgroundColor: "#4287f5",
contentColor: "#000000"
},
defaultCameraFacing: "front",
width: 1000,
imageQuality: 1.0
}
)
.then(result => {
console.log(result)
})
.catch(error => {
console.log(error)
})
```
### Configuration
There are some configurations object to be followed in the development stage. The configurations that are going to show below can be implemented into the **Usage** section above.
#### List of Possible Configurations
| - | Property Name | Description | Default Value |
| ---------------- | ------------------- | ----------------------------------------------------- | --------------------------------------- |
| - | width | width to resize the image | null |
| - | imageQuality | quality of image | 1.0 (range from 0 to 1.0) |
| topLabel | text | text of the top label | Please align your face within the frame |
| topLabel | color | color of the top label | #FFFFFF |
| topLabel | size | text size of the top label | 24 |
| - | bottomFrameColor | color of the bottom frame | #EB6709 |
| switchBtnConfig | color | color of the switch button | #FFFFFF |
| switchBtnConfig | show | show or hide the camera switch button | true |
| confirmBtnConfig | backgroundColor | background of the confirm button | #EB144C |
| confirmBtnConfig | contentColor | content color of the confirm button | #FFFFFF |
| retakeBtnConfig | backgroundColor | background of the retake button | #EB144C |
| retakeBtnConfig | contentColor | content color of the retake button | #FFFFFF |
| - | captureBtnColor | color of the capture button | #FFFFFF |
| - | defaultCameraFacing | Initial camera facing when the selfie cam is launched | CameraFacing.FRONT |
### Result
| Result | Description |
| ------------- | --------------------- |
| selfieImage | Captured selfie image |
| {% endtab %} | |
| {% endtabs %} | |
### User Interface Example
The OkayCam (face capture) camera user interface follows the design configurations from the above sections.
*Example:*
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://api2-ekycapis.innov8tif.com/okaycam-mobile-sdk/okaycam-mobile-sdk-all/development-guide-face-capture/development-guide-face-capture-for-v3.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.