# Development (Face Capture) {% tabs %} {% tab title="Android" %} ### Usage For Android, a selfie camera can be launched by invoking the **start** method on OkayCamSelfie with context, license key, config and callback method: * A License Key is required to start the SDK. ``` OkayCamSelfie.start(this,license_key, config) { success, images, 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). * The configuration object can be created and can be customised as following: ``` val config = OkaySelfieConfig.init(this) config.topLabel.text = "Top Label" ``` ### 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: ``` let config = OkaySelfieConfig(navigationController: nav) ``` * Start the process by calling **start** on **OkaySelfieCam** class. Similarly, the result can be handle in the completion handler. ``` OkayCamSelfie.start{ okaySelfieConfig: config, license: licenseKey, { filePath, error in // handle } } ``` * The response will only be the **\** or an **error.** One of them will be **valid** and the other one will be **nil**. ### Configuration The configuration object can be modified as follow: ``` let config = OkaySelfieConfig(navigationController: nav) config.topLabel.text = "top label text" config.topLabel.color = .green config.topLabel.size = 14 config.bottomFrameColor = .darkGray config.bottomBtnColor = .white config.switchBtnConfig.show = true config.switchBtnConfig.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) | ### 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 ``` 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, true, { 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 | 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 | | - | captureBtnColor | color of the capture button | #FFFFFF | | 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 | | - | 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:* ![Figure above shows the design of the custom camera UI for OkayCam (face capture)](/files/-M_-xzJaLT9XBmxBCjPw) --- # Agent Instructions: 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: ``` GET https://api-old.innov8tif.com/okaycam-mobile-sdk/development-face-capture.md?ask= ``` The question should be specific, self-contained, and written in natural language. 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.