Expo Camera集成TensorFlow时onReady失效问题解决方案咨询

常见修复方案 #

1. 稳定handleCameraStream的函数引用 #

如果handleCameraStream是组件内定义的函数，每次组件渲染都会重新创建实例，可能导致onReady无法在初始挂载时正确绑定。用useCallback包裹函数，保持引用一致性：

import { useCallback } from 'react';

// 组件内部
const handleCameraStream = useCallback((imageAsTensor) => {
  // 你的Tensor处理逻辑
}, []); // 根据实际逻辑添加依赖项

2. 手动触发初始帧处理 #

若onReady在组件挂载时未自动触发，可通过ref获取TensorCamera实例，在组件挂载后手动调用一次处理逻辑：

import { useRef, useEffect } from 'react';

// 组件内部
const cameraRef = useRef(null);

useEffect(() => {
  if (cameraRef.current) {
    cameraRef.current.takePictureAsync({ skipProcessing: true })
      .then((photo) => {
        // 将photo转换为Tensor（需根据你的逻辑调整转换方式）
        handleCameraStream(/* 转换后的Tensor对象 */);
      });
  }
}, []);

// 绑定ref到TensorCamera
<TensorCamera
  ref={cameraRef}
  type={Camera.Constants.Type.front}
  cameraTextureHeight={textureDims.height}
  cameraTextureWidth={textureDims.width}
  resizeHeight={200}
  resizeWidth={152}
  resizeDepth={3}
  onReady={handleCameraStream}
  autorender={true}
/>

3. 确保相机权限与纹理尺寸初始化顺序 #

相机权限未获取或textureDims初始值异常，会导致TensorCamera初始化失败。先获取权限，再设置纹理尺寸：

import { useState, useEffect } from 'react';
import * as Permissions from 'expo-permissions';

// 组件内部
const [hasPermission, setHasPermission] = useState(null);
const [textureDims, setTextureDims] = useState({ height: 0, width: 0 });

useEffect(() => {
  (async () => {
    const { status } = await Permissions.askAsync(Permissions.CAMERA);
    setHasPermission(status === 'granted');
    
    if (status === 'granted') {
      // 权限获取后再设置纹理尺寸
      const { height, width } = Camera.Constants.Preset.hd1080;
      setTextureDims({ height, width });
    }
  })();
}, []);

if (hasPermission === null) return <View />;
if (hasPermission === false) return <Text>无相机访问权限</Text>;

// 确保纹理尺寸有效后再渲染相机组件
return (
  {textureDims.height > 0 && (
    <TensorCamera
      type={Camera.Constants.Type.front}
      cameraTextureHeight={textureDims.height}
      cameraTextureWidth={textureDims.width}
      resizeHeight={200}
      resizeWidth={152}
      resizeDepth={3}
      onReady={handleCameraStream}
      autorender={true}
    />
  )}
);

4. 关闭autorender手动控制渲染 #

autorender可能干扰初始帧触发，尝试关闭该属性，在onReady中手动触发下一次渲染：

<TensorCamera
  ref={cameraRef}
  type={Camera.Constants.Type.front}
  cameraTextureHeight={textureDims.height}
  cameraTextureWidth={textureDims.width}
  resizeHeight={200}
  resizeWidth={152}
  resizeDepth={3}
  onReady={(imageAsTensor) => {
    handleCameraStream(imageAsTensor);
    imageAsTensor.dispose();
    cameraRef.current.render(); // 手动触发下一次渲染
  }}
  autorender={false}
/>

内容的提问来源于stack exchange，提问作者user23345228