1

我在我的 react native 应用程序中使用expo-camera进行视频录制。一切都在开发中运行良好，但是当我生成一个APK 文件时，相机没有录制视频。我使用了 useRef 钩子是我的代码，它在单击开始录制按钮时触发并触发startRecord()函数，该函数使用 constrecordedVideo = await cameraRef.current.recordAsync(); . 我认为可能cameraRef.current.recordAsync()在生产中不起作用。

任何建议或解决方案都会非常有帮助。

谢谢！

**Video Recording Component**

import React, { useState, useEffect, useRef } from "react";
import { View, Text, TouchableOpacity, StyleSheet, Alert } from "react-native";
// packages
import { Camera } from "expo-camera";
import * as FileSystem from "expo-file-system";
import {
  widthPercentageToDP as wp,
  heightPercentageToDP as hp,
} from "react-native-responsive-screen";

// Functional Component
const Recordvideo = (props) => {
  // Ref
  const cameraRef = useRef(null);
  // States
  const [video, setVideo] = useState(null);
  const [recording, setRecording] = useState(false);
  const [hasPermission, setHasPermission] = useState(null);

    // getting camera permission
    useEffect(() => {
      getPermission();
    }, [getPermission]);

    const getPermission = async () => {
      const { status } = await Camera.requestPermissionsAsync();
      if (status === "granted") {
        setHasPermission(true);
      }
    };

    // start/stop video recording
    const toogleRecord = () => {
      if (recording) {
        stopRecord();
      } else {
        startRecord();
      }
    };

    // start recording
    const startRecord = async () => {
      if (cameraRef.current) {
        setRecording(true);
        const recordedVideo = await cameraRef.current.recordAsync();
        setVideo(recordedVideo);
      }
    };

    // stop recording
    const stopRecord = async () => {
      setRecording(false);
      cameraRef.current.stopRecording();
    };
  
    // saving recorded video
    const saveVideo = async () => {
      let fileInfo = await FileSystem.getInfoAsync(video.uri);
      if (fileInfo.size <= 5242880) {
        props.navigation.push("Post", {
          VIDEOURL: video.uri,
          VIDEOID: 1,
        });
      } else {
        Alert.alert("Video too large please upload a shorter video");
        props.navigation.goBack();
      }
    };

  // checking camera permission
  if (hasPermission === false) {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Text>No access to camera</Text>
      </View>
    );
  }

  // return statement
  return (
    <View style={styles.responsiveBox}>
      <Camera
        ref={cameraRef}
        style={{
          justifyContent: "flex-end",
          alignItems: "center",
          flex: 1,
          width: "100%",
        }}
      >
        {video && (
          <TouchableOpacity
            onPress={saveVideo}
            style={{
              padding: 20,
              width: "100%",
              backgroundColor: "#fff",
            }}
          >
            <Text style={{ textAlign: "center", color: "#000" }}>Complete</Text>
          </TouchableOpacity>
        )}
        <TouchableOpacity
          onPress={toogleRecord}
          style={{
            padding: 20,
            width: "100%",
            backgroundColor: recording ? "#ef4f84" : "#4fef97",
          }}
        >
          <Text style={{ textAlign: "center" }}>
            {recording ? "Stop" : "Record"}
          </Text>
        </TouchableOpacity>
      </Camera>
    </View>
  );
};

// styles
const styles = StyleSheet.create({
  responsiveBox: {
    width: wp("100%"),
    height: hp("100%"),
    alignItems: "center",
    justifyContent: "center",
  },
});

export default Recordvideo;
4

1 回答 1

0

而不是将 useRef 作为状态，例如： const [cameraRef , SetCameraRef] = useState() 并在 Camera 组件中调用 ref，如 <Camera ref = {setCameraRef(ref)} ..../>

于 2021-02-18T17:29:24.477 回答