react-native-camera / react-native-camera

A Camera component for React Native. Also supports barcode scanning!

🚧 🚧 🚧

react-native-camera is deprecated.

Due to the lack of maintainers and increased code complexity, react-native-camera is now deprecated in favor of react-native-vision-camera.

VisionCamera offers new APIs, better performance, improved stability and more features. It is actively maintained by @mrousavy and used in many production apps.

You can support the development of VisionCamera by sponsoring @mrousavy on GitHub.

You can find the old code of react-native-camera here.

See this issue for more details.

react-native-camera's Issues

Prompts for microphone access

This is probably tricky to fix because it involves init, but I cannot have my app ask for microphone access.

Might be worth splitting the video camera into a separate component. It doesn't actually share much code with the still camera.

I don't know why my phone6 to turn on the camera is too slow

I just give a button on my first scence , and then , when click it can push a new scence which have the camera, but , after I click, it will take 3s to load, and the next , I try more time it go fast, but the first is too low.

Update dependencies for Latest React Native (0.5.0)

If there's nothing in the latest react native (0.5.0) that prevents this from working, can you please bump the dependency requirement? Thanks!

---

When trying to update to RN 0.5.0 got the following:

npm ERR! peerinvalid Peer [email protected] wants react-native@^0.4.3

Compatibility with react-native 0.3.11 or above !

I created a new project with:

react-native init ReactNativeCameraTest

It can be running on Simulator and iPhone4S

And i install react-native-camera with:

npm install react-native-camera@latest --save

and follow README introduction, add the RCTCamera project to ReactNativeCameraTest, It shows the error:
facebook/react-native#917

And shows a white screen on my 4S.

My Env:

XCode 6.2
Node: iojs 1.7.1
React Native: 0.3.11

What's up with the constants?

Really a pretty nitpicky thing to make an issue about, I suppose, but stuff like Camera.constants.CaptureTarget.memory is not really idiomatic JS. I'm curious as to what the benefits are over simply configuring with a string?

From my experiences in native dev, it seems that the main advantage of enumerables is that the IDE will catch typos in them. This is not the case in JS, and typing an enumerable wrong will have roughly the same effect as typing a string wrong.

How to utilize the created image from capture() in an <Image/> component?

I apologize if this is a dumb question, but after having captured an image with the camera API, I am trying to figure out a simple way to display it. My first thought is to use an <Image/> tag, but due to the base-64 nature of the image and the filename used (which does not end with an extension), the <Image/> component does not know how to read the data produced.

Is there a way to get the capture() method to return a file that is properly encoded in .png or .jpeg on the filesystem so that it can easily be loaded for view? Otherwise the only approach I can think of is to btoa() the image and upload it to a server as a .png file, which seems like a lot of extra work.

Thanks for your efforts on this fine project and please excuse my lack of knowledge in this area.

Remove state within Camera component

The Camera component should be stateless. Looking at what state is available i believe we can remove it all.

isAuthorized

Doesn't appear to be used.

aspect, type, and orientation

Derived from props, we should just use the props.

See https://facebook.github.io/react/tips/props-in-getInitialState-as-anti-pattern.html for more information.

I can contribute this change I just want to make sure you agree before I start.

sample code in README produces error

I get the following error in iOS simulator, when I try to run the sample code in README:

[RCTLog][tid:0x7f80b0519680][RCTConvert.m:843]>Exception thrown while attempting to set property 'camera' of 'RCTCamera' with value '1': *** Can't add a nil AVCaptureInput

[RCTLog][tid:0x7f80b0519680][RCTCameraManager.m:27]>RCTCamera does not have setter for `camera` property

Is this normal when the app is run in iOS simulator?

can't find variable:preview

When I use curl to bundle js files into main.jsbundle and use

   jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

to build into devices, It reports can't find variable:preview error

Remove Camera.switch method

I believe the switch method is imperative and against the ethos of React.

Write image to tmp directory instead of encoding it.

The capture function returns the image Base64 encoded. I'd propose to add another mode to the capture function:
Instead of returning the image to the callback, we write it to the <Application_Home>/tmp directory using a UUID as the filename. The callback just receives the UUID instread of the Base64 encoded data.

I could implement this feature easily but first wanted to check if anyone comes up with a better idea :D

