OStack程序员社区-中国程序员成长平台

标题: android - Expo Camera recordAsync promise 未解决 [打印本页]

---

作者: 菜鸟教程小白    时间: 2022-12-13 04:45
标题: android - Expo Camera recordAsync promise 未解决

我开始使用 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>;
  }

}

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

提前致谢

---

Best Answer-推荐答案

我终于意识到，我们不能在渲染组件时直接开始录制。 “直接”是指用户无需采取任何进一步行动。如果我分两步进行(例如等待用户单击某处)，则效果很好。但我在文档中没有看到任何对这种行为/限制的引用。

下面的工作代码:

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>)
    }
  }
}

关于android - Expo Camera recordAsync promise 未解决，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52706203/

---

欢迎光临 OStack程序员社区-中国程序员成长平台 (https://ostack.cn/)

Powered by Discuz! X3.4