Skip to content

Latest commit

 

History

History
601 lines (426 loc) · 30.4 KB

RNCamera.md

File metadata and controls

601 lines (426 loc) · 30.4 KB
Raw

RNCamera

Usage

All you need is to import { RNCamera } from the react-native-camera module and then use the <RNCamera/> tag.

'use strict';
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  TouchableOpacity,
  View
} from 'react-native';
import { RNCamera } from 'react-native-camera';

class BadInstagramCloneApp extends Component {
  render() {
    return (
      <View style={styles.container}>
        <RNCamera
            ref={ref => {
              this.camera = ref;
            }}
            style = {styles.preview}
            type={RNCamera.Constants.Type.back}
            flashMode={RNCamera.Constants.FlashMode.on}
            permissionDialogTitle={'Permission to use camera'}
            permissionDialogMessage={'We need your permission to use your camera phone'}
            onGoogleVisionBarcodesDetected={({ barcodes }) => {
              console.log(barcodes)
            }}
        />
        <View style={{flex: 0, flexDirection: 'row', justifyContent: 'center',}}>
        <TouchableOpacity
            onPress={this.takePicture.bind(this)}
            style = {styles.capture}
        >
            <Text style={{fontSize: 14}}> SNAP </Text>
        </TouchableOpacity>
        </View>
      </View>
    );
  }

  takePicture = async function() {
    if (this.camera) {
      const options = { quality: 0.5, base64: true };
      const data = await this.camera.takePictureAsync(options)
      console.log(data.uri);
    }
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: 'black'
  },
  preview: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center'
  },
  capture: {
    flex: 0,
    backgroundColor: '#fff',
    borderRadius: 5,
    padding: 15,
    paddingHorizontal: 20,
    alignSelf: 'center',
    margin: 20
  }
});

AppRegistry.registerComponent('BadInstagramCloneApp', () => BadInstagramCloneApp);

FaCC (Function as Child Components)

*You can also use it with Facc.

 'use strict';
import React, { Component } from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { RNCamera } from 'react-native-camera';

const PendingView = () => (
  <View
    style={{
      flex: 1,
      backgroundColor: 'lightgreen',
      justifyContent: 'center',
      alignItems: 'center',
    }}
  >
    <Text>Waiting</Text>
  </View>
);

class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <RNCamera
          style={styles.preview}
          type={RNCamera.Constants.Type.back}
          flashMode={RNCamera.Constants.FlashMode.on}
          permissionDialogTitle={'Permission to use camera'}
          permissionDialogMessage={'We need your permission to use your camera phone'}
        >
          {({ camera, status }) => {
            if (status !== 'READY') return <PendingView />;
            return (
              <View style={{ flex: 0, flexDirection: 'row', justifyContent: 'center' }}>
                <TouchableOpacity onPress={() => this.takePicture(camera)} style={styles.capture}>
                  <Text style={{ fontSize: 14 }}> SNAP </Text>
                </TouchableOpacity>
              </View>
            );
          }}
        </RNCamera>
      </View>
    );
  }

  takePicture = async function(camera) {
    const options = { quality: 0.5, base64: true };
    const data = await camera.takePictureAsync(options);
    //  eslint-disable-next-line
    console.log(data.uri);
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: 'black',
  },
  preview: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  capture: {
    flex: 0,
    backgroundColor: '#fff',
    borderRadius: 5,
    padding: 15,
    paddingHorizontal: 20,
    alignSelf: 'center',
    margin: 20,
  },
});

AppRegistry.registerComponent('BadInstagramCloneApp', () => App);

camera

It's the RNCamera's reference

status

'READY' | 'PENDING_AUTHORIZATION' | 'NOT_AUTHORIZED'

Properties

autoFocus

Values: RNCamera.Constants.AutoFocus.on (default) or RNCamera.Constants.AutoFocus.off

Most cameras have a Auto Focus feature. It adjusts your camera lens position automatically depending on the pixels seen by your camera.

