反应本机相机不录制视频

Question

我想用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,
  },
});

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

Answer 1

试试带箭头功能的 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)
}

Answer 2

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

Answer 3

我仍然无法弄清楚上面的代码出了什么问题，但是使用 react-native-beautiful-video-recorder 作为包，我终于发现该应用程序的行为符合我的要求。如果有人遇到同样的问题，最好使用 react-native-beautiful-video-recorder.

Answer 4

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

你的初始状态是这个

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

因此如果处理和记录为 false，按钮将呈现，初始按钮启动视频，所以你的初始状态必须是这个

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

反应本机相机不录制视频

React native camera not recording video

reactjs

react-native

react-native-android

react-native-camera

react-native-video