Development Guide (Document Capture)

OkayCam Document Capture

Configuration

-	Property Name	Description	Default Value
-	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	original width
-	imageQuality	quality of image	1.0 (range from 0.0 to 1.0)
frame	size	size of the frame (width and height)	90% of screen width and height is scaled proportionally according to card ratio
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	#ffffffsize
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	textColor	text color of the count down timer	#ffffff
confirmBtnConfig	backgroundColor	background color of the confirm button	#ffa500
confirmBtnConfig	contentColor	content color of the confirm button	#ffffff
retakeBtnConfig	backgroundColor	background color of the retake button	#ffa500
retakeBtnConfig	contentColor	content color of the retake button	#ffffff
	captureBtnColor	color of the capture button	#ffffff
	firstPhotoConfig	config for the first capture	delay:0s,onFlash:false,outputPath: null
	secondPhotoConfig	config for the second capture	null
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 caputre 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

import { captureDocument } from "react-native-okaycamplus"

captureDocument(
	license,
	false,
	{
		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',
      },
	  instruction: {
        title: {text: 'instr1', color: '#ffffff', size: 14},
        refImage1: {
          title: {text: 'ref1', color: '#ffffff', size: 14},
          img: require('./images/ref.png'),
        },
        refImage2: {
          title: {text: 'ref2', color: '#ffffff', size: 14},
          img: require('./images/ref.png'),
        },
      },
	  showPreviewInstruction: false,
	}
)
	.then(result => {
		console.log(result)
	})
	.catch(error => {
		console.log(error)
	})

Results

Result	Description
fullDocumentImage	Result of firstPhotoConfig
fullDocumentImage2	Result of secondPhotoConfig. Will only return if secondPhotoConfig is configured