世博相机 recordAsync 承诺未解决

Question

我开始使用 expo/react Native 开发移动应用程序，但我在处理相机对象时遇到一些问题：

我有一个相机对象，我在 componentDidMount 处开始录制（recordAsync），并在 componentWillUnmount 处停止它（stopRecording）。然而，promise 从未得到解决（then、catch no finally 都没有被调用）

我做错了什么吗？ 这是代码：

import { Camera, Permissions } from 'expo';

import React from 'react';


export default class CameraReaction extends React.Component {
  constructor(props){
    super(props)
    this.takeFilm = this.takeFilm.bind(this)       
    this.isFilming=false
    this.cameraScreenContent = this.renderCamera()
  }

  componentDidMount(){
    if (this.props.shouldrecording && !this.isFilming ){
      this.takeFilm()
    }
  }
  componentWillUnmount(){
    this.camera.stopRecording()
  }

  saveMediaFile = async video => {
    console.log("=======saveMediaFile======="); 
  }

  renderCamera = () => {
    let self = this
    return (
      <View style={{ flex: 1 }}>
        <Camera
          ref={ref => {self.camera=ref}}
          style={styles.camera}
          type='front'
          whiteBalance='off'
          ratio='4:3'
          autoFocus='off'
          >
        </Camera>
      </View>
    );
  }

  takeFilm(){
    let self = this
    try{
      self.camera.recordAsync()
      .then(data => {
        self.saveMediaFile(data),
        self.isFilming=false
      })
      .catch(error => {console.log(error)})
      this.isFilming = true
    }
    catch(e){      
      this.isFilming = false      
    }            
  };

  render() {    
    return <View style={styles.container}>{this.cameraScreenContent}</View>;
  }

}

有人知道我做错了什么吗？

提前致谢

Answer 1

我终于意识到我们不能在渲染组件时直接开始录制。我所说的“直接”是指无需用户采取任何进一步操作。如果我分两步完成（即等待用户单击某处），如果效果很好。但我在文档中没有看到任何对此行为/限制的引用。

工作代码如下：

import React from 'react';
import { StyleSheet, Text, View , TouchableOpacity} from 'react-native';
import { Camera, Permissions} from 'expo';

export default class App extends React.Component {
  constructor(props){
    super(props)    
    this.camera=undefined
    this.state = {permissionsGranted:false,bcolor:'red'}
    this.takeFilm = this.takeFilm.bind(this)
  }

  async componentWillMount() {    
    let cameraResponse = await Permissions.askAsync(Permissions.CAMERA)
    if (cameraResponse.status == 'granted'){
      let audioResponse = await Permissions.askAsync(Permissions.AUDIO_RECORDING);
      if (audioResponse.status == 'granted'){
        this.setState({ permissionsGranted: true });
      }
    }                  
  }

  takeFilm(){    
    let self = this;
    if (this.camera){
      this.camera.recordAsync().then(data => self.setState({bcolor:'green'}))
    }    
  }

  render() {    
    if (!this.state.permissionsGranted){
      return <View><Text>Camera permissions not granted</Text></View>
    } else {
      return (
        <View style={{flex: 1}}>
          <View style={{ flex: 1 }}>
            <Camera ref={ref => this.camera = ref} style={{flex: 0.3}} ></Camera>
          </View>
          <TouchableOpacity style={{backgroundColor:this.state.bcolor, flex:0.3}} onPress={() => {

            if(this.state.cameraIsRecording){
              this.setState({cameraIsRecording:false})
              this.camera.stopRecording();
            }
            else{
              this.setState({cameraIsRecording:true})
              this.takeFilm();
            }
          }} />
        </View>)
    }
  }
}

Answer 2

对我有用的是在

recordAsync

 上运行 

onCameraReady

import { CameraView } from 'expo-camera'
function CameraAutoStartsRecording() {
  const cameraRef = useRef<CameraView | null>(null)
  
  const startRecording = async () => {
    // Check all preconditions
    
    const video = await cameraRef.current.recordAsync()
    // Use video variable
  }
  
  return <CameraView
    ref={cameraRef}
    onCameraReady={startRecording}
  />
}