延迟使用 React Native Camera / Expo Camera 捕获图像，设置“处理消息”？

Posted 2023-03-11

【中文标题】延迟使用 React Native Camera / Expo Camera 捕获图像，设置“处理消息”？

【英文标题】：Delay on the capture of an image with React Native Camera / Expo Camera, set 'processing message'?

【发布时间】：2020-06-01 10:58:16

【问题描述】：

我的应用程序从用户拍照到 android 处理图像有很大的延迟。

expo android 相机延迟问题已在此得到解答：Delay on the capture of an image - React Native Camera / Expo Camera。

我想看看，以及在takePictureAsync 上查看skipProcessing，有没有办法为on processing 设置回调？我想让用户知道正在发生一些事情，或者他们可能会尝试拍摄另一张照片（相机保持打开状态直到图像被处理，这并不理想）。

这是我的代码：

export default class CameraComponent extends Component
  constructor(props) 
    super(props)
  

  render() 
    <Camera
      ref=(ref) => 
        this.camera = ref;
      
      type=Camera.Constants.Type.back
    >
      <TouchableOpacity
        onPress=this.takePicture
      >
        <View>
          <FontAwesome
            name="camera"
          />
        </View>
      </TouchableOpacity>
    </Camera>;
  

  takePicture = async () => 
    const photo = await this.camera.takePictureAsync(
      skipProcessing: true,
    );

    this.props.navigation.navigate("CameraConfirm", 
      img_url: photo.img_url,
      img_base64: photo.img_base64,
    );
  

我在文档中看不到任何内容，在 React Native 中是否有解决方法？我尝试设置状态，但在takePictureAsync 之后仍然会发生这种情况，所以没有效果。

【参考方案1】：

我找到了一种使用camera2API 和onPictureSaved 的解决方法。文档说camera2API 可能存在问题，尽管我没有看到任何奇怪的事情发生（到目前为止）。

现在的代码如下所示：

export default class CameraComponent extends Component
  constructor(props) 
    super(props)

    this.state = 
      is_photo_taken: false,
    ;
  

  render() 
    <Camera
      ref=(ref) => 
        this.camera = ref;
      
      type=Camera.Constants.Type.back
      // add styling to show/hide camera:
      style=
        display: this.state.is_photo_taken ? "none" : null,
      
      useCamera2Api=true // add this line
    >
      <TouchableOpacity
        onPress=this.takePicture
      >
        <View>
          <FontAwesome
            name="camera"
          />
        </View>
      </TouchableOpacity>
    </Camera>;

    // add loading element with conditional show/hide:
    <Text
      style=
        display: !this.state.is_photo_taken ? "none" : null,
      
    >
      Loading image...
    </Text>
  

  takePicture = async () => 
    const photo = await this.camera.takePictureAsync(
      onPictureSaved: this.setState( is_photo_taken: true ), // add this line
      // remove skipProcessing
    );

    this.props.navigation.navigate("CameraConfirm", 
      img_url: photo.img_url,
      img_base64: photo.img_base64,
    );
  

此外，由于现在使用的是onPictureSaved，这意味着如果不需要，现在可以省略skipProcesssing。

我在整个块周围使用了显示/隐藏而不是三元组或&&，以避免从页面中丢失相机元素。如果相机元素在拍摄照片后立即丢失，则它无法继续处理图像。

我希望这对某人有所帮助。

【讨论】：

这个解决方案帮助我解决了我的问题。在我的情况下，单击捕获/照片按钮后，我将显示一个加载程序来代替按钮，直到图像被处理和显示