radweb-react-native-camera

Radweb React Native Camera

This is the RadWeb extension of the react-native-camera.

Recently they removed several components that we required such as touch to focus and pinch to zoom. These have been re-implemented. Your millage may vary.

Any questions that are not answered here then please check out the original repo mentioned above. It is likely that these repos may fall out of sync.

Getting started

Permissions

To use the camera on Android you must ask for camera permission:

  <uses-permission android:name="android.permission.CAMERA" />

To enable video recording feature you have to add the following code to the AndroidManifest.xml:

  <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" />

Requirements

1. JDK >= 1.7 (if you run on 1.6 you will get an error on "_cameras = new HashMap<>();")
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:

<key>NSCameraUsageDescription</key>
<string>Your message to user when the camera is accessed for the first time</string>

<!-- Include this only if you are planning to use the camera roll -->
<key>NSPhotoLibraryUsageDescription</key>
<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>
<string>Your message to user when the microphone is accessed for the first time</string>

1. On Android, you require buildToolsVersion of 25.0.2+. This should easily and automatically be downloaded by Android Studio's SDK Manager.

2. 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’s photo library. Info.plist can be found in 'your_project/ios/your_project/Info.plist'. Add the following code:

<!-- 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>

Mostly automatic install with react-native

1. npm install radweb-react-native-camera --save
2. react-native link radweb-react-native-camera

Mostly automatic install with CocoaPods

1. npm install radweb-react-native-camera --save
2. Add the plugin dependency to your Podfile, pointing at the path where NPM installed it:

pod 'radweb=react-native-camera', path: '../node_modules/radweb-react-native-camera'

1. Run pod install

Manual install

iOS

1. npm install radweb-react-native-camera --save
2. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
3. Go to node_modules ➜ react-native-camera and add RNCamera.xcodeproj
4. Expand the RNCamera.xcodeproj ➜ Products folder
5. In XCode, in the project navigator, select your project. Add libRNCamera.a to your project's Build Phases ➜ Link Binary With Libraries
6. 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.

Face Detection or Text Recognition Steps

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.

No Face Detection steps

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.

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
echo "Creating project without FaceDetector"
if [ -e node_modules/radweb-react-native-camera/ios/FaceDetector ] ; then
  rm -rf node_modules/radweb-eact-native-camera/ios/FaceDetector
fi
cp node_modules/radweb-react-native-camera/postinstall_project/projectWithoutFaceDetection.pbxproj node_modules/react-native-camera/ios/RNCamera.xcodeproj/project.pbxproj

And add something like this to the scripts section in your package.json:

Note: The face detection code is excluded by default for the CocoaPods installation.

"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.

CocoaPods Path

1. Modify the dependency towards radweb-react-native-camera in your Podfile, from

pod 'radweb-react-native-camera', path: '../node_modules/radweb-react-native-camera'

to

pod 'radweb-react-native-camera', subspecs: ['RCT', 'RN', 'FaceDetector'], path: '../node_modules/radweb-react-native-camera'

1. Add the following to your Podfile:

  pod 'GoogleMobileVision/Detector', '~> 1.1.0'
  pod 'GoogleMobileVision/MVDataOutput', '~> 1.1.0'
  pod 'GoogleMobileVision/FaceDetector', '~> 1.1.0'

1. In XCode, On your target -> Build Phases -> Link Binary with Libraries -> add AddressBook.framework

Non-CocoaPods Path

1. Download: Google Symbol Utilities: https://www.gstatic.com/cpdc/dbffca986f6337f8-GoogleSymbolUtilities-1.1.1.tar.gz

   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

2. Extract everything to one folder. Delete "BarcodeDetector" and "copy" folders from Google Mobile Vision.

3. 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".

4. On your target -> Build Phases -> Link Binary with Libraries -> add AddressBook.framework

5. On your target -> Build Settings -> Other Linker Flags -> add -lz, -ObjC and -lc++

6. To force indexing and prevent errors, restart xcode and reopen your project again before compiling.

Android

1. npm install radweb-react-native-camera --save
2. Open up android/app/src/main/java/[...]/MainApplication.java

• Add import org.reactnative.camera.RNCameraPackage; to the imports at the top of the file
• Add new RNCameraPackage() to the list returned by the getPackages() method. Add a comma to the previous item if there's already something there.