Use the autoFocus property to specify the auto focus setting of your camera. RNCamera.Constants.AutoFocus.on turns it ON, RNCamera.Constants.AutoFocus.off turns it OFF.

iOS autoFocusPointOfInterest

Values: Object { x: 0.5, y: 0.5 }.

Setting this property causes the auto focus feature of the camera to attempt to focus on the part of the image at this coordiate.

Coordinates values are measured as floats from 0 to 1.0. { x: 0, y: 0 } will focus on the top left of the image, { x: 1, y: 1 } will be the bottom right. Values are based on landscape mode with the home button on the right—this applies even if the device is in portrait mode.

captureAudio

Values: true (Boolean), false (default)

Specifies whether or not audio should be captured with the video. If true, app will request for microphone permission along with video permission.

flashMode

Values: RNCamera.Constants.FlashMode.off (default), RNCamera.Constants.FlashMode.on, RNCamera.Constants.FlashMode.auto or RNCamera.Constants.FlashMode.torch.

Specifies the flash mode of your camera.

RNCamera.Constants.FlashMode.off turns it off.

RNCamera.Constants.FlashMode.on means camera will use flash in all photos taken.

RNCamera.Constants.FlashMode.auto leaves your phone to decide when to use flash when taking photos, based on the lightning conditions that the camera observes.

RNCamera.Constants.FlashMode.torch turns on torch mode, meaning the flash light will be turned on all the time (even before taking photo) just like a flashlight.

focusDepth

Value: float from 0 to 1.0

Manually set camera focus. Only works with autoFocus off. The value 0 is minimum focus depth, 1 is maximum focus depth. For a medium focus depth, for example, you could use 0.5.

Android ratio

A string representing the camera ratio in the format 'height:width'. Default is "4:3".

Use getSupportedRatiosAsync method to get ratio strings supported by your camera on Android.

type

Values: RNCamera.Constants.Type.front or RNCamera.Constants.Type.back (default)

Use the type property to specify which camera to use.

whiteBalance

Values: RNCamera.Constants.WhiteBalance.sunny, RNCamera.Constants.WhiteBalance.cloudy, RNCamera.Constants.WhiteBalance.shadow, RNCamera.Constants.WhiteBalance.incandescent, RNCamera.Constants.WhiteBalance.fluorescent or RNCamera.Constants.WhiteBalance.auto (default)

A camera’s white balance setting allows you to control the color temperature in your photos by cooling down or warming up the colors.

The idea is that you select the appropriate white balance setting for the type of light that you’re shooting in, and then your camera automatically adjusts the colors to eliminate any warm or cool color casts from your light source.

Use the whiteBalance property to specify which white balance setting the camera should use.

zoom

Value: float from 0 to 1.0

Specifies the zoom of your camera. The value 0 is no zoom, 1 is maximum zoom. For a medium zoom, for example, you could pass 0.5.

Android permissionDialogTitle

Starting on android M individual permissions must be granted for certain services, the camera is one of them, you can use this to change the title of the dialog prompt requesting permissions.

Android permissionDialogMessage

Starting on android M individual permissions must be granted for certain services, the camera is one of them, you can use this to change the content of the dialog prompt requesting permissions.

notAuthorizedView

By default a Camera not authorized message will be displayed when access to the camera has been denied, if set displays the passed react element instead of the default one.

pendingAuthorizationView

By default a will be displayed while the component is waiting for the user to grant/deny access to the camera, if set displays the passed react element instead of the default one.

iOS videoStabilizationMode

The video stabilization mode used for a video recording. The possible values are:

  • RNCamera.Constants.VideoStabilization['off']
  • RNCamera.Constants.VideoStabilization['standard']
  • RNCamera.Constants.VideoStabilization['cinematic']
  • RNCamera.Constants.VideoStabilization['auto']

You can read more about each stabilization type here: https://developer.apple.com/documentation/avfoundation/avcapturevideostabilizationmode

iOS defaultVideoQuality

