1

我是 Web 开发的新手，我正在尝试使用 expo 构建一个图像识别应用程序进行测试。我的相机代码如下。在屏幕加载时，我的“捕获”按钮出现黑屏（不是相机）。当我单击捕获时，我收到错误：

未处理的承诺拒绝：错误：相机尚未准备好。等待“onCameraReady”回调。

我的代码如下

import { Dimensions, Alert, StyleSheet, ActivityIndicator } from 'react-native';
// import { RNCamera } from 'react-native-camera';
import CaptureButton from './CaptureButton.js'
import { Camera } from 'expo-camera';


export default class AppCamera extends React.Component {
    constructor(props){
        super(props);
        this.state = { 
            identifiedAs: '',
            loading: false
        }
    }

    
    takePicture = async function(){
        if (this.camera) {
            // Pause the camera's preview
            this.camera.pausePreview();
            // Set the activity indicator
            this.setState((previousState, props) => ({
                loading: true
            }));
            // Set options
            const options = {
                base64: true
            };
            // Get the base64 version of the image
            const data = await this.camera.takePictureAsync(options)
            // Get the identified image
            this.identifyImage(data.base64);
        }
    }
    identifyImage(imageData){
        // Initialise Clarifai api
        const Clarifai = require('clarifai');
        const app = new Clarifai.App({
            apiKey: '8d5ecc284af54894a38ba9bd7e95681b'
        });
        // Identify the image
        app.models.predict(Clarifai.GENERAL_MODEL, {base64: imageData})
        .then((response) => this.displayAnswer(response.outputs[0].data.concepts[0].name)
        .catch((err) => alert(err))
        );
    }
    displayAnswer(identifiedImage){
        // Dismiss the acitivty indicator
        this.setState((prevState, props) => ({
            identifiedAs:identifiedImage,
            loading:false
        }));
    // Show an alert with the answer on
    Alert.alert(
            this.state.identifiedAs,
            '',
            { cancelable: false }
        )
        // Resume the preview
        this.camera.resumePreview();
    }



    render () {
        const styles = StyleSheet.create({
            preview: {
                flex: 1,
                justifyContent: 'flex-end',
                alignItems: 'center',
                height: Dimensions.get('window').height,
                width: Dimensions.get('window').width,
            },
            loadingIndicator: {
                flex: 1,
                alignItems: 'center',
                justifyContent: 'center',
            }
        });

        return (
            <Camera ref={ref => {this.camera = ref;}}style={styles.preview}>
                 <ActivityIndicator size="large" style={styles.loadingIndicator} color="#fff" animating={this.state.loading}/>
                 <CaptureButton buttonDisabled={this.state.loading} onClick={this.takePicture.bind(this)}/>
            </Camera>
        )
    }



}```

Could someone kindly point me in the right direction to fix this error?
4

0 回答 0