reactjsreact-nativereact-native-camerareact-native-video

Retrieve fileSize and playableDuration of Video from React-native cameraRoll library


I am trying to print the Total Duration and the video size with each video using cameraRoll library for React native, but it is displaying null for all videos. Can this be fixed, so i can display each videos total duration and video size.

Link for CameraRoll library https://github.com/react-native-community/react-native-cameraroll

export default class camera extends Component {
  constructor(props) {
    super(props);
    this.state = {
        data:''
    };
  }

  async componentDidMount()
  {
    if (Platform.OS === 'android') {
        const result = await PermissionsAndroid.request(
          PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
          {
            title: 'Permission Explanation',
            message: 'ReactNativeForYou would like to access your photos!',
          },
        );
        if (result !== 'granted') {
          console.log('Access to pictures was denied');
          return;
        }
      }

      CameraRoll.getPhotos({
        first: 3,
        assetType: 'Videos',
      })
      .then(res => {
        this.setState({ 
          data: res.edges,
                    
        });
      })
      .catch((error) => {
         console.log(error);
      });
    
  }


  render() {
    return (
      <View style={{flex: 1, flexDirection: 'row'}}>
        <FlatList
        
        data={this.state.data}
        numColumns={1}
        renderItem={({ item }) => 

          <View 
          style={{    flexDirection: 'row',}}
          >     

           <Video    
           ref={(ref) => {
             this.player = ref
           }}   
           source={{ uri: item.node.image.uri }}                                  
           onBuffer={this.onBuffer}                
           onError={this.videoError}  
           resizeMode='cover'
           repeat={true}
           muted={true}
           playWhenInactive={true}            
           style={{
            width: '30%',
            height: 80,
            marginLeft:10,
            marginTop:10,
            borderRadius:10,
          }} 
          />

           <Text 
          style={{textAlign: 'center', alignSelf: 'stretch', textAlignVertical: 'center', 
                  paddingLeft: 30, overflow: "hidden", }}
          >{JSON.stringify(item.node.image.fileSize)}    // this line should have displayed the video file size
          </Text> 

          <Text 
          style={{textAlign: 'center', alignSelf: 'stretch', textAlignVertical: 'center', 
                  paddingLeft: 30, overflow: "hidden", }}
          >{item.node.image.playableDuration}    //This line should have displayed the video duration
          </Text>


          </View>
          }
      />
      </View>
    );
  }
}

This is my Complete Code.


Solution

  • CameraRoll.getPhotos({
        first: 3,
        assetType: 'Videos',
        includes: ['fileSize', 'playableDuration']
    });