Как показать видео с помощью response-native-image-picker

Question

Я использую react-native-ImagePicker для выбора видео с моего телефона. поэтому я использовал приведенный ниже код,

const options = {
      title: 'Video Picker', 
      mediaType: 'video', 
      storageOptions:{
        skipBackup:true,
        path:'images'
      }
};

Проблема в том, что я могу записать / выбрать видео, но не могу показать, что внутри <View>, Я искал много сайтов и почти потратил на это 5 часов, но до сих пор не могу найти решение для этого. Может кто-нибудь помочь / уточнить меня от этого. Ссылка на код с этого сайта git_hub.

Answer 1

import ImagePicker from 'react-native-image-picker';
import Video from 'react-native-video';

class MyComponent extends Component{

constructor(props){
  super(props);

 this.state = {
     videoSource:'',
   };
}

const options2 = {
  title: 'Select video',
   mediaType: 'video',
  path:'video',
  quality: 1
};


selectVideo = () => {


ImagePicker.showImagePicker(options2, (response) => {
console.log('Response = ', response);

if (response.didCancel) {
  console.log('User cancelled image picker');
} else if (response.error) {
  console.log('ImagePicker Error: ', response.error);
} else if (response.customButton) {
  console.log('User tapped custom button: ', response.customButton);
} else {
  const source = { uri: response.uri };


  this.setState({videoSource: source})


}
});


}

render(){
return(

<View>

    <Video source={this.state.videoSource}   // Can be a URL or a local file.
           ref={(ref) => {
             this.player = ref
           }}                                      // Store reference
           onBuffer={this.onBuffer}                // Callback when remote video is buffering
           onError={this.videoError}               // Callback when video cannot be loaded
           style={styles.backgroundVideo}
           controls={true}
           fullscreen={true}
           style={styles.uploadImage} />


    <Button small primary onPress={this.selectVideo}>
      <Text>Select Video</Text>
    </Button>



</View>

);
}



}

Answer 2

Вы можете использовать этот пакет и передать ему URI, который вы получаете из средства выбора изображений, вот так:

ImagePicker.launchCamera(options, (response)  => {
    const uri = response.uri
});

Пример:

ImagePicker.launchCamera(options, (response)  => {
    const uri = response.uri
    this.setState({ uri })
});

 ...

<View style={{ flex: 1 }}>
   <Video source={{uri: this.state.uri}}
</View>