react-native-okaycamplus
v1.0.7
React-Native version of OkayCamPlus
0/weekUpdated 3 weeks agoMITUnpacked: 286.3 KB
Published by Innov8tif
react-native-okaycamplus
Requirements
$3
- minSdkVersion >= 26
$3
- iOS 15+
- Swift 5
Getting started
$ yarn add react-native-okaycamplus
$3
1. Navigate to android folder
2. Add following snippet in the root build.gradle file:
``
allprojects {
repositories {
maven {
url "https://innov8tif-okaycam.firebaseapp.com"
content {
includeGroup "com.innov8tif.iad"
}
}
}
}
3. Sync gradle
$3
1. Navigate to ios folder
2. Add the following code to Podfile
`
platform :ios, '15.0'
use_frameworks!
post_install do |installer|
installer.pods_project.targets.each do |target|
target.build_configurations.each do |config|
config.build_settings["EXCLUDED_ARCHS[sdk=iphonesimulator*]"] = "arm64"
config.build_settings["ONLY_ACTIVE_ARCH"] = "NO"
end
if target.name == "CryptoSwift"
puts "Enable module stability for CryptoSwift"
target.build_configurations.each do |config|
config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
end
end
end
end
`
3. Run command pod install
4. Add camera permission
#### Android Issue
Duplicate class org.hamcrest.xxx
If you encouter the errors above, you may exclude junit module.
`
configurations { compile.exclude group: "junit", module: "junit" }
#### iOS Issue
> Undefined symbol: \__swift_FORCE_LOAD_$\_swiftUniformTypeIdentifiers
> Undefined symbol: \__swift_FORCE_LOAD_$\_swiftCoreMIDI
If you encouter the errors above, you may create a new swift file called Void.swift without adding bridging header.
License
Apply licenses for Android and iOS SDKs
`
const license = Platform.select({
android: "",
ios: ""
})
OkayCam Document
$3
| - | 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 | #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 count down timer | #ffa500 |
| 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)
})
`
$3
| Result | Description |
| ------------------ | -------------------------------------------------------------------------------- |
| fullDocumentImage | Result of firstPhotoConfig |
| fullDocumentImage2 | Result of secondPhotoConfig. Will only return if secondPhotoConfig is configured |
OkayCam Selfie
$3
| - | Property name | Description | Default value |
| ---------------- | ------------------- | ----------------------------------------------------- | --------------------------------------- |
| | width | width to resize the image | null |
| - | imageQuality | quality of image | 1.0 (range from 0.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 |
| 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 |
| - | defaultCameraFacing | initial camera facing when the selfie cam is launched | CameraFacing.FRONT |
Usage
`
import { captureSelfie } from "react-native-okaycamplus"
captureSelfie(
license,
false,
{
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)
})
`
$3
| Result | Description |
| ----------- | --------------------- |
| selfieImage | Captured selfie image |
OkayCam Selfie Plus
Usage
`
import { captureSelfiePlus } from "react-native-okaycamplus"
captureSelfiePlus(
license,
false
)
.then(result => {
console.log(result)
})
.catch(error => {
console.log(error)
})
``
$3
| Result | Description |
| --------------------------------------------------- | --------------------------------------------------------------------------- |
| { selfie: selfie_image_path, bundle: base64String } | Captured selfie image path and encrypted bundle to pass to OkayFacePlus API |
Error Codes
| Error | Description |
| ------------------------ | ------------------------------------------------------------------------ |
| invalid license | The license is invalid |
| camera permission denied | The use did not grant the permission to access camera in order to do OCR |
| cancel | The user canceled during the scanning process |