Development (Document Capture)

This page contains the information of Usage, Configuration, Result of OkayCam for Android, iOS and React-native in Document Capture

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.

• 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

If there is no value is set for properties, default values will be implied.

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);

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)

The configuration object is initialized with default values.

• 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)
}

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

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)

Example 3 (with frame content):

Figure above shows the UI design of OkayCam (with frame content)