> 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
This page contains the information of Usage, Configuration, Result of OkayCam for Android, iOS and React-native in Face Capture
{% tabs %}
{% tab title="Android" %}
### Usage - Auto Face Capture
* Selfie camera can be launched by invoking **start** method on Activity with context,config and callback method as follow
* Config object is optional if you call from Kotlin (refer to Configuration for more info)
* After the image is captured or the user cancel, the callback method will be called (refer result)
```
OkayCamAutoSelfieConfig.start(this, LICENSE_KEY, config) { success, image, exception ->
// do something with the result
}
```
### Configuration
* 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 = OkayCamAutoSelfieConfig.init()
config.width = 1080
```
### 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 | 1090 |
| motion | Enables action required for the selfie liveness feature. false will remove the action motion required. | false |
{% 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:
| Params | Possible Value |
| --------- | ----------------------------------------------------------------------------------------------------------------------------- |
| 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. |
### Error
| Error | Description |
| -------------------------------- | ---------------------------------------------------- |
| Invalid license key | The license is invalid |
| User refused to grant permission | The user does not grant the camera access permission |
| User cancelled the activity | The user has cancelled the scanning process |
### 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
config.motion = true // Default
```
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
}
)mo
```
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. |
| motion | true | Bool | Enables action required for selfie liveness feature. False will remove the action motion required. |
### 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:*
