timmh / react-native-camera Goto Github PK

This project forked from react-native-camera/react-native-camera

A fork of react-native-camera with experimental android support

License: MIT License

Java 24.14% JavaScript 15.19% Objective-C 60.66%

react-native-camera's Introduction

I'm a first-year PhD student at MIT CSAIL, advised by Sara Beery. My research is focused on computer vison approaches for ecological and environmental monitoring. Previously, I was a research assistant at the University of Bonn and worked on the AMMOD project, advised by Volker Steinhage. Please feel free to reach out via haucke at mit.edu.

react-native-camera's People

Contributors

Stargazers

Watchers

Forkers

ortutay xyos carlosfvp cbinners synctree azlyth eiriksm nishanthshankar ckin-it drewtunes zhangjianying1

react-native-camera's Issues

ReactCameraView cannot be cast to ViewGroup

I get the following error when running the example:

any idea as to why this happens?

Can't draw anything on top of it

i'm trying to put some element on top of the camera preview but the camera cover everything. This is my code:

<View style={{flex: 1}}>
   <Camera style={{flex: 1}}></Camera>
   <View style={{position: 'absolute', width: 200, height: 200, backgroundColor: '#FFF'}}>
       <Text> TEST </Text>
   </View>
</View>

Issue running on android

I get an error that states that Camera.constants.Type.back is undefined.

Android support for RN 0.16

Camera is a white screen with Navigator

Hi,

I have a white screen instead of the camera when I use Navigator.
This is my code :

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableHighlight,
  TouchableOpacity,
  Navigator,
} = React;

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

var PageCamera = React.createClass({
   render: function() {
    return (
      <Navigator
          renderScene={this.renderScene.bind(this)}
          navigator={this.props.navigator}/>
    );
  },
  renderScene(route, navigator) {
        return (
            <View style={styles.container}>
                <Camera style={styles.camera} ref="cam" type={Camera.constants.Type.back} captureTarget={Camera.constants.CaptureTarget.memory}></Camera>
            </View>
        );
    }
});

var styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF'
    },
    camera: {
    position: 'absolute',
    top: 20, right: 20, bottom: 20, left: 20
    },
    captured: {
    width: 200,
    height: 400
    },
    captureButton: {
    position: 'absolute',
    height: 50,
    left: 50, bottom: 20, right: 50,
    backgroundColor: '#FFFFFF',
    borderRadius: 20,
    },
    switchButton: {
    position: 'absolute',
    height: 50,
    left: 50, top: 20, right: 50,
    backgroundColor: '#FFFFFF',
    borderRadius: 20,
    },
});

module.exports = PageCamera;

I try the same without Navigator, as your example, and it works.

Add captureTarget prop

Hi @timmh ,

First of all, thank you very much for your hard work, it's working fine !!

I was wondering if it could be possible to add the captureTarget prop like in the IOS react-native-camera repo (https://github.com/lwansbrough/react-native-camera#capturetarget) instead of just returning Base64 encoded image.

I think it could be a nice and useful improvment but I don't really know where to add this by myself...Do you think this is something that you could add easily ?

Thanks in advance!
Guillaume

Typo in Readme?

The README suggests to use this line:

project(':include ':com.lwansbrough.ReactCamera').projectDir = new File(settingsDir, '../node_modules/react-native-camera/android')

However, that is giving me errors, so I changed it into this (as suggested in a thread in the original repo's issue tracker)

project(':com.lwansbrough.ReactCamera').projectDir = new File(settingsDir, '../node_modules/react-native-camera/android')

Should the readme be updated?

where is mReactInstanceManager = ReactInstanceManager.builder()

where is mReactInstanceManager = ReactInstanceManager.builder()? I can't find it.
include ':com.lwansbrough.ReactCamera' what is lwansbrough?
I don't konw java

Captured image is flipped

I've followed the example project for android but the image captured is flipped for some reason. My device is a Samsung Galaxy S6 ( SM G920I).

Build failing, "illegal start of type"

Project/node_modules/react-native-camera/android/src/main/java/com/lwansbrough/ReactCamera/ReactCameraModule.java:47: illegal start of type
        final Map<String, Object> constants = new HashMap<>();
                                                          ^
Project/node_modules/react-native-camera/android/src/main/java/com/lwansbrough/ReactCamera/ReactCameraModule.java:48: illegal start of type
            final Map<String, Object> constantsAspect = new HashMap<>();
                                                                    ^
2 errors
:com.lwansbrough.ReactCamera:compileReleaseJavaWithJavac FAILED

If I knew java I could probably figure this out...

Add capture support

As mentioned here, this lacks capture support. Capture is probably the most useful camera feature :).

Do you have an idea of where I should start looking to get this to work? I can try to take a crack at it

Thank you!

I will try to add the ZBar Barcode scanner library myself then if this repo is not supposed to reference another plugin's repo.

Display image

Hi,

I use your package in my app. All is ok with your example. My problem is for display my image on another page.
This is my code :

'use strict';

var React = require('react-native');
var styles = require('./common/styles.js');

var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableHighlight,
  TouchableOpacity,
  Navigator,
} = React;

var Camera = require('react-native-camera'); //require the camera component
var capturedBase64='';
var PageCamera = React.createClass({
    getInitialState: function() {
        return ({
            capturedBase64: '',
            type: Camera.constants.Type.back
        });
    },

    switchCamera: function() {
        this.setState({ type: this.state.type === Camera.constants.Type.back ? Camera.constants.Type.front : Camera.constants.Type.back });
    },

    render(){
      var component = this;
      return (
    <View style={styles.parent}>
        <View style={styles.container}>
          <Camera style={styles.camera} ref="cam" type={this.state.type} captureTarget={Camera.constants.CaptureTarget.memory}></Camera>
          <TouchableHighlight style={styles.captureButton} onPress={() => {component.refs.cam.capture({ sampleSize: 10 }).then(function(capturedBase64) {
                component.setState({ capturedBase64 })});}}>
            <Text style={{textAlign: 'center'}}>Capture</Text>
          </TouchableHighlight>
          <TouchableHighlight style={styles.switchButton} onPress={this.switchCamera}>
            <Text style={{textAlign: 'center'}}>Switch</Text>
          </TouchableHighlight>
        </View>
        <View style={styles.navigation_bar_bas}>
        <TouchableHighlight style={styles.buttonNavigation} onPress={ () => this.props.navigator.push({id: 'PersonPage', sceneConfig: Navigator.SceneConfigs.FloatFromLeft, img:capturedBase64, page:'camera'})}>
          <Text style={styles.item_text}>Précédent</Text>
        </TouchableHighlight>
        <TouchableHighlight style={styles.buttonNavigation}>
          <Text style={styles.item_text}></Text>
        </TouchableHighlight>
        </View>
    </View>
    );
    }
});

module.exports = PageCamera;

I can display my image if I add , as your example, or if I change the target to the cameraRoll, I can find my image on my gallery.
I want to send my image to another page (PersonPage). Do you now if it's possible with 'memory' ?
Can I use 'cameraRoll' (the cameraRoll module isn't open source for Android..) ?

Thanks for your help.

Example JS code

Do you have an example how we can use this in an .js file?

After running the setup outlined in the android folder, I get the following error

ReactCameraView has no propType for native prop ReactCameraView.scaleX of native type number

When trying to require('react-native-camera')

Thanks