3

I am working on a React project like a social media app where users can upload images or videos. I am using Firebase storage to store the image and videos.

I can able to accomplish image uploading by using React react-firebase-file-uploader package but as I am new to web development, I am struggling to find the solution for uploading videos for React.

I have searched the internet but I couldn't find a proper solution to accomplish these tasks.

  1. I required to upload only video/videos and want to preview it/them before uploading data to Firebase storage.

  2. I need to compress the video to reduce the file size before uploading or after uploading to Firebase storage using cloud functions.

halfer
  • 19,824
  • 17
  • 99
  • 186
ilvcs
  • 103
  • 1
  • 17
  • 2
    I belive this question is more related with video manipulation than to firestore / firebase. A video (generally speaking) has to be compressed and uploaded as a file to Firebase Storage in order to be saved. – Juancki May 22 '20 at 08:08

3 Answers3

1

May be is worth stating again that video files are compressed by default. If something, you can resize the file so that it has less resolution, or process it to add a watermark.

Here is an answer that discribes how to resize a video file. And here is a tutorial on how to use moviepy on Cloud Functions.

Juancki
  • 1,793
  • 1
  • 14
  • 21
  • In any case, this kind of processing are better to do it in the mobile app, so you can use the user computer power and to avoid sending big files over the internet. – Juancki May 26 '20 at 12:56
0

You should have a look at this tutorial here and this gist there

You may be able to do some treatment with Cloud Functions after the upload but beware that memory and execution time are restricted and your script may fail on large files.

Olivier Lépine
  • 618
  • 5
  • 14
  • I would be glad if you let me know how to compress video files with cloud functions. – ilvcs May 26 '20 at 01:34
  • Well, it's not a straightforward process. Given the limitations with memory and execution time, I guess the good approach would be to have a specific container that could do it apart from Cloud Functions or Cloud Run. Your cloud functions could trigger a PubSub message when the video is uploaded. It would also depend on the specific format of the uploaded video. Not a straightforward process for sure... – Olivier Lépine May 26 '20 at 12:49
0

you can try this

<input type = "file"
onChange = {
  (e) => {
    let videoObj = e.currentTarget.files[0];
    // console.log(videoObj)
    let {
      name,
      size,
      type
    } = videoObj;

    size = size / 1000000
    //for not uploading the file more than 10 MB
    if (size > 10) {
      alert("please upload file less than 10 MB");
      return;
    }

    //code for only uploading the video

    type = type.split("/")[0];

    if (type != "video") {
      alert("please upload video only");
      return;
    }
  }
}
/>
kyun
  • 9,710
  • 9
  • 31
  • 66
Sajjan Shah
  • 41
  • 6