为什么反应本机相机会提前停止录制?

时间:2019-01-22 18:19:21

标签: react-native react-native-camera

当我致电const data = await cam.recordAsync(options);时,诺言立即解决,并在我明确致电cam.stopRecording()之前很早就离开了。

我尝试将相机实例作为属性传递,但是在读取该属性的功能(例如recordAsync)时遇到麻烦。 console.warn语句仅被调用一次,因此不像该函数被调用了两次。

/CameraContainer.tsx

public render() {
    return (
      <Camera
        onRecord={this.onRecord}
        onCameraTouch={this.onCameraTouch}
        isRecording={this.state.isRecording}
        cameraType={this.state.cameraType} />
    )
  }

  private onRecord = (cam: RNCamera) => {
    this.setState(
      {
        isRecording: !this.state.isRecording
      },
      async () => {
        console.warn(`recordingStatus changed to ${this.state.isRecording}`)
        if (this.state.isRecording) {
          const options: RecordOptions = {
            quality: RNCamera.Constants.VideoQuality['480p'],
            maxDuration: 15
          };
          console.warn(options);
          try {
            const data = await cam.recordAsync(options);
            console.warn('recording finished navigating away');
            this.props.navigation.navigate('RecordingReview', {
              videoUri: data.uri
            });
          } catch {
            console.warn('error');
          }
        } else {
          console.warn('Stopping video recording');
          // cam.stopRecording();
        }
      }
    );
  }

/Camera.tsx

interface IProps {
  cameraType: any,
  isRecording: boolean,
  onCameraTouch: () => void,
  onRecord: (cam: RNCamera) => void,
}

export default class Camera extends PureComponent<IProps> {
  private camera!: RNCamera;

  public render() {
    return (
      <RNCamera
        ref={(cam: RNCamera) => {
          this.camera = cam;
        }}
        style={Styles.camera}
        type={this.props.cameraType}
        permissionDialogTitle={I18n.t('RECORDING_permissionTitle')}
        permissionDialogMessage={I18n.t('RECORDING_permissionMessage')}
        defaultVideoQuality={RNCamera.Constants.VideoQuality['480p']}
      >
        <RecordingControlsContainer
          defaultCameraType={this.props.cameraType}
          onCameraTouch={this.props.onCameraTouch}
          onRecord={() => { this.props.onRecord(this.camera) }}
          isRecording={this.props.isRecording} />
      </RNCamera>
    )
  }
}

/RecordingIconContainer.tsx

interface IProps {
  style?: ViewStyle,
  onRecord: () => void
}

interface IState {
  isRecording: boolean
}

export default class RecordingIconContainer extends Component<IProps> {
  public readonly state: IState = {
    isRecording: false
  };

  public render() {
    return (
      <View style={this.props.style}>
        <RecordingIcon onPress={this.flipIcon} isRecording={this.state.isRecording} />
      </View>
    )
  }

  private flipIcon = () => {
    this.setState({ isRecording: !this.state.isRecording });
    this.props.onRecord();
  };
}

我希望await cam.recordAsync(options)等到遇到maxDurationmaxFileSize或明确呼叫cam.stopRecording()时,它会在我开始记录后立即消失。

0 个答案:

没有答案