2018-02-12 22:22:41 +00:00
# React Native Camera [](#backers) [](#sponsors) [](http://badge.fury.io/js/react-native-camera) [](https://www.npmjs.com/package/react-native-camera)
2015-04-01 01:04:18 +00:00
2018-02-12 09:51:54 +00:00
The comprehensive camera module for React Native. Including photographs, videos, face detection and barcode scanning!
2018-01-07 17:12:01 +00:00
`import { RNCamera, FaceDetector } from 'react-native-camera';`
2018-01-12 16:39:48 +00:00
#### How to use master branch?
Inside your package.json, use this
`"react-native-camera": "git+https://git@github.com/react-native-community/react-native-camera"`
2018-02-12 09:51:54 +00:00
instead of `"react-native-camera": "^1.0.0"` .
2018-02-03 12:47:16 +00:00
2017-06-02 19:00:36 +00:00
### Contributing
- Pull Requests are welcome, if you open a pull request we will do our best to get to it in a timely manner
- Pull Request Reviews and even more welcome! we need help testing, reviewing, and updating open PRs
- If you are interested in contributing more actively, please contact me (same username on Twitter, Facebook, etc.) Thanks!
2017-12-14 23:01:42 +00:00
- We are now on [Open Collective ](https://opencollective.com/react-native-camera#sponsor )! Contributions are appreciated and will be used to fund core contributors. [more details ](#open-collective )
2018-01-12 18:11:39 +00:00
- If you want to help us coding, join Expo slack https://slack.expo.io/, so we can chat over there. (#react-native-camera)
2016-02-24 18:59:59 +00:00
2017-03-07 06:11:59 +00:00
##### Permissions
2017-12-03 08:57:46 +00:00
To use the camera on Android you must ask for camera permission:
```java
< uses-permission android:name = "android.permission.CAMERA" / >
```
2017-03-07 06:11:59 +00:00
To enable `video recording` feature you have to add the following code to the `AndroidManifest.xml` :
2017-09-28 05:10:58 +00:00
```java
2017-03-07 06:11:59 +00:00
< uses-permission android:name = "android.permission.RECORD_AUDIO" / >
< uses-permission android:name = "android.permission.RECORD_VIDEO" / >
< uses-permission android:name = "android.permission.READ_EXTERNAL_STORAGE" / >
< uses-permission android:name = "android.permission.WRITE_EXTERNAL_STORAGE" / >
```
2017-01-23 03:39:36 +00:00
2015-04-24 17:52:00 +00:00
2018-02-12 09:51:54 +00:00
## Migrating from RCTCamera to RNCamera
2018-02-14 10:49:08 +00:00
See this [doc ](./docs/migration.md )
2018-02-12 09:51:54 +00:00
### RNCamera Docs
2018-02-14 10:49:08 +00:00
[RNCamera ](./docs/RNCamera.md )
2018-02-12 09:51:54 +00:00
### Docs old RCTCamera
2018-02-14 10:49:08 +00:00
[RCTCamera ](./docs/RCTCamera.md )
2018-02-12 09:51:54 +00:00
2015-04-01 01:02:57 +00:00
## Getting started
2016-09-13 09:08:25 +00:00
### Requirements
1. JDK >= 1.7 (if you run on 1.6 you will get an error on "_cameras = new HashMap< >();")
2018-01-04 03:07:14 +00:00
2. With iOS 10 and higher you need to add the "Privacy - Camera Usage Description" key to the Info.plist of your project. This should be found in 'your_project/ios/your_project/Info.plist'. Add the following code:
2016-11-18 22:42:03 +00:00
```
< key > NSCameraUsageDescription< / key >
2017-01-06 07:22:18 +00:00
< string > Your message to user when the camera is accessed for the first time< / string >
2016-11-29 01:15:42 +00:00
<!-- Include this only if you are planning to use the camera roll -->
2016-11-18 22:42:03 +00:00
< key > NSPhotoLibraryUsageDescription< / key >
2016-11-29 01:15:42 +00:00
< string > Your message to user when the photo library is accessed for the first time< / string >
<!-- Include this only if you are planning to use the microphone for video recording -->
< key > NSMicrophoneUsageDescription< / key >
2017-12-14 23:01:42 +00:00
< string > Your message to user when the microphone is accessed for the first time< / string >
2016-11-18 22:42:03 +00:00
```
2017-04-23 19:38:42 +00:00
3. On Android, you require `buildToolsVersion` of `25.0.2+` . _This should easily and automatically be downloaded by Android Studio's SDK Manager._
2016-09-13 09:08:25 +00:00
2017-10-15 10:16:02 +00:00
4. On iOS 11 and later you need to add `NSPhotoLibraryAddUsageDescription` key to the Info.plist. This key lets you describe the reason your app seeks write-only access to the user’
```
<!-- Include this only if you are planning to use the camera roll -->
< key > NSPhotoLibraryAddUsageDescription< / key >
< string > Your message to user when the photo library is accessed for the first time< / string >
```
2016-08-02 01:19:41 +00:00
### Mostly automatic install with react-native
2017-08-03 19:22:36 +00:00
1. `npm install react-native-camera --save`
2016-08-02 01:19:41 +00:00
3. `react-native link react-native-camera`
2015-04-01 01:02:57 +00:00
2016-07-02 19:01:43 +00:00
### Mostly automatic install with CocoaPods
2017-08-03 19:22:36 +00:00
1. `npm install react-native-camera --save`
2016-07-02 19:01:43 +00:00
2. Add the plugin dependency to your Podfile, pointing at the path where NPM installed it:
2017-09-28 05:10:58 +00:00
```obj-c
2016-07-02 19:01:43 +00:00
pod 'react-native-camera', path: '../node_modules/react-native-camera'
```
3. Run `pod install`
2016-01-25 03:36:29 +00:00
### Manual install
#### iOS
2017-08-03 19:22:36 +00:00
1. `npm install react-native-camera --save`
2015-04-03 22:59:25 +00:00
2. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`
2018-02-12 09:51:54 +00:00
3. Go to `node_modules` ➜ `react-native-camera` and add `RNCamera.xcodeproj`
4. In XCode, in the project navigator, select your project. Add `libRNCamera.a` to your project's `Build Phases` ➜ `Link Binary With Libraries`
5. Click `RNCamera.xcodeproj` in the project navigator and go the `Build Settings` tab. Make sure 'All' is toggled on (instead of 'Basic'). In the `Search Paths` section, look for `Header Search Paths` and make sure it contains both `$(SRCROOT)/../../react-native/React` and `$(SRCROOT)/../../../React` - mark both as `recursive` .
2015-04-01 01:02:57 +00:00
2018-02-12 09:51:54 +00:00
### Face Detection Steps
2018-01-26 20:33:31 +00:00
2018-03-21 03:38:28 +00:00
Face Detection is optional on iOS. If you want it, you are going to need to install Google Mobile Vision frameworks in your project, as mentioned in the next section.
2018-02-12 09:51:54 +00:00
##### No Face Detection steps
2018-01-26 20:33:31 +00:00
2018-03-21 03:38:28 +00:00
If you do not need it and do not want to install the GMV frameworks, open your app xcode project, on the Project Navigator, expand the RNCamera project, right click on the FaceDetector folder and delete it (move to trash, if you want). If you keep that folder and do not follow the GMV installation steps, your project will not compile.
2018-01-26 20:33:31 +00:00
2018-02-12 09:51:54 +00:00
If you want to make this automatic, you can add a postinstall script to your app `package.json` . Inside the `postinstall_project` there is a xcode project ready with the folder removed (we opened xcode, removed the folder from the project and copied the resulting project file). The post install script is:
```
#!/bin/bash
2018-02-14 10:39:02 +00:00
echo "Creating project without FaceDetector"
if [ -e node_modules/react-native-camera/ios/FaceDetector ] ; then
rm -rf node_modules/react-native-camera/ios/FaceDetector
fi
cp node_modules/react-native-camera/postinstall_project/projectWithoutFaceDetection.pbxproj node_modules/react-native-camera/ios/RNCamera.xcodeproj/project.pbxproj
2018-02-12 09:51:54 +00:00
```
2018-01-26 20:33:31 +00:00
2018-02-12 09:51:54 +00:00
And add something like this to the `scripts` section in your `package.json` :
2018-03-06 14:28:57 +00:00
*Note:* The face detection code is excluded by default for the **CocoaPods** installation.
2018-02-12 09:51:54 +00:00
```
"postinstall": "./scripts/post.sh",
```
##### Installing GMV frameworks
GMV (Google Mobile Vision) is used for Face detection by the iOS RNCamera. You have to link the google frameworks to your project to successfully compile the RNCamera project.
2018-01-23 16:49:57 +00:00
2018-03-06 14:28:57 +00:00
1. If using **CocoaPods** modify the dependency towards `react-native-camera` in your
`Podfile` , from
```
pod 'react-native-camera', path: '../node_modules/react-native-camera'
```
to
```
pod 'react-native-camera', subspecs: ['RCT', 'RN', 'FaceDetector'], path: '../node_modules/react-native-camera'
```
2. Download:
2018-01-23 16:49:57 +00:00
Google Symbol Utilities: https://www.gstatic.com/cpdc/dbffca986f6337f8-GoogleSymbolUtilities-1.1.1.tar.gz
2018-02-12 09:51:54 +00:00
Google Utilities: https://dl.google.com/dl/cpdc/978f81964b50a7c0/GoogleUtilities-1.3.2.tar.gz
Google Mobile Vision: https://dl.google.com/dl/cpdc/df83c97cbca53eaf/GoogleMobileVision-1.1.0.tar.gz
Google network Utilities: https://dl.google.com/dl/cpdc/54fd7b7ef8fd3edc/GoogleNetworkingUtilities-1.2.2.tar.gz
Google Interchange Utilities: https://dl.google.com/dl/cpdc/1a7f7ba905b2c029/GoogleInterchangeUtilities-1.2.2.tar.gz
2018-01-23 16:49:57 +00:00
2018-03-06 14:28:57 +00:00
3. Extract everything to one folder. Delete "BarcodeDetector" and "copy" folders from Google Mobile Vision.
2018-01-23 16:49:57 +00:00
2018-03-06 14:28:57 +00:00
4. Open XCode, right click on your project and choose "New Group". Rename the new folder to "Frameworks". Right click on "Frameworks" and select "add files to 'YOUR_PROJECT'". Select all content from the folder of step 2, click on Options. Select "Copy items if needed", leave "Create groups" selected and choose all your targets on the "Add to targets" section. Then, click on "Add".
2018-01-23 16:49:57 +00:00
2018-03-06 14:28:57 +00:00
5. On your target -> Build Phases -> Link Binary with Libraries -> add AddressBook.framework
6. On your target -> Build Settings -> Other Linker Flags -> add -lz, -ObjC and -lc++
2018-03-21 03:38:28 +00:00
7. To force indexing and prevent errors, restart xcode and reopen your project again before compiling.
2016-01-25 03:36:29 +00:00
#### Android
2017-08-03 19:22:36 +00:00
1. `npm install react-native-camera --save`
2016-09-13 03:30:02 +00:00
2. Open up `android/app/src/main/java/[...]/MainApplication.java
2018-02-12 11:43:48 +00:00
- Add `import org.reactnative.camera.RNCameraPackage;` to the imports at the top of the file
2018-02-12 09:51:54 +00:00
- Add `new RNCameraPackage()` to the list returned by the `getPackages()` method. Add a comma to the previous item if there's already something there.
2016-01-25 03:36:29 +00:00
3. Append the following lines to `android/settings.gradle` :
2017-09-28 05:10:58 +00:00
```gradle
2016-01-25 03:36:29 +00:00
include ':react-native-camera'
project(':react-native-camera').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-camera/android')
```
4. Insert the following lines inside the dependencies block in `android/app/build.gradle` :
2017-09-28 05:10:58 +00:00
```gradle
2018-02-12 09:51:54 +00:00
compile (project(':react-native-camera')) {
2018-03-14 10:09:00 +00:00
exclude group: "com.google.android.gms"
compile 'com.android.support:exifinterface:27.+'
}
2018-02-12 09:51:54 +00:00
compile ("com.google.android.gms:play-services-vision:10.2.0") {
2018-03-14 10:09:00 +00:00
force = true;
}
2016-01-25 03:36:29 +00:00
```
2017-03-07 06:11:59 +00:00
5. Declare the permissions in your Android Manifest (required for `video recording` feature)
2016-01-25 03:36:29 +00:00
2017-09-28 05:10:58 +00:00
```java
2017-02-27 19:27:06 +00:00
< uses-permission android:name = "android.permission.RECORD_AUDIO" / >
< uses-permission android:name = "android.permission.READ_EXTERNAL_STORAGE" / >
< uses-permission android:name = "android.permission.WRITE_EXTERNAL_STORAGE" / >
2017-01-25 19:58:46 +00:00
```
2016-01-25 03:36:29 +00:00
2018-01-08 18:57:53 +00:00
6. Add jitpack to android/build.gradle
```gradle
allprojects {
repositories {
maven { url "https://jitpack.io" }
}
}
```
2018-02-12 09:51:54 +00:00
Follow the [Q & A ](./docs/QA.md ) section if you are having compilation issues.
2015-05-30 16:36:55 +00:00
2018-02-12 09:51:54 +00:00
## Usage
2018-01-10 14:31:34 +00:00
2018-02-12 09:51:54 +00:00
### RNCamera
2018-01-17 18:10:55 +00:00
2018-02-12 09:51:54 +00:00
Take a look into this [documentation ](./docs/RNCamera.md ).
2018-01-10 14:31:34 +00:00
2018-02-12 09:51:54 +00:00
### RCTCamera
2018-01-17 18:10:55 +00:00
2018-02-12 09:51:54 +00:00
Since `1.0.0` , RCTCamera is deprecated, but if you want to use it, you can see its [documentation ](./docs/RCTCamera.md ).
2017-06-02 19:00:36 +00:00
## Open Collective
We are just beginning a funding campaign for react-native-camera. Contributions are greatly appreciated. When we gain more than $250 we will begin distributing funds to core maintainers in a fully transparent manner. Feedback for this process is welcomed, we will continue to evolve the strategy as we grow and learn more.
### Backers
2017-05-25 07:14:37 +00:00
Support us with a monthly donation and help us continue our activities. [[Become a backer ](https://opencollective.com/react-native-camera#backer )]
< a href = "https://opencollective.com/react-native-camera/backer/0/website" target = "_blank" > < img src = "https://opencollective.com/react-native-camera/backer/0/avatar.svg" > < / a >
< a href = "https://opencollective.com/react-native-camera/backer/1/website" target = "_blank" > < img src = "https://opencollective.com/react-native-camera/backer/1/avatar.svg" > < / a >
< a href = "https://opencollective.com/react-native-camera/backer/2/website" target = "_blank" > < img src = "https://opencollective.com/react-native-camera/backer/2/avatar.svg" > < / a >
< a href = "https://opencollective.com/react-native-camera/backer/3/website" target = "_blank" > < img src = "https://opencollective.com/react-native-camera/backer/3/avatar.svg" > < / a >
< a href = "https://opencollective.com/react-native-camera/backer/4/website" target = "_blank" > < img src = "https://opencollective.com/react-native-camera/backer/4/avatar.svg" > < / a >
< a href = "https://opencollective.com/react-native-camera/backer/5/website" target = "_blank" > < img src = "https://opencollective.com/react-native-camera/backer/5/avatar.svg" > < / a >
< a href = "https://opencollective.com/react-native-camera/backer/6/website" target = "_blank" > < img src = "https://opencollective.com/react-native-camera/backer/6/avatar.svg" > < / a >
< a href = "https://opencollective.com/react-native-camera/backer/7/website" target = "_blank" > < img src = "https://opencollective.com/react-native-camera/backer/7/avatar.svg" > < / a >
< a href = "https://opencollective.com/react-native-camera/backer/8/website" target = "_blank" > < img src = "https://opencollective.com/react-native-camera/backer/8/avatar.svg" > < / a >
< a href = "https://opencollective.com/react-native-camera/backer/9/website" target = "_blank" > < img src = "https://opencollective.com/react-native-camera/backer/9/avatar.svg" > < / a >
< a href = "https://opencollective.com/react-native-camera/backer/10/website" target = "_blank" > < img src = "https://opencollective.com/react-native-camera/backer/10/avatar.svg" > < / a >
< a href = "https://opencollective.com/react-native-camera/backer/11/website" target = "_blank" > < img src = "https://opencollective.com/react-native-camera/backer/11/avatar.svg" > < / a >
< a href = "https://opencollective.com/react-native-camera/backer/12/website" target = "_blank" > < img src = "https://opencollective.com/react-native-camera/backer/12/avatar.svg" > < / a >
< a href = "https://opencollective.com/react-native-camera/backer/13/website" target = "_blank" > < img src = "https://opencollective.com/react-native-camera/backer/13/avatar.svg" > < / a >
< a href = "https://opencollective.com/react-native-camera/backer/14/website" target = "_blank" > < img src = "https://opencollective.com/react-native-camera/backer/14/avatar.svg" > < / a >
< a href = "https://opencollective.com/react-native-camera/backer/15/website" target = "_blank" > < img src = "https://opencollective.com/react-native-camera/backer/15/avatar.svg" > < / a >
< a href = "https://opencollective.com/react-native-camera/backer/16/website" target = "_blank" > < img src = "https://opencollective.com/react-native-camera/backer/16/avatar.svg" > < / a >
< a href = "https://opencollective.com/react-native-camera/backer/17/website" target = "_blank" > < img src = "https://opencollective.com/react-native-camera/backer/17/avatar.svg" > < / a >
< a href = "https://opencollective.com/react-native-camera/backer/18/website" target = "_blank" > < img src = "https://opencollective.com/react-native-camera/backer/18/avatar.svg" > < / a >
< a href = "https://opencollective.com/react-native-camera/backer/19/website" target = "_blank" > < img src = "https://opencollective.com/react-native-camera/backer/19/avatar.svg" > < / a >
< a href = "https://opencollective.com/react-native-camera/backer/20/website" target = "_blank" > < img src = "https://opencollective.com/react-native-camera/backer/20/avatar.svg" > < / a >
< a href = "https://opencollective.com/react-native-camera/backer/21/website" target = "_blank" > < img src = "https://opencollective.com/react-native-camera/backer/21/avatar.svg" > < / a >
< a href = "https://opencollective.com/react-native-camera/backer/22/website" target = "_blank" > < img src = "https://opencollective.com/react-native-camera/backer/22/avatar.svg" > < / a >
< a href = "https://opencollective.com/react-native-camera/backer/23/website" target = "_blank" > < img src = "https://opencollective.com/react-native-camera/backer/23/avatar.svg" > < / a >
< a href = "https://opencollective.com/react-native-camera/backer/24/website" target = "_blank" > < img src = "https://opencollective.com/react-native-camera/backer/24/avatar.svg" > < / a >
< a href = "https://opencollective.com/react-native-camera/backer/25/website" target = "_blank" > < img src = "https://opencollective.com/react-native-camera/backer/25/avatar.svg" > < / a >
< a href = "https://opencollective.com/react-native-camera/backer/26/website" target = "_blank" > < img src = "https://opencollective.com/react-native-camera/backer/26/avatar.svg" > < / a >
< a href = "https://opencollective.com/react-native-camera/backer/27/website" target = "_blank" > < img src = "https://opencollective.com/react-native-camera/backer/27/avatar.svg" > < / a >
< a href = "https://opencollective.com/react-native-camera/backer/28/website" target = "_blank" > < img src = "https://opencollective.com/react-native-camera/backer/28/avatar.svg" > < / a >
< a href = "https://opencollective.com/react-native-camera/backer/29/website" target = "_blank" > < img src = "https://opencollective.com/react-native-camera/backer/29/avatar.svg" > < / a >
2017-06-02 19:00:36 +00:00
### Sponsors
2017-05-25 07:14:37 +00:00
Become a sponsor and get your logo on our README on Github with a link to your site. [[Become a sponsor ](https://opencollective.com/react-native-camera#sponsor )]
< a href = "https://opencollective.com/react-native-camera/sponsor/0/website" target = "_blank" > < img src = "https://opencollective.com/react-native-camera/sponsor/0/avatar.svg" > < / a >
< a href = "https://opencollective.com/react-native-camera/sponsor/1/website" target = "_blank" > < img src = "https://opencollective.com/react-native-camera/sponsor/1/avatar.svg" > < / a >
< a href = "https://opencollective.com/react-native-camera/sponsor/2/website" target = "_blank" > < img src = "https://opencollective.com/react-native-camera/sponsor/2/avatar.svg" > < / a >
< a href = "https://opencollective.com/react-native-camera/sponsor/3/website" target = "_blank" > < img src = "https://opencollective.com/react-native-camera/sponsor/3/avatar.svg" > < / a >
< a href = "https://opencollective.com/react-native-camera/sponsor/4/website" target = "_blank" > < img src = "https://opencollective.com/react-native-camera/sponsor/4/avatar.svg" > < / a >
< a href = "https://opencollective.com/react-native-camera/sponsor/5/website" target = "_blank" > < img src = "https://opencollective.com/react-native-camera/sponsor/5/avatar.svg" > < / a >
< a href = "https://opencollective.com/react-native-camera/sponsor/6/website" target = "_blank" > < img src = "https://opencollective.com/react-native-camera/sponsor/6/avatar.svg" > < / a >
< a href = "https://opencollective.com/react-native-camera/sponsor/7/website" target = "_blank" > < img src = "https://opencollective.com/react-native-camera/sponsor/7/avatar.svg" > < / a >
< a href = "https://opencollective.com/react-native-camera/sponsor/8/website" target = "_blank" > < img src = "https://opencollective.com/react-native-camera/sponsor/8/avatar.svg" > < / a >
< a href = "https://opencollective.com/react-native-camera/sponsor/9/website" target = "_blank" > < img src = "https://opencollective.com/react-native-camera/sponsor/9/avatar.svg" > < / a >
2015-04-01 01:02:57 +00:00
------------
Thanks to Brent Vatne (@brentvatne) for the `react-native-video` module which provided me with a great example of how to set up this module.