Edit: Just saw, that you have already implemented this functionality. Thank you very much 👍
There is just one thing that I would add: Add a property to options to specify a subfolder in the <Application_Home> directory.

jsSchedulingOverhead (-5999ms) should be positive

Get this warning log when using .capture in development mode... I don't know that this is an issue, just FYI

[torchMode] Cannot read property 'on' of undefined

Hi, I am not sure if this is me or is torchMode currently not working?
Here is my code

var Camera = require('react-native-camera');
var QRCodeScreen = React.createClass({
  getInitialState() {
    return {
      cameraTorch: Camera.constants.TorchMode.on,
      // other states...
    };
  },
 getDefaultProps: function() {
    return {
      cameraTorch: Camera.constants.TorchMode.on,
      // other properties...
    };
  },
})

And I create a Camera like this

  render: function() {
    return (
      <Camera 
        onBarCodeRead={this._onBarCodeRead} 
        style={styles.camera} 
        type={this.state.cameraType} 
        orientation={this.props.orientationType}
        aspect={this.state.cameraAspect}
        torchMode={this.props.cameraTorch}
      >
        <View style={styles.rectangleContainer}>
          <View style={styles.rectangle}/>
        </View>
        <View style={styles.cancelButton}>
          <TouchableOpacity onPress={this._onPressCancel}>
            <View>
              <Text style={styles.cancelButtonText}>{this.props.cancelButtonTitle}</Text>
            </View>
          </TouchableOpacity>
        </View>
      </Camera>
    );
  },

i've also tried torchMode={this.state.cameraTorch}
but it always says Camera.constants.TorchMode is undefined thus the error Cannot read property 'on' of undefined.

Just wondering if I am using this correctly?

Camera start when app open, so iPhone will become hot

This is brilliant!

Love this - works really well. How soon do you think it'll be until you have the capture working?
It would also be really useful if the width could fill the current view, i.e. use flexbox or view styling to fit the space it is in.

Cheers!

Can only get aspect fit to work

Hi! First of all thank you for such a fantastic addition to the react-native eco system. It opens up so many interesting applications!

• Regardless of the value I use with aspect={Camera.constants.Aspect.fill/stretch/fit} the aspect always seems to be fit
• I've tried setting heights on the <Camera /> element itself and also wrapping it in a <View> and setting height and width constraints on that.
• Regardless I only ever get the vertical image with black lines at the side. (I have 60px of navbar at the top)
• I've tried all the constants as strings as well, and also as capitalised strings which throws a deprecation invariant warning

Any pointers would be very welcome. I'm using [email protected], and [email protected], with [email protected]

Thanks again for all your work on the react-native-camera element.

Jon

Use of UIImage strips some metadata from photo

In my quest to add GPS metadata, I have found that converting to and from UIImage strips some metadata from an image: https://gist.github.com/jtremback/50cf75604c9e5c55db49.

It appears that the only reason that UIImage is being used is to satisfy the requirements of the UIImage+Resize class that is included in the module. It appears that UIImage+Resize is not actually doing anything, just resizing the image to the same size and orientation that it already was. So, eliminating UIImage+Resize and the conversion to UIImage results in images being saved with full metadata. Here's a very quick and dirty modification that saves images without the conversion: https://gist.github.com/jtremback/b4996f4e884f4ce0748e.

HOWEVER- While UIImage+Resize is not doing anything now, as far as I can tell, I think it should be. There are two schools of thought on image orientation:

• One way is to have the capturing device set the orientation property in the metadata and let the displaying device rotate it properly. However, displaying devices often don't do this right. There are many examples across the internet of this issue.
• The other way is to rotate the image in the capturing device and leave the orientation metadata untouched. This is what I want my app to do. It's probably also what UIImage+Resize is supposed to be doing in the code.

Fixing the call to UIImage+Resize to rotate properly will be easy, but preserving the metadata may not be. I can think of two ways to do this:

• Rotate without converting to UIImage, possibly with CGImage. Perhaps this will be kinder to the metadata.
• Read the metadata, rotate with UIImage, and reattach the metadata afterwards.

I don't know yet which is the best approach, but I will update this tomorrow.

What type of bar codes can be read?

