Fla sh не работает при захвате видео с помощью собственной камеры React - PullRequest
0 голосов
/ 17 июня 2020

Проблема:

Я настроил камеру в моем собственном приложении для реакции с помощью пакета RNcamera. Но режим fla sh не работает с захватом видео, но работает с захватом изображения. Вот как я создал свой код.

const recordVideo = async (
  camera,
  recording,
  seconds,
  setRecording,
  setSeconds,
) => {
  if (camera) {
    if (!recording) {
      startRecording(recording, setRecording, seconds, setSeconds, camera);
    } else {
      stopRecording(camera, setSeconds);
    }
  }
};

const startRecording = async (
  recording,
  setRecording,
  seconds,
  setSeconds,
  camera,
) => {
  setRecording(true);
  console.log('>>>>>> start recording seconds', seconds);
  const cameraConfig = {maxDuration: 20};
  const data = await camera.recordAsync(cameraConfig);
  CameraRoll.save(data.uri, 'video')
    .then((onfulfilled) => {
      console.log(onfulfilled);
    })
    .catch((error) => console.log(error));
  console.log('>>>>>> data', data);
  setRecording(false);
};

const stopRecording = (camera, setSeconds) => {
  camera.stopRecording();
  setSeconds(0);
};

const secondsToMMSS = (seconds) => {
  console.log('>>>>>> seconds', seconds);
  let m = Math.floor(seconds / 60);
  let s = Math.floor(seconds % 60);

  let mDisplay = m < 10 ? `0${m}` : `${m}`;
  let sDisplay = s < 10 ? `0${s}` : `${s}`;
  return `${mDisplay}:${sDisplay}`;
};

const VideoRecording = (props) => {
  const [type, setType] = useState(RNCamera.Constants.Type.back);
  const [flashMode, setFlashMode] = useState(RNCamera.Constants.FlashMode.off);
  const [recording, setRecording] = useState(false);
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    if (recording) {
      countRecordTime = setInterval(() => setSeconds(seconds + 1), 1000);
    }
    if (!recording && countRecordTime) {
      clearInterval(countRecordTime);
    }

    if (seconds === 20 && countRecordTime) {
      clearInterval(countRecordTime);
      setRecording(false);
    }

    return () => {
      if (countRecordTime) {
        clearInterval(countRecordTime);
      }
    };
  }, [recording, seconds]);

  return (
    <View style={styles.container}>
      <RNCamera
        style={styles.preview}
        autoFocus={RNCamera.Constants.AutoFocus.on}
        type={type}
        flashMode={flashMode}
        faceDetectionMode={RNCamera.Constants.FaceDetection.Mode.fast}
        ratio="4:3"
        whiteBalance={RNCamera.Constants.WhiteBalance.auto}
        captureAudio={true}
        androidCameraPermissionOptions={{
          title: 'Permission to use camera',
          message: 'We need your permission to use your camera',
          buttonPositive: 'Ok',
          buttonNegative: 'Cancel',
        }}
        androidRecordAudioPermissionOptions={{
          title: 'Permission to use audio recording',
          message: 'We need your permission to use your audio',
          buttonPositive: 'Ok',
          buttonNegative: 'Cancel',
        }}>
        {({camera, status, recordAudioPermissionStatus}) => {
          if (status !== 'READY') {
            return <PendingView />;
          }
          return (
            <>
              <View style={styles.cameraInner}>
                <TouchableOpacity
                  style={styles.capture}
                  onPress={(_) => {
                    switch (flashMode) {
                      case RNCamera.Constants.FlashMode.off:
                        setFlashMode(RNCamera.Constants.FlashMode.auto);
                        break;

                      case RNCamera.Constants.FlashMode.auto:
                        setFlashMode(RNCamera.Constants.FlashMode.on);
                        break;

                      case RNCamera.Constants.FlashMode.on:
                        setFlashMode(RNCamera.Constants.FlashMode.off);
                        break;
                    }
                  }}>
                  <Image
                    source={
                      flashMode === RNCamera.Constants.FlashMode.auto
                        ? require('../../assets/img/flashAuto.png')
                        : flashMode === RNCamera.Constants.FlashMode.on
                        ? require('../../assets/img/flashOn.png')
                        : require('../../assets/img/flashOff.png')
                    }
                    style={styles.flashIcon}
                    resizeMode={'contain'}
                  />
                </TouchableOpacity>
                {/* <TouchableOpacity
                  onPress={() => takePicture(camera)}
                  style={styles.capture}>
                  <Image
                    source={require('../../assets/img/cameraButton.png')}
                    style={{width: 50, height: 50}}
                    resizeMode={'contain'}
                  />
                </TouchableOpacity> */}
                <TouchableOpacity
                  style={styles.iconContainer}
                  onPress={() =>
                    recordVideo(
                      camera,
                      recording,
                      seconds,
                      setRecording,
                      setSeconds,
                    )
                  }>
                  <EntypoIcon
                    style={styles.icon}
                    size={40}
                    color={recording ? 'red' : 'white'}
                    name="video-camera"
                  />
                  {recording ? (
                    <AppText styles={styles.recordingTime}>
                      {secondsToMMSS(seconds)}
                    </AppText>
                  ) : null}
                </TouchableOpacity>
                <TouchableOpacity
                  style={styles.capture}
                  onPress={(_) => {
                    if (type === RNCamera.Constants.Type.back) {
                      setType(RNCamera.Constants.Type.front);
                    } else {
                      setType(RNCamera.Constants.Type.back);
                    }
                  }}>
                  <Image
                    source={require('../../assets/img/cameraFlipIcon.png')}
                    style={styles.cameraType}
                    resizeMode={'contain'}
                  />
                </TouchableOpacity>
              </View>
              <TouchableOpacity
                style={styles.closeButton}
                onPress={() => closeCamera(props.navigation)}>
                <IoniconsIcon
                  name={'ios-close'}
                  style={styles.closeButtonIcon}
                />
              </TouchableOpacity>
            </>
          );
        }}
      </RNCamera>
    </View>
  );
}; 

Я понятия не имею по этому поводу. поэтому я много искал в Google, чтобы найти лучший ответ, но не мог. Так что, если кто-то может мне помочь в этом вопросе, это здорово. Спасибо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...