# Development (Document Capture) {% tabs %} {% tab title="Android" %} ### Usage For Android, the Camera can be launched by invoking the **start** method on OkayCameraActivity with context, license key, config and callback method as follow: * A License Key is required to start the SDK. ``` OkayCamDoc.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 customized as the code below: ``` val config = OkayCamConfig.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** | | ---------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | | - | crop | crop the frame area | false | | - | width | width to resize the image | null | | - | torchBtnEnabled | to show torch button. If set to true, it will only be shown if onFlash from captureConfig is set to false. | false | | - | imageQuality | quality of the image | 1.0f (range from 0 to 1.0) | | topLabel | text | text of the top label | " "(empty string) | | topLabel | color | color of the top label | #FFFFFF | | topLabel | size | text size of the top label | 24 | | bottomLabel | text | text of the bottom label | " "(empty string) | | bottomLabel | color | color of the bottom label | #FFFFFF | | bottomLabel | size | text size of the bottom label | 24 | | frame | size | size of the camera overlay frame | null | | frame | color | color of the camera overlay frame | #FFFFFF | | frame | content | content of the camera overlay frame (able to display vector drawable within the frame for guidance) | null (drawable id / file path) | | - | showOverlay | transparent black background for camera overlay | true | | timer | backgroundColor | background of the count down timer | #662196F3 | | timer | textColor | text color of the count down timer | #FFFFFF | | - | 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 | | captureConfig | first |

config for the first capture

delay: countdown before capture

onFlash: enable/disable flash

outputPath: desired output image path

|

delay:0s,
onFlash:false,
outputPath: null

| | captureConfig | second |

config for the second capture

delay: countdown before capture

onFlash: enable/disable flash

outputPath: desired output image path

|

delay:5s,
onFlash:true,
outputPath: null

| {% 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: | Result | Description | | --------- | ----------------------------------------------------------------------------------------------------------------------------- | | 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 of 2 images in a list of format, 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, it can start by importing the **OkayCam module** into the swift file. ``` import OkayCam ``` * The configuration object must be instantiated and a reference must be passed into the view controller. ``` let config = OkayCamConfig(viewController: viewController) ``` {% hint style="info" %} The configuration object is initialized with default values. {% endhint %} * Start the process by calling start on OkayCam class. The result can be handle in the completion handler. ``` OkayCamDoc.start( okayCamConfig: config, license: licenseKey, { filePaths, error in // handle } } ``` * The received result will either be a filePath or an error. One will be valid and the other will be NIL. ### Configuration The configuration object will need to be modified as follow: ``` let config = OkayCamConfig(viewController: nav) config.topLabel.text = "top label text" config.topLabel.color = .green config.topLabel.size = 14 config.bottomLabel.text = "bottom label text" config.bottomLabel.color = .systemPink config.bottomLabel.size = 20 config.frame.size = CGSize(width: 210, height: 150) config.frame.color = .orange config.frame.content = URL(fileURLWithPath: Bundle.main.path(forResource: "card", ofType: "svg")!) config.showOverlay = false config.imageQuality = 1.0 config.timer.backgroundColor = .magenta config.timer.textColor = .systemTeal config.captureBtnColor - .white config.confirmBtnConfig.backgroundColor = .blue config.confirmBtnConfig.contentColor = .orange config.retakeBtnConfig.backgroundColor = .orange config.retakeBtnConfig.contentColor = .blue config.torchBtnEnabled = false config.captureConfigPair = CaptureConfigPair( firstPhoto: OkayCamCaptureConfig( timeOut: 2, onFlash: false, outputPath: myCustomFilePath ), secondPhoto: OkayCamCaptureConfig( timeOut: 1, onFlash: false, outputPath: myCustomFilePath ) ) config.crop = true config.width = 250 ``` #### List of Possible Configurations | Property | Type | Default Value | | ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | topLabel | OkayCamLabelConfig | OkayCamLabelConfig(text: "Tap to focus", color: UIColor.white, size: CGFloat(24)) | | bottomLabel | OkayCamLabelConfig | OkayCamLabelConfig(text: "Please align ID card within frame", color: UIColor.white, size: CGFloat(24)) | | frame | OkayCamFrameConfig | OkayCamFrameConfig(size: CGSize(width: 210, height: 150), color: .orange, content: URL(fileURLWithPath: Bundle.main.path(forResource: "card", ofType: "svg")!)) | | showOverlay | Bool | true | | timer | OkayCamTimerConfig | OkayCamTimerConfig(backgroundColor: UIColor.black, textColor: UIColor.white) | | 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

)