I'm sorry if this is an inappropriate place to ask, but what types of bar codes can be read with this component? Maybe you can add them to the README?

Thanks,

Enhancement Request: Image Resolution Size

Would an enhancement request for setting image resolution size make sense?

Add QRCodeReaderViewController support

I am not a professional ios programmer, If you can support the qr code reading, that's very nice. I think it must be useful for many apps, and will be very welcome.

https://github.com/yannickl/QRCodeReaderViewController

Uploading an image from disk, file not found.

Saving an image to disk works perfectly, huuuge performance boost versus in memory. 😄 Also previewing the image works fine.

However, when trying to select the image, in my use case to cloudinary, the url doesn't seem to work. Is there something particular I have to do?
ATM: I save my image to CameraRoll with @rt2zz patch. And send the image with the assets URL.
In my case the assetsURL works, the fileURL doesn't. In the case of cloudinary it will respond with empty file.
Example of logged URLs:

var assetURL = "assets-library://asset/asset.JPG?id=B37E1F30-C8F4-4648-8BF2-1B8BD638141D&ext=JPG”;

var fileURL = "file://var/mobile/Containers/Data/Application/A70929AB-C7B5-4DEE-8406-0EF4A5758C3F/Documents/3F60C854-5CE0-4A73-825E-97E0FD9092E1”;

Comparing both URL the syntax looks different, is there any magic I have to do for the fileURL?

[AVCaptureStillImageOutput captureStillImageAsynchronouslyFromConnection:completionHandler:] - inactive/invalid connection passed

when used the react-native-camera in iOS Simulator-iPhone 6/ iOS 8.3:

Exception thrown while invoking capture on target  with params (
        {
        mode = 0;
        target = 0;
    },
    9
): *** -[AVCaptureStillImageOutput captureStillImageAsynchronouslyFromConnection:completionHandler:] - inactive/invalid connection passed.

there are part of codes:

//...
var Camera = require('react-native-camera');

class CameraView extends React.Component{
    constructor(props, context) {
        super(props, context);
        this.state = {
            cameraType:Camera.constants.Type.back
        };
    }
    switchCamera(){
        var state=this.state;
        state.cameraType=state.cameraType === Camera.constants.Type.back ? Camera.constants.Type.front : Camera.constants.Type.back;
        this.setState({
            cameraType:state
        });
    }
    takePicture(){
        this.refs.cam.capture(function(err,data){
            console.log(err,data);
        });
    }
    render(){
        return (
            <Camera
                ref="cam"
                onBarCodeRead={this.onBarCodeRead}
                style={styles.camera}
                type={this.state.cameraType}
            >
            <TouchableHighlight
                onPress={()=>{this.takePicture.call(this)}}
            >
                <Image
                    style={styles.photo}
                    source={require('image!icon_photo')} />
                </TouchableHighlight>
            </Camera>          
        );
    }
}

//<CameraView/>

libRCTCamera.a is missing

Hey there,

I'm trying to give this a go, but can't find the .a file to add to the build step, I might be missing something though.

add method to save image to disk and return path

How might image manipulation be supported? Namely scaling and cropping. Right now I have patched the module to crop the image square:

            // Crop logic
            CGImageRef imageRef = CGImageCreateWithImageInRect([rotatedImage CGImage], clippedRect);
            UIImage * croppedImage = [UIImage imageWithCGImage:imageRef];
            CGImageRelease(imageRef);
            NSString *imageBase64 = [UIImageJPEGRepresentation(rotatedImage, 1.0) base64EncodedStringWithOptions:0];
            NSString *croppedImageBase64 = [UIImageJPEGRepresentation(croppedImage, 1.0) base64EncodedStringWithOptions:0];

It would be nice to have an API to do arbitrary cropping/resizing, but I am not sure how to go about implementing this (iOS newb). Perhaps a second method called takePictureWithManipulations which takes a configuration object. The API could emulate the canvas api ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

Another possibility, although this is something I know nothing about: we could return an image handle which can then be consumed to other image manipulation API's, this way we are not overburdening react-native-camera.

Thoughts?

Long pause between hitting shutter and picture being taken

The first picture is taken instantly, however pictures in quick succession will have a long delay before being taken. Hitting the shutter button quickly enough can crash the app.