1. Append the following lines to android/settings.gradle:

   include ':radweb-react-native-camera'
   project(':radweb-react-native-camera').projectDir = new File(rootProject.projectDir, 	'../node_modules/radweb-react-native-camera/android')
   

2. Insert the following lines inside the dependencies block in android/app/build.gradle:

   compile (project(':react-native-camera')) {
       exclude group: "com.google.android.gms"
       compile 'com.android.support:exifinterface:25.+'
       compile ('com.google.android.gms:play-services-vision:12.0.1') {
           force = true
       }
   }
   

You may need to use different exifinterface versions, e.g. 27.+ instead of 25.+.

1. Declare the permissions in your Android Manifest (required for video recording feature)

<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" />

1. Add jitpack to android/build.gradle

allprojects {
    repositories {
        maven { url "https://jitpack.io" }
        maven { url "https://maven.google.com" }
    }
}

The current Android library defaults to the below values for the Google SDK and Libraries,

def DEFAULT_COMPILE_SDK_VERSION             = 26
def DEFAULT_BUILD_TOOLS_VERSION             = "26.0.2"
def DEFAULT_TARGET_SDK_VERSION              = 26
def DEFAULT_GOOGLE_PLAY_SERVICES_VERSION    = "12.0.1"
def DEFAULT_SUPPORT_LIBRARY_VERSION         = "27.1.0"

You can override this settings by adding a Project-wide gradle configuration properties for use by all modules in your ReactNative project by adding the below to android/build.gradle file,

buildscript {...}

allprojects {...}

/**
* Project-wide gradle configuration properties for use by all modules
*/
ext {
    compileSdkVersion           = 26
    targetSdkVersion            = 26
    buildToolsVersion           = "26.0.2"
    googlePlayServicesVersion   = "12.0.1"
    supportLibVersion           = "27.1.0"
}

The above settings in the ReactNative project over-rides the values present in the react-native-camera module. For your reference below is the android/build.gradle file of the module.

buildscript {
...

def DEFAULT_COMPILE_SDK_VERSION             = 26
def DEFAULT_BUILD_TOOLS_VERSION             = "26.0.2"
def DEFAULT_TARGET_SDK_VERSION              = 26
def DEFAULT_GOOGLE_PLAY_SERVICES_VERSION    = "12.0.1"
def DEFAULT_SUPPORT_LIBRARY_VERSION         = "27.1.0"

android {
  compileSdkVersion rootProject.hasProperty('compileSdkVersion') ? rootProject.compileSdkVersion : DEFAULT_COMPILE_SDK_VERSION
  buildToolsVersion rootProject.hasProperty('buildToolsVersion') ? rootProject.buildToolsVersion : DEFAULT_BUILD_TOOLS_VERSION

  defaultConfig {
    minSdkVersion 16
    targetSdkVersion rootProject.hasProperty('targetSdkVersion') ? rootProject.targetSdkVersion : DEFAULT_TARGET_SDK_VERSION

    versionCode 1
    versionName "1.0.0"
  }
  lintOptions {
    abortOnError false
    warning 'InvalidPackage'
  }
}

...

dependencies {
  def googlePlayServicesVersion = rootProject.hasProperty('googlePlayServicesVersion')  ? rootProject.googlePlayServicesVersion : DEFAULT_GOOGLE_PLAY_SERVICES_VERSION
  def supportLibVersion = rootProject.hasProperty('supportLibVersion')  ? rootProject.supportLibVersion : DEFAULT_SUPPORT_LIBRARY_VERSION

  compile 'com.facebook.react:react-native:+'
  compile "com.google.zxing:core:3.2.1"
  compile "com.drewnoakes:metadata-extractor:2.9.1"
  compile 'com.google.android.gms:play-services-vision:$googlePlayServicesVersion'
  compile 'com.android.support:exifinterface:$supportLibVersion'

  compile 'com.github.react-native-community:cameraview:cc47bb28ed2fc54a8c56a4ce9ce53edd1f0af3a5'
}

Follow the Q & A section if you are having compilation issues.

Usage

RNCamera

This can be used identically to the implementation in react-native-camera and can be swapped out in place.