react-native-camera video capturing shows error on preview after it gets captured?

喜欢而已 提交于 2019-12-02 21:18:04

问题


I am using react-native-camera for video capture. I am building something kind of snapchat stories where moment you capture video next to that it takes you to the preview screen of video where you can edit. On press of start button while videoCapturing screen it returns path of the video but on press of stop button it returns an error at the same time making video to get stored to my device storgae. I have posted both videocapturing screen as well error I am getting on press of stop button.Attached code for the VideoCapture screen.

/**
 * 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,
  }
});

来源:https://stackoverflow.com/questions/49892807/react-native-camera-video-capturing-shows-error-on-preview-after-it-gets-capture

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!