React Native Camera 能够捕捉图像但不能录制视频

Question

我正在尝试使用 react-native-camera 包创建一个应用来拍照和录制视频。 我采用示例代码并将其转换为功能组件，因为它对我的应用程序是必需的。我可以拍照并存储在本地缓存中，但是录制视频的功能不起作用，并且当我 console.log 时没有显示任何输出。我还需要实施停止录制吗？我是本机反应的新手，而且我没有在任何地方正确找到功能实现的参考。我对此感到困惑。下面是代码，有两个按钮，一个是图片，一个是视频

...
import { RNCamera } from "react-native-camera";

const App = () => {
  let [flash, setFlash] = useState("off");
  let [zoom, setZoom] = useState(0);
  let [autoFocus, setAutoFocus] = useState("on");
  let [depth, setDepth] = useState(0);
  let [type, setType] = useState("back");
  let [permission, setPermission] = useState("undetermined");
  let [isRecording, setIsRecording] = useState("false");
  let [recordingOptions, setRecordingOptions] = useState({
    mute: false,
    maxDuration: 10,
    quality: RNCamera.Constants.VideoQuality["360p"],
  });
  let cameraRef = useRef(null);
  useEffect(() => {
    Permissions.check("photo").then((response) => {
      // Response is one of: 'authorized', 'denied', 'restricted', or 'undetermined'
      setPermission(response);
    });
  }, []);

  const toggleFlash = () => {
    setFlash(flashModeOrder[flash]);
  };
  const zoomOut = () => {
    setZoom(zoom - 0.1 < 0 ? 0 : zoom - 0.1);
  };
  const zoomIn = () => {
    setZoom(zoom + 0.1 > 1 ? 1 : zoom + 0.1);
  };
  const takePicture = async () => {
    if (cameraRef) {
      const options = { quality: 0.5, base64: true };
      const data = await cameraRef.current.takePictureAsync(options);
      console.log(data.uri);
    }
  };

  const takeVideo = async () => {
    if (cameraRef && !isRecording) {
      try {
        console.log(recordingOptions);
        const recordoptions = {
          mute: false,
          maxDuration: 10,
          quality: RNCamera.Constants.VideoQuality["360p"],
        };
        const promise = cameraRef.current.recordAsync(recordOptions);

        if (promise) {
          setIsRecording(true);
          const data = await promise;
          console.log("takeVideo", data.uri);
        }
      } catch (e) {
        console.error(e);
      }
    }
  };

  return (
    <View style={styles.container}>
      <RNCamera
        ref={cameraRef}
        style={styles.preview}
        type={type}
        flashMode={flash}
      />
      <View style={{ flex: 0, flexDirection: "row", justifyContent: "center" }}>
        <TouchableOpacity onPress={takePicture} style={styles.capture}>
          <Text style={{ fontSize: 14 }}> TAKE PICTURE </Text>
        </TouchableOpacity>
      </View>
      <View style={{ flex: 0, flexDirection: "row", justifyContent: "center" }}>
        <TouchableOpacity onPress={takeVideo} style={styles.capture}>
          <Text style={{ fontSize: 14 }}> TAKE VIDEO </Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

export default App;

Answer 1

重构这些行

const promise = cameraRef.current.recordAsync(recordOptions);

if (promise) {
   setIsRecording(true);
   const data = await promise;
   console.log("takeVideo", data.uri);
}

到

setIsRecording(true);
const data = await cameraRef.current.recordAsync(recordOptions);
console.log(data);