Image Labeling - Cloud and local

Camera.js

@@ -0,0 +1,143 @@
+'use strict';
+import React, { PureComponent } from 'react';
+import { StyleSheet, Text, TouchableOpacity, View, PermissionsAndroid } from 'react-native';
+import { IconButton, Colors, Avatar } from 'react-native-paper';
+import CameraRoll from "@react-native-community/cameraroll";
+import { RNCamera } from 'react-native-camera';
+import { withNavigationFocus } from 'react-navigation';
+import { CheckConnectivity } from './InternetCheck';
+//import React, { Component } from "react";
+//import { View, Text, Button, Alert, NetInfo, Platform } from "react-native";
+//import { firebase } from '@react-native-firebase/ml-vision';
+
+class Camera extends PureComponent {
+
+  constructor(props) {
+    super(props)
+    this.state = {
+      flashOn: false,
+      cameraPermission: false
+    }
+  }
+
+  componentDidMount() {
+  }
+
+  sendData = () => {
+    this.props.parentCallback([this.state.snaped, this.state.dataUri]);
+  }
+
+
+
+  render() {
+    const { isFocused } = this.props
+    const { hasCameraPermission } = this.state;
+    console.log(hasCameraPermission)
+    if (hasCameraPermission === null) {
+      return <View />;
+    } else if (hasCameraPermission === false) {
+      return <Text>No access to camera</Text>;
+    } else if (isFocused) {
+      return (
+        <View style={styles.container}>
+          <RNCamera
+            ref={ref => {
+              this.camera = ref;
+            }}
+            style={styles.preview}
+            type={RNCamera.Constants.Type.back}
+            flashMode={this.state.flashOn ? RNCamera.Constants.FlashMode.on : RNCamera.Constants.FlashMode.off}
+            androidCameraPermissionOptions={{
+              title: 'Permission to use camera',
+              message: 'We need your permission to use your camera',
+              buttonPositive: 'Ok',
+              buttonNegative: 'Cancel',
+            }}
+            captureAudio={false}
+            playSoundOnCapture={true}
+          // onGoogleVisionBarcodesDetected={({ barcodes }) => {
+          //   console.log(barcodes);
+          // }}
+          // onFacesDetected={(face)=>{
+          //   console.log(face);
+          // }}
+          // onTextRecognized={(text)=>{
+          //   console.log(text);
+          // }}
+          >
+            <TouchableOpacity
+              style={{ justifyContent: 'flex-start', marginLeft: 20, marginTop: 20 }}
+              onPress={() => this.setState({ flashOn: !this.state.flashOn })}
+
+            >
+              <Avatar.Icon size={60} color='white' icon={this.state.flashOn ? 'flash' : 'flash-off'} />
+            </TouchableOpacity>
+          </RNCamera>
+          <View style={styles.bottom}>
+            <IconButton
+              icon="circle"
+              color={Colors.white}
+              size={80}
+              onPress={() => this.takePicture()} //check internet also at this point 
+              animated={true}
+              style={{ backgroundColor: "grey" }}
+            />
+          </View>
+        </View>
+      );
+    } else {
+      return <View />;
+    }
+  }
+
+  takePicture = async () => {
+    if (this.camera.state.isAuthorized) {
+      const options = { quality: 0.5, base64: true };
+      const data = await this.camera.takePictureAsync(options);
+      try {
+        const granted = await PermissionsAndroid.request(
+          PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
+        );
+        if (granted === PermissionsAndroid.RESULTS.GRANTED) {
+          CameraRoll.saveToCameraRoll(data.uri);
+          this.setState({
+            snaped: true,
+            dataUri: data.uri
+          })
+          CheckConnectivity(data.uri)
+          this.sendData()
+
+        } else {
+          await PermissionsAndroid.request(
+            PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
+          );
+        }
+      } catch (err) {
+        return false
+      }
+    }
+  };
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'white',
+    height: "100%",
+    width: "100%"
+
+  },
+  preview: {
+    justifyContent: 'flex-start',
+    height: "70%",
+    width: "100%"
+  },
+  bottom: {
+    flex: 1,
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    marginBottom: 10
+  },
+});
+
+export default withNavigationFocus(Camera);

InternetCheck.js

@@ -0,0 +1,64 @@
+import React, { Component } from "react";
+import { View, Text, Button, Alert, NetInfo, Platform } from "react-native";
+import { firebase } from '@react-native-firebase/ml-vision';
+
+export default class InternetCheck extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  CheckConnectivity = async(filePath) => {
+    // For Android devices
+    if (Platform.OS === "android") {
+      NetInfo.isConnected.fetch().then(isConnected => {
+        if (isConnected) {   //Cloud image labeling
+            const labels = await firebase.vision().cloudImageLabelerProcessImage(filePath, {
+                confidenceThreshold: 0.8,   //Returns an array of results with the predicted name(text), entity ID(if available),confidence level
+            });
+            console.log(labels);  
+
+          //Alert.alert("You are online!"); //imageLabel-Cloud
+        } else {  //imageLabel-Local
+            const labels = await firebase.vision().imageLabelerProcessImage(filePath, { 
+                confidenceThreshold: 0.8,
+            });
+            console.log(labels);
+         // Alert.alert("You are offline!");  
+        }
+      });
+    } else {
+      // For iOS devices
+      NetInfo.isConnected.addEventListener(
+        "connectionChange",
+        this.handleFirstConnectivityChange
+      );
+    }
+  };
+
+  handleFirstConnectivityChange = isConnected => {
+    NetInfo.isConnected.removeEventListener(
+      "connectionChange",
+      this.handleFirstConnectivityChange
+    );
+
+    if (isConnected === false) {
+      Alert.alert("You are offline!");  //ImageLabel-Local
+    } else {
+      Alert.alert("You are online!");  //ImageLabel-Cloud
+    }
+  };
+
+  /*render() {
+    return (
+      <View>
+        <Button
+          onPress={() => this.CheckConnectivity()}  //No need of this button
+          title="Check Internet Connectivity"
+          color="#841584"
+          accessibilityLabel="Learn more about this purple button"
+        />
+      </View>
+    );
+  }*/
+}