Camera working

main
Umbra Sheep 7 years ago
parent 21c230e77b
commit 6530d1b40b

254
App.js

@ -9,9 +9,11 @@ import {
ScrollView, ScrollView,
TextInput, TextInput,
TouchableHighlight, TouchableHighlight,
TouchableOpacity,
View, View,
Modal Modal
} from 'react-native'; } from 'react-native';
import { RNCamera } from 'react-native-camera';
import RunInfo from './components/run-info'; import RunInfo from './components/run-info';
import RunInfoNumeric from './components/run-info-num'; import RunInfoNumeric from './components/run-info-num';
@ -31,130 +33,176 @@ const instructions = Platform.select({
type Props = {}; type Props = {};
let id = 0; let id = 0;
export default class App extends Component<Props> { export default class App extends Component<Props> {
constructor(props) { // constructor(props) {
super(props); // super(props);
setInterval(() => { // setInterval(() => {
this.updateCaptures(); // this.updateCaptures();
}, 5000); // }, 5000);
let watchID = navigator.geolocation.watchPosition((position) => { // let watchID = navigator.geolocation.watchPosition((position) => {
this.setState({ // this.setState({
walkMarkers: [ // walkMarkers: [
...this.state.walkMarkers, { // ...this.state.walkMarkers, {
coordinate: position.coords, // coordinate: position.coords,
key: id++ // key: id++
} // }
] // ]
}); // });
}, null, {enableHighAccuracy: true, timeout: 20000, distanceFilter: 15}); // }, null, {enableHighAccuracy: true, timeout: 20000, distanceFilter: 15});
this.state = { // this.state = {
activeWalk: false, // activeWalk: false,
username: "", // username: "",
gameNumber: "", // gameNumber: "",
walkMarkers: [], // walkMarkers: [],
captures: [ // captures: [
// new CapturedArea("fanded", [ // // new CapturedArea("fanded", [
// {latitude: -43.5623, longitude:172.5655}, // // {latitude: -43.5623, longitude:172.5655},
// {latitude: -43.5623, longitude:172.5650}, // // {latitude: -43.5623, longitude:172.5650},
// {latitude: -43.5628, longitude:172.5650}, // // {latitude: -43.5628, longitude:172.5650},
// {latitude: -43.5628, longitude:172.5655} // // {latitude: -43.5628, longitude:172.5655}
// ], 'rgba(255,0,255, 1)', 'rgba(255,0,255, 0.2)', 53), // // ], 'rgba(255,0,255, 1)', 'rgba(255,0,255, 0.2)', 53),
new CapturedArea("samded", [ // new CapturedArea("samded", [
{latitude: -43.5663, longitude:172.5615}, // {latitude: -43.5663, longitude:172.5615},
{latitude: -43.5663, longitude:172.5610}, // {latitude: -43.5663, longitude:172.5610},
{latitude: -43.5668, longitude:172.5610}, // {latitude: -43.5668, longitude:172.5610},
{latitude: -43.5668, longitude:172.5615} // {latitude: -43.5668, longitude:172.5615}
], 'rgba(0,0,255, 1)', 'rgba(0,0,255, 0.2)', 53) // ], 'rgba(0,0,255, 1)', 'rgba(0,0,255, 0.2)', 53)
], // ],
watchID // watchID
}; // };
} // }
updateCaptures(){ // updateCaptures(){
updateAreas(this.state.gameNumber, (polygons) => { // updateAreas(this.state.gameNumber, (polygons) => {
this.setState({ // this.setState({
captures: polygons // captures: polygons
}) // })
}) // })
} // }
setGameNumber(user, number){ // setGameNumber(user, number){
this.setState({username: user, gameNumber: number}) // this.setState({username: user, gameNumber: number})
} // }
startWalk(){ // startWalk(){
this.setState({walkMarkers: [], activeWalk: true}) // this.setState({walkMarkers: [], activeWalk: true})
} // }
stopWalk(){ // stopWalk(){
this.setState({activeWalk: false}) // this.setState({activeWalk: false})
} // }
componentWillUnmount() { // componentWillUnmount() {
navigator.geolocation.stopWatch(this.state.watchID); // navigator.geolocation.stopWatch(this.state.watchID);
} // }
takePicture = async function() {
if (this.camera) {
const options = { quality: 0.5, base64: true };
const data = await this.camera.takePictureAsync(options)
console.log(data.uri);
}
};
render() { render() {
return ( return (
<View style ={{flex: 1}}> <View style={styles.container}>
<MapView <RNCamera
showsUserLocation ref={ref => {
style = {styles.map} this.camera = ref;
initialRegion={{ }}
latitude: -43.5610623, style = {styles.preview}
longitude: 172.5655853, type={RNCamera.Constants.Type.back}
latitudeDelta: 0.02, flashMode={RNCamera.Constants.FlashMode.on}
longitudeDelta: 0.02, permissionDialogTitle={'Permission to use camera'}
}} permissionDialogMessage={'We need your permission to use your camera phone'}
// onRegionChange = {(region)=> this.addMarker((region))} 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>
// <View style ={{flex: 1}}>
// <MapView
// showsUserLocation
// style = {styles.map}
// initialRegion={{
// latitude: -43.5610623,
// longitude: 172.5655853,
// latitudeDelta: 0.02,
// longitudeDelta: 0.02,
// }}
// // onRegionChange = {(region)=> this.addMarker((region))}
// >
<MapView.Polyline // <MapView.Polyline
coordinates={this.state.walkMarkers.map((marker) => marker.coordinate)} // coordinates={this.state.walkMarkers.map((marker) => marker.coordinate)}
strokeWidth={5} // strokeWidth={5}
/> // />
{this.state.captures.map((capture, i) => { // {this.state.captures.map((capture, i) => {
return <MapView.Polygon // return <MapView.Polygon
key={i} // key={i}
coordinates={capture.coordinates} // coordinates={capture.coordinates}
strokeWidth={2} // strokeWidth={2}
strokeColor={capture.strokeColor} // strokeColor={capture.strokeColor}
fillColor={capture.fillColor} // fillColor={capture.fillColor}
/> // />
} // }
) // )
} // }
</MapView> // </MapView>
<Text style={styles.gameNumber}> // <Text style={styles.gameNumber}>
{"name: " + this.state.username + "\ngame: " + this.state.gameNumber} // {"name: " + this.state.username + "\ngame: " + this.state.gameNumber}
</Text> // </Text>
<RoomInput // <RoomInput
ref={instance => this.roomInputModal = instance} // ref={instance => this.roomInputModal = instance}
join={(user, number) => this.setGameNumber(user, number)}/> // join={(user, number) => this.setGameNumber(user, number)}/>
<View style={styles.menu}> // <View style={styles.menu}>
<View style={styles.walk}> // <View style={styles.walk}>
<WalkButton // <WalkButton
start={() => {this.startWalk()}} // start={() => {this.startWalk()}}
stop={() => {this.stopWalk()}} // stop={() => {this.stopWalk()}}
/> // />
</View> // </View>
<View style={styles.infoWrapper}> // <View style={styles.infoWrapper}>
<JoinButton // <JoinButton
modal={() => this.roomInputModal.setModalVisible(true)}/> // modal={() => this.roomInputModal.setModalVisible(true)}/>
</View> // </View>
</View> // </View>
</View> // </View>
); );
} }
} }
const styles = StyleSheet.create({ const styles = StyleSheet.create({
preview: {
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center'
},
capture: {
flex: 0,
backgroundColor: '#fff',
borderRadius: 5,
padding: 15,
paddingHorizontal: 20,
alignSelf: 'center',
margin: 20
},
infoWrapper: { infoWrapper: {
paddingVertical: 0, paddingVertical: 0,
flexDirection: 'row', flexDirection: 'row',

@ -139,8 +139,20 @@ android {
dependencies { dependencies {
compile project(':react-native-maps') compile project(':react-native-maps')
compile fileTree(dir: "libs", include: ["*.jar"]) compile fileTree(dir: "libs", include: ["*.jar"])
compile "com.android.support:appcompat-v7:24.0.0" // compile "com.android.support:appcompat-v7:24.0.0"
// multidex true
implementation 'com.android.support:multidex:1.0.1'; compile ("com.android.support:support-v4:26.0.1") { force = true} //<-- force dependency resolution to 26.0.1 in my case }
// compile ("com.android.support:support-v4:26.0.1") {
// force = true //<-- force dependency resolution to 26.0.1 in my case
// }
compile "com.facebook.react:react-native:+" // From node_modules compile "com.facebook.react:react-native:+" // From node_modules
compile (project(':react-native-camera')) {
exclude group: "com.google.android.gms"
compile 'com.android.support:exifinterface:27.+'
compile ('com.google.android.gms:play-services-vision:12.0.1') {
force = true
}
}
} }
// Run this once to be able to run the application with BUCK // Run this once to be able to run the application with BUCK
@ -149,3 +161,9 @@ task copyDownloadableDepsToLibs(type: Copy) {
from configurations.compile from configurations.compile
into 'libs' into 'libs'
} }
// configurations.all {
// resolutionStrategy {
// force 'com.android.support:support-v4:27.1.0'
// }
// }

@ -4,6 +4,9 @@
<uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/> <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<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" />
<application <application
android:name=".MainApplication" android:name=".MainApplication"

File diff suppressed because one or more lines are too long

@ -1 +1 @@
<18>zsuɹe<C9B9><65>O<EFBFBD>u<EFBFBD>~<08>^ +<2B><><01>r<EFBFBD>f <0C><12><><EFBFBD><EFBFBD><EFBFBD>{<16>

@ -9,6 +9,8 @@ import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage; import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader; import com.facebook.soloader.SoLoader;
import org.reactnative.camera.RNCameraPackage;
import java.util.Arrays; import java.util.Arrays;
import java.util.List; import java.util.List;
@ -24,7 +26,8 @@ public class MainApplication extends Application implements ReactApplication {
protected List<ReactPackage> getPackages() { protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList( return Arrays.<ReactPackage>asList(
new MainReactPackage(), new MainReactPackage(),
new MapsPackage() new MapsPackage(),
new RNCameraPackage()
); );
} }

@ -21,5 +21,18 @@ allprojects {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
url "$rootDir/../node_modules/react-native/android" url "$rootDir/../node_modules/react-native/android"
} }
maven { url "https://jitpack.io" }
maven { url "https://maven.google.com" }
} }
}
/**
* 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"
} }

@ -3,3 +3,6 @@ include ':react-native-maps'
project(':react-native-maps').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-maps/lib/android') project(':react-native-maps').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-maps/lib/android')
include ':app' include ':app'
include ':react-native-camera'
project(':react-native-camera').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-camera/android')

@ -10,7 +10,8 @@
"npm": "^6.4.0", "npm": "^6.4.0",
"react": "16.3.1", "react": "16.3.1",
"react-native": "0.55.4", "react-native": "0.55.4",
"react-native-maps": "^0.21.0" "react-native-maps": "^0.21.0",
"react-native-camera": "^1.2.0-7"
}, },
"devDependencies": { "devDependencies": {
"babel-jest": "23.4.2", "babel-jest": "23.4.2",

Loading…
Cancel
Save