# 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):*
*Example 2 (with flash):*
*Example 3 (with frame content):*
