反應原生相機不錄制視頻

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

我仍然無法弄清楚上面的代碼出了什么問題，但是使用 react-native-beautiful-video-recorder 作為包，我終於找到了該應用程序按照我的要求運行。 如果有人遇到同樣的問題，最好使用 react-native-beautiful-video-recorder。

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

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

Answer 4

您正在處理的問題比您想象的要簡單得多

你的初始狀態是這個

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

所以如果處理和錄制為 false 則按鈕呈現，初始按鈕啟動視頻，因此您的初始狀態必須是這個

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