This option specifies the quality of the video to be taken. The possible values are:

  • RNCamera.Constants.VideoQuality.2160p.
    • ios Specifies capture settings suitable for 2160p (also called UHD or 4K) quality (3840x2160 pixel) video output.
    • android Quality level corresponding to the 2160p (3840x2160) resolution. (Android Lollipop and above only!).
  • RNCamera.Constants.VideoQuality.1080p.
    • ios Specifies capture settings suitable for 1080p quality (1920x1080 pixel) video output.
    • android Quality level corresponding to the 1080p (1920 x 1080) resolution.
  • RNCamera.Constants.VideoQuality.720p.
    • ios Specifies capture settings suitable for 720p quality (1280x720 pixel) video output.
    • android Quality level corresponding to the 720p (1280 x 720) resolution.
  • RNCamera.Constants.VideoQuality.480p.
    • ios Specifies capture settings suitable for VGA quality (640x480 pixel) video output.
    • android Quality level corresponding to the 480p (720 x 480) resolution.
  • RNCamera.Constants.VideoQuality.4:3.
    • ios Specifies capture settings suitable for VGA quality (640x480 pixel) video output. (Same as RNCamera.Constants.VideoQuality.480p).
    • android Quality level corresponding to the 480p (720 x 480) resolution but with video frame width set to 640.
  • RNCamera.Constants.VideoQuality.288p.
    • ios Specifies capture settings suitable for CIF quality (352x288 pixel) video output.
    • android Not supported.

If nothing is passed the device's highest camera quality will be used as default. Note: This solve the flicker video recording issue for iOS

Native Event callbacks props

onCameraReady

Function to be called when native code emit onCameraReady event, when camera is ready.

onMountError

Function to be called when native code emit onMountError event, when there is a problem mounting the camera.

Android onPictureTaken

Function to be called when native code emit onPictureTaken event, when camera has taken a picture.

Bar Code Related props

onBarCodeRead

Will call the specified method when a barcode is detected in the camera's view.

Event contains the following fields

  • data - a textual representation of the barcode, if available
  • rawData - The raw data encoded in the barcode, if available
  • type - the type of the barcode detected
  • bounds -

    • on iOS:

      bounds:{
  size:{
    width:string,
    height:string
  }
  origin:{
    x:string,
    y:string
  }
}

    • onAndroid:

      bounds:[{x:string,y:string}]
      • on Android it just returns resultPoints:

        • for barcodes:

          bounds[0].x : left side of barcode.
bounds[1].x : right side of barcode

        • counting for QRcodes:

          1 2
0

The following barcode types can be recognised:

  • aztec
  • code128
  • code39
  • code39mod43
  • code93
  • ean13 (iOS converts upca barcodes to ean13 by adding a leading 0)
  • ean8
  • pdf417
  • qr
  • upce
  • interleaved2of5 (when available)
  • itf14 (when available)
  • datamatrix (when available)

barCodeTypes

An array of barcode types to search for. Defaults to all types listed above. No effect if onBarCodeRead is undefined. Example: <RNCamera barCodeTypes={[RNCamera.Constants.BarCodeType.qr]} />

Android onGoogleVisionBarcodesDetected

Like onBarCodeRead, but we will use Google Play Service Vision to scan barcodes, which is pretty fast on Android. Note: If you already set onBarCodeRead, this will be invalid.

Android googleVisionBarcodeType

Like barCodeTypes, but applies to the Google Play Service Vision barcode detector. Example: <RNCamera googleVisionBarcodeType={RNCamera.Constants.GoogleVisionBarcodeDetection.BarcodeType.DATA_MATRIX} />

Android googleVisionBarcodeMode

Change the mode in order to scan "inverted" barcodes. You can either change it to alternate, which will inverted the image data every second screen and be able to read both normal and inverted barcodes, or inverted, which will only read inverted barcodes. Default is normal, which only reads "normal" barcodes. Note: this property only applies to the Google Vision barcode detector. Example: <RNCamera googleVisionBarcodeMode={RNCamera.Constants.GoogleVisionBarcodeDetection.BarcodeMode.ALTERNATE} />

Face Detection Related props

