我正在使用react-native-camera进行视频捕捉。我正在构建一些类似于各种各样的故事,在那里您可以捕捉视频,然后它会将您带到可以编辑的视频预览屏幕。在videoCapturing屏幕上按下开始按钮时,它返回视频的路径,但按下停止按钮时,它会返回错误,同时使视频存储到我的设备storgae。我已经发布了两个视频捕获屏幕以及我按下停止按钮的错误。视频捕获屏幕的附加代码。
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,Dimensions,Image,TouchableOpacity,TouchableHighlight,Video
} from 'react-native';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
import { TabNavigator, StackNavigator } from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import Camera from 'react-native-camera';
export default class VideoCapture extends Component {
static navigationOptions = {
headerTintColor: 'white',
headerStyle:{ position: 'absolute', backgroundColor: 'transparent', zIndex: 100, top: 0, left: 0, right: 0 }
};
constructor(props) {
super(props);
this.state = {
cameraType : 'back',
mirrorMode : false,
path: null,
};
}
takeVid() {
const option = {};
this.camera.capture({
mode: Camera.constants.CaptureMode.video
})
.then((data) => {
console.log(data);
this.setState({ path: data.path })
})
.catch((err) => console.error(err));
}
stopVid(){
this.camera.stopCapture();
}
changeCameraType() {
if(this.state.cameraType === 'back') {
this.setState({
cameraType : 'front',
mirrorMode : true
})
}
else {
this.setState({
cameraType : 'back',
mirrorMode : false
})
}
}
renderCamera() {
return (
<Camera
ref={(cam) => {
this.camera = cam;
}}
style={styles.preview}
aspect={Camera.constants.Aspect.fill}
type={this.state.cameraType}
captureMode = {Camera.constants.CaptureMode.video}
mirrorImage={this.state.mirrorMode}
keepAwake={true}
>
<Text style={styles.capture} onPress={this.changeCameraType.bind(this)}>switch</Text>
<View style={styles.textCircular}><Text style={{color:'#fefefe',fontSize:14}} onPress={this.takeVid.bind(this)}>Start</Text></View>
<View style={styles.textCircular1}><Text style={{color:'#fefefe',fontSize:14}} onPress={this.stopVid.bind(this)}>Stop</Text></View>
</Camera>
);
}
renderVideo() {
return (
<View>
<Video source={{ uri: this.state.path }}
style={styles.preview}
rate={1.0}
volume={1.0}
muted={false}
resizeMode={"cover"}
onEnd={() => { console.log('Done!') }}
repeat={true}
/>
<Text
style={styles.cancel}
onPress={() => this.setState({ path: null })}
>Cancel
</Text>
</View>
);
}
render() {
const {goBack} = this.props.navigation;
return (
<View style={styles.container}>
{this.state.path ? this.renderVideo() : this.renderCamera()}
</View>
);
}
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#000',
},
preview: {
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center',
height: Dimensions.get('window').height,
width: Dimensions.get('window').width
},
capture: {
width: 70,
height: 70,
borderRadius: 35,
borderWidth: 5,
borderColor: '#FFF',
marginBottom: 15,
},
cancel: {
position: 'absolute',
right: 20,
top: 20,
backgroundColor: 'transparent',
color: '#FFF',
fontWeight: '600',
fontSize: 17,
}
});
&#13;