反应本地摄像机不录制视频

问题描述

我想使用反应本机视频来实现视频录制功能，但是开始录制功能没有给出任何响应，我什至还安慰我看是否被调用，实际上不是，无法弄清楚我所做的事情错误的。

下面是我写的确切代码

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。 任何帮助都会很棒，谢谢

解决方法

我仍然不知道上面的代码出了什么问题，但是使用react-native-beautiful-video-recorder作为软件包，我最终发现该应用程序符合我的要求。 如果有人遇到相同的问题，最好使用react-native-beautiful-video-recorder。

,

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

,

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

,

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

你的初始状态是这个

this.state = {
      recording: false,};

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

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