Development Guide (Document Capture)

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

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:

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:

Base64 Conversion

import com.innov8tif.okaycam.utils.BitmapUtils;

String result = BitmapUtils.INSTANCE.convertToBase64(image);

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 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
        config.imageQuality = 1.0

        let label = OkayCamLabelConfig(text: "Label", color: UIColor.red, size: 14)
        let refImag = URL(fileURLWithPath: Bundle.main.path(forResource: "image", ofType: "svg")!)

        config.preview = OkayCamPreviewConfig(title: label, refImage: refImag, instruction1: label, instruction2: label, instruction3: label, 
                        backgroundColor: UIColor.black)

List of Possible Configurations:

Properties on OkayCamConfig:

Property

Type

Default Value

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:

Base64 Conversion

do {
    let base64String = try convertImageToBase64(fileUrl: myImageFilePath)
    print(base64String)
} catch  {
    print(error.localizedDescription)
}

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

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

Result

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

OkayCam Demo Preview

PreviousInstallation Guide NextDevelopment Guide (Face Capture)

Last updated 9 months ago