RNCamera uses the Google Mobile Vision frameworks for Face Detection, you can read more info about it here.

onFacesDetected

Method to be called when face is detected. Receives a Faces Detected Event object. The interesting value of this object is the faces value, which is an array with objects of the Face properties.

onFaceDetectionError

Method to be called if there was an Face Detection Error, receives an object with the isOperational property set to false if Face Detector is NOT operational and trueif it is.

faceDetectionMode

Values: RNCamera.Constants.FaceDetection.Mode.fast (default) or RNCamera.Constants.FaceDetection.Mode.accurate

Specifies the face detection mode of the Face Detection API.

Use RNCamera.Constants.FaceDetection.Mode.accurate if you want slower but more accurate results.

faceDetectionLandmarks

Values: RNCamera.Constants.FaceDetection.Landmarks.all or RNCamera.Constants.FaceDetection.Landmarks.none (default)

A landmark is a point of interest within a face. The left eye, right eye, and nose base are all examples of landmarks. The Face API provides the ability to find landmarks on a detected face.

faceDetectionClassifications

Values: RNCamera.Constants.FaceDetection.Classifications.all or RNCamera.Constants.FaceDetection.Classifications.none (default)

Classification is determining whether a certain facial characteristic is present. For example, a face can be classified with regards to whether its eyes are open or closed. Another example is whether the face is smiling or not.

Text Recognition Related props

RNCamera uses the Google Mobile Vision frameworks for Text Recognition, you can read more info about it here.

onTextRecognized

Method to be called when text is detected. Receives a Text Recognized Event object. The interesting value of this object is the textBlocks value, which is an array with objects of the TextBlock properties.

Component instance methods

takePictureAsync([options]): Promise

Takes a picture, saves in your app's cache directory and returns a promise.

Supported options:

  • width (integer). This property allows to specify the width that the returned image should have, image ratio will not be affected. If no value is specified the maximum image size is used (capture may take longer).

  • quality (float between 0 to 1.0). This property is used to compress the output jpeg file with 1 meaning no jpeg compression will be applied. If no value is specified quality:1 is used.

  • base64 (boolean true or false) Use this with true if you want a base64 representation of the picture taken on the return data of your promise. If no value is specified base64:false is used.

  • mirrorImage (boolean true or false). Use this with true if you want the resulting rendered picture to be mirrored (inverted in the vertical axis). If no value is specified mirrorImage:false is used.

  • exif (boolean true or false) Use this with true if you want a exif data map of the picture taken on the return data of your promise. If no value is specified exif:false is used.

  • fixOrientation (android only, boolean true or false) Use this with true if you want to fix incorrect image orientation (can take up to 5 seconds on some devices). Do not provide this if you only need EXIF based orientation.

  • forceUpOrientation (iOS only, boolean true or false). This property allows to force portrait orientation based on actual data instead of exif data.

  • skipProcessing (android only, boolean). This property skips all image processing on android, this makes taking photos super fast, but you loose some of the information, width, height and the ability to do some processing on the image (base64, width, quality, mirrorImage, exif, etc)

  • doNotSave (boolean true or false). Use this with true if you do not want the picture to be saved as a file to cache. If no value is specified doNotSave:false is used. If you only need the base64 for the image, you can use this with base64:true and avoid having to save the file.

  • pauseAfterCapture (boolean true or false). If true, pause the preview layer immediately after capturing the image. You will need to call cameraRef.resumePreview() before using the camera again. If no value is specified pauseAfterCapture:false is used.

The promise will be fulfilled with an object with some of the following properties:

  • width: returns the image's width (taking image orientation into account)
  • height: returns the image's height (taking image orientation into account)
  • uri: returns the path to the image saved on your app's cache directory.
  • base64: returns the base64 representation of the image if required.
  • exif: returns an exif map of the image if required.

recordAsync([options]): Promise

Records a video, saves it in your app's cache directory and returns a promise when stopRecording is called or either maxDuration or maxFileSize specified are reached.

