Development Guide (Face Capture)

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

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.

• 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

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:

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

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

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

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

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)