I'm trying to do a text detector device, and I'm having trouble with react-native-camera. First, I have this error message: Preview is paused - resume it before taking a picture. Then I tryed the method resumePreview before takePictureAsync, and the new error message is takePicture failed.
Am I missing something? Below is my code. I hope anyone can help me. Thank you for advance.
import React, { useState, useRef } from "react";
import { View, Text, Button, StyleSheet } from "react-native";
import RNTextDetector from "react-native-text-detector";
import { RNCamera } from "react-native-camera";
const App = () => {
const camera = useRef(null);
const takePhoto = async () => {
try {
const options = {
quality: 0.8,
base64: true,
skipProcessing: true
};
camera.current.resumePreview();
const { uri } = await camera.current.takePictureAsync(options);
console.log(uri);
const visionResp = await RNTextDetector.detectFromUri(uri);
console.log("visionResp", visionResp);
} catch (err) {
console.warn(err);
}
};
return (
<View style={styles.screen}>
<RNCamera
ref={camera}
type={RNCamera.Constants.Type.back}
autoFocus={RNCamera.Constants.AutoFocus.off}
flashMode={RNCamera.Constants.FlashMode.off}
androidCameraPermissionOptions={{
title: "Permission to use camera",
message: "We need your permission to use your camera",
buttonPositive: "Ok",
buttonNegative: "Cancel"
}}
/>
<View style={styles.titleContainer}>
<Text style={styles.title}>Reconhecimento de Texto</Text>
</View>
<View style={styles.contentContainer}>
<Button title="Clique para tirar uma foto" onPress={takePhoto} />
<Text style={styles.contentText}>Teste</Text>
</View>
</View>
);
};
const styles = StyleSheet.create({
screen: {
flex: 1,
justifyContent: "center",
alignItems: "center",
paddingVertical: 10,
backgroundColor: "#000"
},
titleContainer: {
height: "10%",
padding: 10
},
title: {
color: "#FFF",
fontFamily: "Verdana",
fontSize: 20
},
contentContainer: {
flex: 1
},
contentText: {
color: "#FFF",
fontFamily: "Verdana",
fontSize: 16
}
});
export default App;