[英]React native camera not recording video
我想使用 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 根本没有被调用。 任何帮助都会很棒,谢谢
我仍然无法弄清楚上面的代码出了什么问题,但是使用 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,
processing: true,
};
所以如果处理和录制为 false 则按钮呈现,初始按钮启动视频,因此您的初始状态必须是这个
this.state = {
recording: false,
processing: false,
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.