| | torchBtnEnabled | Bool | false | | captureConfigPair | CaptureConfigPair | CaptureConfigPair(firstPhoto: OkayCamCaptureConfig(timeOut: 0, onFlash: false, outputPath: nil), secondPhoto: nil) | | crop | Bool | false | | 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 | | --------- | -------------------------------------------------------------------------------------------------------------------- | | filepaths | If it is successful, images will contain the file path of 2 images in a list of format, else it will return nil. | | 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 document 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 { captureDocument } from "react-native-okaycam" captureDocument( license, true, { topLabel: { text: "Align your card within the frame", color: "#4287f5", size: 20 }, bottomLabel: { text: "Tap to Focus", color: "#4287f5", size: 20 }, frame: { size: { width: 1000, height: 300, }, color: "#4287f5", content: require('./images/card.svg') }, showOverlay: false, timer: { backgroundColor: "#4287f5", textColor: "#ffffff" }, captureBtnColor: "#4287f5", confirmBtnConfig: { backgroundColor: "#4287f5", contentColor: "#ffffff" }, retakeBtnConfig: { backgroundColor: "#4287f5", contentColor: "#ffffff" }, torchBtnEnabled: false, firstPhotoConfig: { timeOut: 0, onFlash: false, outputPath: null }, secondPhotoConfig: { timeOut: 5, onFlash: true, outputPath: null }, crop: true, 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 | | ---------------- | ----------------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- | | - | crop | crop the frame area | false | | - | width | width to resize the image | -1 | | - | torchBtnEnabled | to show torch button. If set to true, it will only be shown if onFlash from captureConfig is set to false. | false | | - | imageQuality | quality of image | 1.0 (range from 0 to 1.0) | | frame | size | size of the frame (width and height) | 90% of width and height is scaled proportionally to card size | | frame | color | color of the frame | #FFFFFF | | frame | content | content of the frame (able to display svg file within the frame for guidance) | null | | - | showOverlay | transparent black overlay | true | | topLabel | text | text of the top label | "" (empty string) | | topLabel | color | color of the top label | #FFFFFF | | topLabel | size | text size of the top label | 20 | | bottomLabel | text | text of the bottom label | "" (empty string) | | bottomLabel | color | color of the bottom label | #FFFFFF | | bottomLabel | size | text size of the bottom label | 20 | | timer | backgroundColor | background of the countdown timer | #FFA500 | | timer | textColor | text color of the countdown timer | #FFFFFF | | - | 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 | | | firstPhotoConfig | config for the first capture |

delay:0s,onFlash:false,

outputPath: null

| | | secondPhotoConfig | config for the second capture | null | ### Result | Result | Description | | ------------------ | -------------------------------------------------------------------------------- | | fullDocumentImage | Result of firstPhotoConfig | | fullDocumentImage2 | Result of secondPhotoConfig. Will only return if secondPhotoConfig is configured | | {% endtab %} | | | {% endtabs %} | | ### User Interface Example The OkayCam contains two different user interface, one will be with flash and another one without flash. The only difference between these two user interfaces is one **contains a timer** (with flash) and the other one **does not contain a timer** (without flash) on the screen. *Example 1 (without flash):* ![Figure above shows the UI design of OkayCam (without flash)](/files/-MkF_PQaiIhP3-CzbHEo) *Example 2 (with flash):* ![Figure above shows the UI design of OkayCam (with flash)](/files/-MkF__XR2pHZXdyD8yyr) *Example 3 (with frame content):* ![Figure above shows the UI design of OkayCam (with frame content)](/files/-MkFa49skcGQ8SWbq5qS) --- # 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-document-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.