CODEWITHSUNDEEP
react-nativeperformancememory-managementstreamingvideo-upload
Yoel
Yoel

Reputation: 31

how do i stream a local large video file on my mobile phone to memory using React Native

I'm using React Native to build an app which allows users to upload large video files (say between 500MB and 1GB), however mobile phones have low-memory, and even thought I'm using a Blob and slicing it's content into chunks to read the data with a FileReader. My app then crashes after a few moments. I need help of figuring out a solution that will eventually allow them to upload large video files to AWS S3. My problem is just figuring out how to stream the video from disk to memory using react Native so the I can use AWS S3 SDK client to then upload it there. Any help appreciated. Thank you in advance.

I'm using EXPO's SDK 48 to pick a video

const pickVideo = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Videos,
aspect: [4, 3],
quality: 1,
});

handleVideoPicked(result);
};

After retrieving the video uri I fetch it to get the blob object.

const fetchVideoFromUri = async (uri: any) => {         
const response = await fetch(uri);        
const blob = await response.blob();         
return blob;     };`

This is how I'm trying to read it by chunk into memory.

const chunk = file.slice(start, chunkEnd);
const reader = new FileReader();

reader.loadend = () => {
reader.result

}
reader.readAsDataURL(chunk);

It seems like the memory builds up using FileReader. I'm trying to get it to flush out the video file data after it's been processed

Upvotes: 3

Views: 179

Answers (0)

Related Questions