Stuttery viewfinder on switching to camera

It's kind of dim and stuttery for about a second. Trying to take a picture during this time can crash the app.

Make it work with rem

I can help with this, but you'll need to put this on cocoapods first. Seems like the npm module and the cocoapods module should be owned by the same person.

https://github.com/ReactExtensionManager/rem#writing-modules-for-rem-for-module-authors

Phone still heats up

I tried it using for image capture and it significantly increases the phone temperature
And my code properly mounts and un mounts the component. So there is nothing like it is being kept initiated.

Compared it with the ios camera itself.
Tested on -
iPhone6 [ iOS8.3, 8.4, & 9 ]

Add startScanning and stopScanning method.

There is a project which added startScanning and stopScanning based on your project.

https://github.com/lifuzu/ReactNativeBarcodeScanner/blob/master/iOS/RCTBarcodeScannerManager.m#L168

But that project is not a module project , It's a full xcode project and can not be added as Library dependency

Viewfinder does not work

Adding this as noted under known issues in the readme, so we can discuss possible solutions.

It looks like you're not adding the ViewfinderView as a subview on RCTCamera anywhere. React does not take care of this automatically. I added some debug code to layoutSubviews and saw that the viewfinder does not have a superview, nor does it show up in the list of subviews, which is empty anyway.

However, that's not enough to solve the problem. I noticed in the old code that uses an earlier version of react-native, the viewfinder only works some of the time. It seems to fail whenever the app takes a little longer to start up, especially if I delay it by setting breakpoints in the debugger. When I reload the JS part of the app, it starts up faster and the preview works fine again. So perhaps it's a timing issue?

I did find a few claims that the preview layer needs to be set up on the main thread. Maybe that will help.

Example missing parts

The example script is missing some stuff, like the styles and preview function

Add GPS metadata to image. (needs docs)

Might be problematic, because of the need to import the location framework. Will investigate whether this should be in this module etc.

Notes about base64 image & the CameraRoll

To display the base64 image that is returned by this module:

//style height & width and source.isStatic are all required
<Image
  source={{
      isStatic: true,
      uri: 'data:image/jpeg;base64,'+base64image,
    }}
  style={{height: 100, width:100}}
/>

Also images can be saved to the CameraRoll with the following patch: facebook/react-native#1111

orientationChanged sent to deallocated instance of RCTCamera

My app keeps crashing with this error:

*** -[RCTCamera orientationChanged:]: message sent to deallocated instance 0x1246732e0

Any thoughts? iPad mini 2 FWIW

Build Fail - undefined is not an object (evaluating 'NativeModules.CameraManager.checkDeviceAuthorizationStatus')

I've got a build fail everytime with such traceback:

RCTJSLog> "Error: 
 stack: 
  componentWillMount                      index.ios.bundle:38400
  chainedFunction                         index.ios.bundle:3587
  mountComponent                          index.ios.bundle:15901
  ReactCompositeComponent_mountComponent  index.ios.bundle:4847
  mountComponent                          index.ios.bundle:4916
  mountChildren                           index.ios.bundle:20393
  initializeChildren                      index.ios.bundle:19890
  mountComponent                          index.ios.bundle:20044
  mountComponent                          index.ios.bundle:4916
  mountComponent                          index.ios.bundle:15919
  ReactCompositeComponent_mountComponent  index.ios.bundle:4847
  mountComponent                          index.ios.bundle:4916
  mountComponent                          index.ios.bundle:15919
  ReactCompositeComponent_mountComponent  index.ios.bundle:4847
  mountComponent                          index.ios.bundle:4916
  mountComponentIntoNode                  index.ios.bundle:15382
  perform                                 index.ios.bundle:5979
  batchedMountComponentIntoNode           index.ios.bundle:15401
  perform                                 index.ios.bundle:5979
  batchedUpdates                          index.ios.bundle:13502
  batchedUpdates                          index.ios.bundle:4511
  renderComponent                         index.ios.bundle:15453
  ReactMount__renderNewRootComponent      index.ios.bundle:4847
  render                                  index.ios.bundle:1142
  renderApplication                       index.ios.bundle:33818
  run                                     index.ios.bundle:33764
  runApplication                          index.ios.bundle:33786
  jsCall                                  index.ios.bundle:7143
  _callFunction                           index.ios.bundle:7390
  applyWithGuard                          index.ios.bundle:877
  guardReturn                             index.ios.bundle:7192
  callFunctionReturnFlushedQueue          index.ios.bundle:7399
 URL: http://localhost:8081/index.ios.bundle
 line: 38400
 message: undefined is not an object (evaluating 'NativeModules.CameraManager.checkDeviceAuthorizationStatus')"

