# 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)](https://253651193-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LpQle72tz7-gm8Gk4Bg%2F-M_-xB1-os0NUUCIg-KS%2F-M_-xzJaLT9XBmxBCjPw%2Fokface.jpeg?alt=media\&token=3c7449ec-d4fc-4ab8-a6ca-82998ddc1897)