React Native Document Scanner (iOS only)
Live document detection library. Returns either a URI or a base64 encoded string of the captured image, allowing you to easily store it or use it as you wish !
Features :
- Live detection
- Perspective correction and crop of the image
- Live camera filters (brightness, saturation, contrast)
- Flash
- Easy to use base64 image
#### Can be easily plugged with react-native-perspective-image-cropper
Getting started
Use version >=1.4.1 if you are using react-native 0.48+
$ npm install react-native-document-scanner --save
$ react-native link react-native-document-scanner
Edit the info.plist
file in XCode and add the following permission : NSCameraUsageDescription
Remember, this library uses your device camera, you can't run it on a simulator.
With Cocoapods
If you want to use Cocoapods insteads of react-native link
, add the following to your Podfile
pod 'RNPdfScanner', :path => '../node_modules/react-native-document-scanner/ios'
Usage
;; ; { return <View> <DocumentScanner useBase64 onPictureTaken= this overlayColor="rgba(255,130,0, 0.7)" enableTorch=false brightness=03 saturation=1 contrast=11 quality=05 onRectangleDetect= this detectionCountBeforeCapture=5 detectionRefreshRateInMS=50 /> <Image source= uri: `data:image/jpeg;base64,` resizeMode="contain" /> </View> ; }
Properties
Prop | Default | Type | Description |
---|---|---|---|
overlayColor | none |
string |
Color of the detected rectangle : rgba recommended |
detectionCountBeforeCapture | 5 |
integer |
Number of correct rectangle to detect before capture |
detectionRefreshRateInMS | 50 |
integer |
Time between two rectangle detection attempt |
enableTorch | false |
bool |
Allows to active or deactivate flash during document detection |
useFrontCam | false |
bool |
Allows you to switch between front and back camera |
brightness | 0 |
float |
Increase or decrease camera brightness. Normal as default. |
saturation | 1 |
float |
Increase or decrease camera saturation. Set 0 for black & white |
contrast | 1 |
float |
Increase or decrease camera contrast. Normal as default |
quality | 0.8 |
float |
Image compression. Reduces both image size and quality |
useBase64 | false |
bool |
If base64 representation should be passed instead of image uri's |
captureMultiple | false |
bool |
Keeps the scanner on after a successful capture |
Manual capture
- First get component ref
<DocumentScanner ref= thisscanner = ref />
- Then call :
thisscanner;
Each rectangle detection
Props | Params | Type | Description |
---|---|---|---|
onRectangleDetect | { stableCounter, lastDetectionType } |
object |
See below |
The returned object includes the following keys :
stableCounter
Number of correctly formated rectangle found (this number triggers capture once it goes above detectionCountBeforeCapture
)
lastDetectionType
Enum (0, 1 or 2) corresponding to the type of rectangle found 0. Correctly formated rectangle
- Wrong perspective, bad angle
- Too far
Returned image
Prop | Params | Type | Description |
---|---|---|---|
onPictureTaken | data |
object |
Returns the captured image in an object { croppedImage: ('URI or BASE64 string'), initialImage: 'URI or BASE64 string', rectangleCoordinates: 'object of coordinates' } |
If you prefer manual installation
- In XCode, in the project navigator, right click
Libraries
➜Add Files to [your project's name]
- Go to
node_modules
➜react-native-pdf-scanner
and addRNPdfScanner.xcodeproj
- In XCode, in the project navigator, select your project. Add
libRNPdfScanner.a
to your project'sBuild Phases
➜Link Binary With Libraries
- Run your project (
Cmd+R
)<
Credits
This repo is a React Native implementation of the following native library : https://github.com/mmackh/IPDFCameraViewController Special thank to Mark Peysale :)