Supported options:

  • quality. This option specifies the quality of the video to be taken. The possible values are:

    • RNCamera.Constants.VideoQuality.2160p.
      • ios Specifies capture settings suitable for 2160p (also called UHD or 4K) quality (3840x2160 pixel) video output.
      • android Quality level corresponding to the 2160p (3840x2160) resolution. (Android Lollipop and above only!).
    • RNCamera.Constants.VideoQuality.1080p.
      • ios Specifies capture settings suitable for 1080p quality (1920x1080 pixel) video output.
      • android Quality level corresponding to the 1080p (1920 x 1080) resolution.
    • RNCamera.Constants.VideoQuality.720p.
      • ios Specifies capture settings suitable for 720p quality (1280x720 pixel) video output.
      • android Quality level corresponding to the 720p (1280 x 720) resolution.
    • RNCamera.Constants.VideoQuality.480p.
      • ios Specifies capture settings suitable for VGA quality (640x480 pixel) video output.
      • android Quality level corresponding to the 480p (720 x 480) resolution.
    • RNCamera.Constants.VideoQuality.4:3.
      • ios Specifies capture settings suitable for VGA quality (640x480 pixel) video output. (Same as RNCamera.Constants.VideoQuality.480p).
      • android Quality level corresponding to the 480p (720 x 480) resolution but with video frame width set to 640.
    • RNCamera.Constants.VideoQuality.288p.
      • ios Specifies capture settings suitable for CIF quality (352x288 pixel) video output.
      • android Not supported.

    If nothing is passed the device's highest camera quality will be used as default.

  • iOS codec. This option specifies the codec of the output video. Setting the codec is only supported on iOS >= 10. The possible values are:

    • RNCamera.Constants.VideoCodec['H264']
    • RNCamera.Constants.VideoCodec['JPEG']
    • RNCamera.Constants.VideoCodec['HVEC'] (iOS >= 11)
    • RNCamera.Constants.VideoCodec['AppleProRes422'] (iOS >= 11)
    • RNCamera.Constants.VideoCodec['AppleProRes4444'] (iOS >= 11)

  • mirrorVideo (boolean true or false). Use this with true if you want the resulting video to be mirrored (inverted in the vertical axis). If no value is specified mirrorVideo:false is used.

  • maxDuration (float greater than 0). Specifies the maximum duration of the video to be recorded in seconds. If nothing is specified, no time limit will be used.

  • maxFileSize (int greater than 0). Specifies the maximum file size, in bytes, of the video to be recorded. For 1mb, for example, use 1*1024*1024. If nothing is specified, no size limit will be used.

  • mute (any value). If this flag is given in the option with any value, the video to be recorded will be mute. If nothing is specified, video will NOT be muted.

  • path (file path on disk). Specifies the path on disk to record the video to. You can use the same uri returned to continue recording across start/stops

The promise will be fulfilled with an object with some of the following properties:

  • uri: returns the path to the video saved on your app's cache directory.

  • iOS codec: the codec of the recorded video. One of RNCamera.Constants.VideoCodec

stopRecording: void

Should be called after recordAsync() to make the promise be fulfilled and get the video uri.

pausePreview: void

Pauses the preview. The preview can be resumed again by using resumePreview().

resumePreview: void

Resumes the preview after pausePreview() has been called.

Android getSupportedRatiosAsync(): Promise

Android only. Returns a promise. The promise will be fulfilled with an object with an array containing strings with all camera aspect ratios supported by the device.

iOS isRecording(): Promise<boolean>

iOS only. Returns a promise. The promise will be fulfilled with a boolean indicating if currently recording is started or stopped.

Subviews

This component supports subviews, so if you wish to use the camera view as a background or if you want to layout buttons/images/etc. inside the camera then you can do that.

Testing

To learn about how to test components which uses RNCamera check its documentation about testing.

Example

To see more of the RNCamera in action, with Face Detection, you can check out the source in RNCamera Example repository.

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

Support us with a monthly donation and help us continue our activities. [Become a backer]

Sponsors

Become a sponsor and get your logo on our README on Github with a link to your site. [Become a sponsor]

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.