Added this to ReactNativeModules.com

I put together http://reactnativemodules.com last night and added your module. It's a community run list of react native modules. Hopefully it will make finding projects like these easier. Am I missing any that you know of?

Not working if app initialization is triggered through location services

I've implemented react-native-camera in my app and it's working amazingly, except for this one issue. My app uses location services to constantly scan for beacons. When a beacon is found in range iOS launches the app silently in the background so it can respond to the event. It then leaves the app running. When the app is started in this way the next time I open it (remember it's running in the background already) the camera does not work at all. I just see a black or white rectangle when I load up a Camera element.

I spent a little time digging around through the react-native-camera code to see if I could figure this out but my iOS dev skills are pretty lacking so I think I have to throw in the towel at this point :/ I don't know if something can be done to initialize the camera only after the app has become active on-screen or something, but I'd really love it if this weird edge case could be resolved because it's the only thing holding my app back from perfection :)

Getting Started is not clear

In XCode, right click Libraries and Add Files to ______
Add libRCTCamera.a to Build Phases -> Link Binary With Libraries

Where is libRCTCamera.a?

Displaying the captured image.

So I'm to clear as to how we go about displaying the captured image from memory or from disk? Could give an example?

ReactIOSViewAttributes removed in react-native 0.4.3

The changelog mentions that requireNativeComponent should be used instead :
https://github.com/facebook/react-native/releases/tag/v0.4.3

Long pause immediately after Camera initializes

When rendering the react-native-camera module, the app locks up for about 15 seconds before I can interact with the app. Can't scroll; can't navigate anywhere, etc. Seems like a case of locking the UI thread. Anyway, after the 15 seconds, the camera works fine.

Captured image does not crop image to <Camera> viewfinder's ratio

I expected the outputted image to have the same width/height ratio as the camera viewfinder. However, the returned image is always the full capture of the camera, irrespective of the camera viewfinder's dimensions.

Header Search Paths and gitignore

hey.
I've notice you've used same install pattern as many react-native modules with manual setting up Header Search Path for xcode project.
Problem will rise when node_modules under .gitignore (as it should) and some kind of CI is used - your module will crash builds.
more on this problem - corymsmith/react-native-icons#15.
@corymsmith found it possible to just include it by default, so may be you could do it too?

Why the 0.5.0 peerDependency?

This no longer works with react-native master. Is it really necessary? I have gone back down to 0.2.9 in the mean time.

Start camera on button click

Hey,

first of all I'm very new to react native and it's concepts. I'm evaluating cross-platform frameworks for my thesis.

I want to ask, if it's possible with your plugin to start the camera when a button ("take picture") was clicked, then of course take the picture and show the taken image below the button. I didn't get it working, just the background camera, but then I had problems with my TabBar which was in front but didn't work anymore...very freaky^^

Thanks and greetings from Germany!

`takePicture` captures first frame from output buffer instead of current frame

When you take a picture, the picture taken isn't actually the picture in your frame when the image was supposed to be captured. Instead, the first (at least, I think it's the first..) frame that is outputted to the AVCaptureStillImageOutput instance is the frame that is captured by captureStillImageAsynchronouslyFromConnection. I'm looking for some help on this, as I'm not really sure what the problem is.

No Audio ?

Tried implementing with, Video get recorded, but audio, tried with different devices, still same issue.
Also, it never asks the permission to use microphone.

Continuing PeerDependency issues.

Trying to install with react-native 0.6.0-rc still causes a peerDependency error.

Save dummy image when in the simulator

This will allow much faster development for me. I'm going to dive in and try to make this work, let me know if there have been previous attempts!

Recommendation

For what it's worth, I think this is the best camera library out there to wrap. Just my opinion, using it in my app and it's awesome.

https://github.com/IFTTT/FastttCamera.