反应本机相机不录制视频答案

【问题标题】：React native camera not recording video反应本机相机不录制视频
【发布时间】：2020-08-31 07:32:33
【问题描述】：

我想用react native video实现视频录制功能但是开始录制功能没有任何响应，我什至安慰看看它是否被调用，实际上不是，我无法弄清楚我做了什么错了。

下面是我写的具体代码

import React from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  ActivityIndicator,
} from 'react-native';
import {RNCamera} from 'react-native-camera';

export default class Shoot extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      recording: false,
      processing: true,
    };
  }
  async startRecording() {
    this.setState({recording: true});
    // default to mp4 for android as codec is not set
    const {uri, codec = 'mp4'} = await this.camera.recordAsync();
  }
  stopRecording = () => {
    this.camera.stopRecording();
  };
  render() {
    const {recording, processing} = this.state;

    let button = (
      <TouchableOpacity
        onPress={this.startRecording.bind(this)}
        style={styles.capture}>
        {console.log('aaa')}
        <Text style={{fontSize: 14}}> RECORD </Text>
      </TouchableOpacity>
    );
    if (recording) {
      button = (
        <TouchableOpacity
          onPress={this.stopRecording.bind(this)}
          style={styles.capture}>
          <Text style={{fontSize: 14}}> STOP </Text>
        </TouchableOpacity>
      );
    }
    if (processing) {
      button = (
        <View style={styles.capture}>
          <ActivityIndicator animating size={18} />
        </View>
      );
    }
    return (
      <View style={styles.container}>
        <RNCamera
          ref={(ref) => {
            this.camera = ref;
          }}
          style={styles.preview}
          type={RNCamera.Constants.Type.back}
          flashMode={RNCamera.Constants.FlashMode.on}
          permissionDialogTitle={'Permission to use camera'}
          permissionDialogMessage={
            'We need your permission to use your camera phone'
          }
        />
        <View style={{flex: 0, flexDirection: 'row', justifyContent: 'center'}}>
          {button}
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: 'black',
  },
  preview: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  capture: {
    flex: 0,
    backgroundColor: '#e75480',
    borderRadius: 40,
    width: 80,
    height: 80,
    paddingHorizontal: 20,
    alignSelf: 'center',
    margin: 20,
  },
});

所以在这里，startRecording 的按钮可触摸性 onpress 根本没有被调用。任何帮助都会很棒，谢谢

【问题讨论】：

不，还是一样的@Riddhi

标签： reactjs react-native react-native-android react-native-camera react-native-video

【解决方案1】：

我仍然不知道上面的代码出了什么问题，但是使用 react-native-beautiful-video-recorder 作为包，我终于发现该应用程序可以按照我的要求运行。如果有人遇到同样的问题，最好使用react-native-beautiful-video-recorder。

【讨论】：

【解决方案2】：

尝试使用带箭头功能的 onPress

  <TouchableOpacity
    onPress={() => this.startRecording()}
    style={styles.capture}>
    {console.log('aaa')}
    <Text style={{fontSize: 14}}> RECORD </Text>
  </TouchableOpacity>

然后绑定这个

constructor(props) {
    super(props);
    this.state = {
      recording: false,
      processing: true,
    };

    this.startRecording = this.startRecording.bind(this)
}

【讨论】：

不，用箭头函数绑定 this 似乎不起作用
我更新了我的答案，可以在构造函数中绑定函数和方法
还是一样的行为

【解决方案3】：

render() {
  const {recording, processing} = this.state;
  let button;

  if (recording) {
    button = (
    <TouchableOpacity
      onPress={this.stopRecording.bind(this)}
      style={styles.capture}>
      <Text style={{fontSize: 14}}> STOP </Text>
    </TouchableOpacity>
  );
}
else if (processing) {
  button = (
    <View style={styles.capture}>
      <ActivityIndicator animating size={18} />
    </View>
  );
}
else {
 button = (
  <TouchableOpacity
    onPress={this.startRecording.bind(this)}
    style={styles.capture}>
    {console.log('aaa')}
    <Text style={{fontSize: 14}}> RECORD </Text>
  </TouchableOpacity>
);

【讨论】：

如果你能发一份这样的工作零食仅供参考，那就太好了，因为它不适合我，我仍然不确定为什么

【解决方案4】：

你正在处理的问题比你想象的要简单得多

你的初始状态是这个

this.state = {
      recording: false,
      processing: true,
    };

所以如果处理和记录为假，按钮就会呈现，初始按钮开始播放视频，所以你的初始状态必须是这个

this.state = {
      recording: false,
      processing: false,
    };

【讨论】：