> 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-document-capture/development-guide-document-capture-for-v1-and-v2.md). # Development Guide (Document Capture) for V1 and V2 {% tabs %} {% tab title="Android" %} ### Usage * Camera can be launched by invoking start method on OkayCameraActivity 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 Callback](#result-callback)) * 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: * if no value is set for properties, default values will be implied ``` 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

onImageQuality: enable/disable image quality check
outputPath: desired output image path

|

SDK Version 2.x.x

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

SDK Version 1.x.x

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

| | captureConfig | second |

config for the second capture

delay: countdown before capture

onFlash: enable/disable flash

onImageQuality: enable/disable image quality check
outputPath: desired output image path

|

SDK Version 2.x.x

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

SDK Version 1.x.x

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

| | preview | title | ref image on preview screen | ""(empty string) | | preview | reflmg | ref image on preview screen | null | | preview | instruction1 | instruction on preview screen | ""(empty string) | | preview | instruction2 | instruction on preview screen | ""(empty string) | | preview | instruction3 | instruction on preview screen | ""(empty string) | | preview | backgrounColor | background color of preview screen | null | | instruction | title | Instruction's title on camera capture screen | ""(empty string) | | instruction | refImage1 | Instruction's reference image 1 | null | | instruction | refImage2 | Instruction's reference image 2 | null | | | showPreviewInstruction | Show or hide preview instruction for captured photos | 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:
ResultDescription
ResultDescription
SuccessIt will be true if the image is captured successfully, else it will return false.
ImagesIf it is successful, images will contain the file path of 2 images in a list of format, else it will return null.
ExceptionIf 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 ``` ### Document Capture * The configuration object must be instantiated and a reference must be passed into the navigation controller. ``` let config = OkayCamConfig(navigationController: nav) ``` {% hint style="info" %} The configuration object is initialized with default values. {% endhint %} * Start the process by calling `start` on `OkayCamDoc` class. You can handle the result in the completion handler. ``` OkayCamDoc.start( okayCamConfig: config, license: yourLicense, { filePaths, error in // handle } ) ``` * You will only either receieve `filePaths` or an `error`. One will be valid and the other will be `nil`. ### Configuration The configuration object will need to be modified as follow: ```swift let config = OkayCamConfig(navigationController: 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.color = .blue config.frame.size = CGSize(width: 230, height: 100) config.frame.content = URL(fileURLWithPath: Bundle.main.path(forResource: "image", ofType: "svg")!) config.showOverlay = false config.timer.backgroundColor = .magenta config.timer.textColor = .systemTeal config.captureBtnColor = .white config.torchBtnEnabled = false config.confirmBtnConfig.backgroundColor = .blue config.confirmBtnConfig.contentColor = .black config.retakeBtnConfig.backgroundColor = .orange config.retakeBtnConfig.contentColor = .black config.captureConfigPair = CaptureConfigPair( firstPhoto: OkayCamCaptureConfig( timeOut: 2, onFlash: false, onImageQuality: false, // Required for SDK >= 2.0.0 outputPath: myCustomFilePath ), secondPhoto: OkayCamCaptureConfig( timeOut: 1, onFlash: false, onImageQuality: false, // Required for SDK >= 2.0.0 outputPath: myCustomFilePath ) ) config.crop = true config.width = 250 config.imageQuality = 1.0 config.autoCapture = true ``` #### List of Possible Configurations (Only applicable for Manual Capture) : Properties on `OkayCamConfig`: | 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 |

SDK Version 2.x.x

CaptureConfigPair(firstPhoto: OkayCamCaptureConfig(timeOut: 0, onFlash: false, onImageQuality: true, outputPath: MY\_CUSTOM\_FILE\_PATH), secondPhoto: OkayCamCaptureConfig(timeOut: 5, onFlash: true,onImageQuality: false, outputPath: MY\_CUSTOM\_FILE\_PATH))

SDK Version 1.x.x

CaptureConfigPair(firstPhoto: OkayCamCaptureConfig(timeOut: 0, onFlash: false, outputPath: MY\_CUSTOM\_FILE\_PATH), secondPhoto: OkayCamCaptureConfig(timeOut: 5, onFlash: true, outputPath: MY\_CUSTOM\_FILE\_PATH))

| | crop | Bool | false | | width | Int | nil | | frameSize | CGSize? | nil | | imageQuality | CGFloat | 1.0 (range from 0 to 1.0) | | preview\.title | OkayCamLabelConfig | OkayCamLabelConfig(text: "Title", color: UIColor.white, size: CGFloat(24)) | | preview\.refImg | URL | URL(fileURLWithPath: Bundle.main.path(forResource: "", ofType: "")!) | | preview\.instruction1 | OkayCamLabelConfig | OkayCamLabelConfig(text: "Instruction 1", color: UIColor.white, size: CGFloat(24)) | | preview\.instruction2 | OkayCamLabelConfig | OkayCamLabelConfig(text: "Instruction 2", color: UIColor.white, size: CGFloat(24)) | | preview\.instruction3 | OkayCamLabelConfig | OkayCamLabelConfig(text: "Instruction 3", color: UIColor.white, size: CGFloat(24)) | | preview\.backgroundColor | UIColor | UIColor.black | | instruction.title | OkayCamLabelConfig | OkayCamLabelConfig(text: "Title", color: UIColor.white, size: CGFloat(24)) | | instruction.refImage1 | OkaycamInstructionRefImg | OkaycamInstructionRefImg(title: "", img: URL(fileURLWithPath: Bundle.main.path(forResource: "", ofType: "svg")!)) | | instruction.refImage2 | OkaycamInstructionRefImg | OkaycamInstructionRefImg(title: "", img: URL(fileURLWithPath: Bundle.main.path(forResource: "", ofType: "svg")!)) | ### 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 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" %} ### 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 | - | torchBtnEnabled | to show torch button. If set to true, it will only be shown if onFlash from captureConfig is set to false. | false | | ------------------------------------------------------- | ---------------------- | ---------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | | - | crop | crop the frame area | false | | - | width | width to resize the image | -1 | | - | 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 | | 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 | | **SDK Version 1.x.x** | firstPhotoConfig | config for the first capture |

delay:0s,onFlash:false,

outputPath: null

| | **SDK Version 1.x.x** | secondPhotoConfig | config for the second capture | null | | **SDK Version 2.x.x** | firstPhotoConfig | config for the first capture | delay:0s, onFlash:false, outputPath: null, onImageQuality: true | | **SDK Version 2.x.x** | secondPhotoConfig | config for the second capture | delay:0s, onFlash:false, outputPath: null, onImageQuality: false | | preview | title | title on preview screen | ""(empty string) | | preview | refImg | ref image on preview screen | null | | preview | instruction1 | instruction on preview screen | ""(empty string) | | preview | instruction2 | instruction on preview screen | ""(empty string) | | preview | instruction3 | instruction on preview screen | ""(empty string) | | preview | backgroundColor | background color of preview screen | null | | instruction **New** | title | Instruction's title on camera capture screen | ""(empty string) | | instruction **New** | refImage1 | Instruction's reference image 1 | null | | instruction **New** | refImage2 | Instruction's reference image 2 | null | | - | showPreviewInstruction | Show or hide preview instruction for captured photos | false | ### 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, { 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/content.svg') }, showOverlay: true, timer: { backgroundColor: "#4287f5", textColor: "#ffffff" }, torchBtnEnabled: true, confirmBtnConfig: { backgroundColor: "#4287f5", contentColor: "#000000" }, retakeBtnConfig: { backgroundColor: "#4287f5", contentColor: "#000000" }, captureBtnColor: "#4287f5", firstPhotoConfig: { delay: 0, onFlash: false, outputPath: null }, secondPhotoConfig: { delay: 5, onFlash: true, outputPath: null }, crop: true, width: 2000, imageQuality: 1.0, preview: { title: {text: 'testing', color: '#000000', size: 25}, refImage: require('./images/ref.png'), instruction1: {text: 'instr1', color: '#000000', size: 14}, instruction2: {text: 'instr2', color: '#000000', size: 14}, instruction3: {text: 'instr3', color: '#000000', size: 14}, backgroundColor: '#374fff', } } ) .then(result => { console.log(result) }) .catch(error => { console.log(error) }) ``` {% endtab %} {% endtabs %} ### Result | fullDocumentImage | Result of firstPhotoConfig | | ------------------ | -------------------------------------------------------------------------------- | | fullDocumentImage2 | Result of secondPhotoConfig. Will only return if secondPhotoConfig is configured | ### 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)
*Example 2 (with flash):* ![Figure above shows the UI design of OkayCam (with flash)](/files/LjUDHIXaYinU4P5Oy99Q) *Example 3 (with frame content):* ![Figure above shows the UI design of OkayCam (with frame content)](/files/PewkBx5QhRMCXzrWromk) ### OkayCam Demo Preview ( V1 and V2)
--- # 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-document-capture/development-guide-document-capture-for-v1-and-v2.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.