react-native-camera/README.md

251 lines
8.1 KiB
Markdown
Raw Normal View History

2015-09-23 02:59:10 +00:00
# react-native-camera [![npm version](https://badge.fury.io/js/react-native-camera.svg)](http://badge.fury.io/js/react-native-camera)
2015-04-01 01:04:18 +00:00
2015-12-11 17:00:42 +00:00
A camera module for React Native. **iOS only for now. Looking for help with Android!**
2015-04-01 01:02:57 +00:00
2015-04-24 17:52:00 +00:00
![](https://i.imgur.com/5j2JdUk.gif)
## Known Issues
Below is a list of known issues. Pull requests are welcome for any of these issues!
- Stills captured to disk will not be cleaned up and thus must be managed manually for now
2015-04-01 01:02:57 +00:00
## Getting started
2015-04-01 17:39:51 +00:00
1. `npm install react-native-camera@latest --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 `RCTCamera.xcodeproj`
4. In XCode, in the project navigator, select your project. Add `libRCTCamera.a` to your project's `Build Phases``Link Binary With Libraries`
5. Click `RCTCamera.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 17:39:51 +00:00
5. Run your project (`Cmd+R`)
2015-04-01 01:02:57 +00:00
## Usage
All you need is to `require` the `react-native-camera` module and then use the
`<Camera/>` tag.
2015-04-01 01:45:47 +00:00
```javascript
2015-04-01 01:02:57 +00:00
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight
2015-04-01 01:02:57 +00:00
} = React;
var Camera = require('react-native-camera');
var cameraApp = React.createClass({
getInitialState() {
return {
cameraType: Camera.constants.Type.back
}
},
render() {
2015-04-01 01:02:57 +00:00
return (
<Camera
ref="cam"
style={styles.container}
onBarCodeRead={this._onBarCodeRead}
type={this.state.cameraType}
>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js{'\n'}
Press Cmd+R to reload
</Text>
<TouchableHighlight onPress={this._switchCamera}>
<Text>The old switcheroo</Text>
</TouchableHighlight>
<TouchableHighlight onPress={this._takePicture}>
<Text>Take Picture</Text>
</TouchableHighlight>
</Camera>
2015-04-01 01:02:57 +00:00
);
},
_onBarCodeRead(e) {
console.log(e);
},
_switchCamera() {
var state = this.state;
state.cameraType = state.cameraType === Camera.constants.Type.back
? Camera.constants.Type.front : Camera.constants.Type.back;
this.setState(state);
},
_takePicture() {
this.refs.cam.capture(function(err, data) {
console.log(err, data);
});
2015-04-01 01:02:57 +00:00
}
});
2015-05-05 06:11:10 +00:00
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'transparent',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
},
});
2015-04-01 01:02:57 +00:00
AppRegistry.registerComponent('cameraApp', () => cameraApp);
```
## Properties
2015-04-01 02:38:30 +00:00
#### `aspect`
Values: `Camera.constants.Aspect.fit` or `"fit"`, `Camera.constants.Aspect.fill` or `"fill"` (default), `Camera.constants.Aspect.stretch` or `"stretch"`
The `aspect` property allows you to define how your viewfinder renders the camera's view. For instance, if you have a square viewfinder and you want to fill the it entirely, you have two options: `"fill"`, where the aspect ratio of the camera's view is preserved by cropping the view or `"stretch"`, where the aspect ratio is skewed in order to fit the entire image inside the viewfinder. The other option is `"fit"`, which ensures the camera's entire view fits inside your viewfinder without altering the aspect ratio.
#### `captureAudio`
Values: `true` (default), `false` (Boolean)
*Applies to video capture mode only.* Specifies whether or not audio should be captured with the video.
#### `captureMode`
Values: `Camera.constants.CaptureMode.still` (default), `Camera.constants.CaptureMode.video`
The type of capture that will be performed by the camera - either a still image or video.
#### `captureTarget`
2015-08-29 08:29:10 +00:00
Values: `Camera.constants.CaptureTarget.cameraRoll` (default), `Camera.constants.CaptureTarget.disk`, ~~`Camera.constants.CaptureTarget.memory`~~ (deprecated),
This property allows you to specify the target output of the captured image data. By default the image binary is sent back as a base 64 encoded string. The disk output has been shown to improve capture response time, so that is the recommended value.
2015-04-01 02:38:30 +00:00
#### `type`
Values: `Camera.constants.Type.front` or `"front"`, `Camera.constants.Type.back` or `"back"` (default)
Use the `type` property to specify which camera to use.
2015-04-01 02:38:30 +00:00
#### `orientation`
Values:
`Camera.constants.Orientation.auto` or `"auto"` (default),
`Camera.constants.Orientation.landscapeLeft` or `"landscapeLeft"`, `Camera.constants.Orientation.landscapeRight` or `"landscapeRight"`, `Camera.constants.Orientation.portrait` or `"portrait"`, `Camera.constants.Orientation.portraitUpsideDown` or `"portraitUpsideDown"`
2015-04-01 02:38:30 +00:00
The `orientation` property allows you to specify the current orientation of the phone to ensure the viewfinder is "the right way up."
2015-04-01 02:38:30 +00:00
2015-04-19 22:53:30 +00:00
#### `onBarCodeRead`
Will call the specified method when a barcode is detected in the camera's view.
Event contains `data` (the data in the barcode) and `bounds` (the rectangle which outlines the barcode.)
2015-07-26 19:32:42 +00:00
The following barcode types can be recognised:
- `aztec`
- `code138`
- `code39`
- `code39mod43`
- `code93`
- `ean13`
- `ean8`
- `pdf417`
- `qr`
- `upce`
2015-11-05 19:25:27 +00:00
- `datamatrix` (when available)
2015-07-26 19:32:42 +00:00
The barcode type is provided in the `data` object.
2015-05-30 16:36:55 +00:00
#### `flashMode`
Values:
`Camera.constants.FlashMode.on`,
`Camera.constants.FlashMode.off`,
`Camera.constants.FlashMode.auto`
Use the `flashMode` property to specify the camera flash mode.
2015-06-15 18:58:36 +00:00
#### `torchMode`
Values:
`Camera.constants.TorchMode.on`,
`Camera.constants.TorchMode.off`,
`Camera.constants.TorchMode.auto`
Use the `torchMode` property to specify the camera torch mode.
#### `onFocusChanged`
Args:
```
e: {
nativeEvent: {
touchPoint: { x, y }
}
}
```
Will call when touch to focus has been made.
2015-08-29 08:29:10 +00:00
By default, `onFocusChanged` is not defined and tap-to-focus is disabled.
#### `defaultOnFocusComponent`
Values:
`true` (default)
`false`
2015-08-29 08:29:10 +00:00
If `defaultOnFocusComponent` set to false, default internal implementation of visual feedback for tap-to-focus gesture will be disabled.
#### `onZoomChanged`
Args:
```
e: {
nativeEvent: {
velocity, zoomFactor
}
}
```
Will call when focus has changed.
2015-08-29 08:29:10 +00:00
By default, `onZoomChanged` is not defined and pinch-to-zoom is disabled.
## Component methods
You can access component methods by adding a `ref` (ie. `ref="camera"`) prop to your `<Camera>` element, then you can use `this.refs.camera.capture(cb)`, etc. inside your component.
#### `capture([options,] callback)`
Captures data from the camera. What is captured is based on the `captureMode` and `captureTarget` props. `captureMode` tells the camera whether you want a still image or video. `captureTarget` allows you to specify how you want the data to be captured and sent back to you. See `captureTarget` under Properties to see the available values.
Supported options:
- `audio` (See `captureAudio` under Properties)
- `mode` (See `captureMode` under Properties)
- `target` (See `captureTarget` under Properties)
- `metadata` This is metadata to be added to the captured image.
- `location` This is the object returned from `navigator.geolocation.getCurrentPosition()` (React Native's geolocation polyfill). It will add GPS metadata to the image.
- `rotation` This will rotate the image by the number of degrees specified.
2015-07-11 00:07:44 +00:00
#### `stopCapture()`
Ends the current capture session for video captures. Only applies when the current `captureMode` is `video`.
## 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.
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.