How to decrease recorded video size from safari before uploading to cloudinary in react project?

Hassan_22
Hassan_22 Member Posts: 1 ✭
edited February 2023 in Developer APIs

I have react project where I am using firebase as backend, the project main purpose is to record short videos for business. I have used react media library to record videos from camera so when user recorded videos I get the blob file I convert it to. base64 before upload so 1 min video has a size of less then 2 mb which easily and fastly uploaded to cloudinary in less than 15s but it happens only from chrome when we record videos from safari even 30s video taking 3 to 4 min to upload to cloudinary bcz video recorded from safari are big like 30s video have 60mb size so its taking too much time to upload to cloudinary I tried to trnasform video through upload preset but its still taking too much time plz help

I posted the pic below see the difference safari recorded videos are big how to I decrease size while keep the best quality so it can upload fast like from chrome

safari-chrome.png


Tagged:

Answers

  • Michal
    Michal Member, Cloudinary Staff Posts: 6

    Hi Hassan,

    Thanks for contacting us.

    In general, all of the transformations performed by Cloudinary take place on our servers, meaning they can be applied during upload using "incoming transformations" or once the asset is already uploaded and stored on your account.

    There are some options to edit images before uploading to your account when using the iOS/Android SDK or the "upload -widget". However, if you would like to reduce a video on your end before uploading you would need to use a third-party library to do so before performing the upload (unless you are using our Android SDK:https://cloudinary.com/documentation/android_image_and_video_upload#preprocess_video_uploads)

    Looking at the logs for this specific upload from Safari I see that there was an "incoming transformation" included in the upload request (bit_rate"=>"400k). Performing incoming transformations synchronously means that we will perform the transformations upon upload and the upload will take longer since we will wait for the transformations to complete.

    I've also noticed some uploads which included eager_transformations and eager_async was set to false. When including "eager transformations" we suggest setting eager_async to true, so the upload itself will be faster, and the eager process will be done in the background after the upload is complete. You can also set a webhook to receive a notification when the eager process is complete and the derived version is ready.

    You can read more about eager async transformations here: https://cloudinary.com/documentation/transformations_on_upload#eager_asynchronous_transformations

    And notifications here: https://cloudinary.com/documentation/notifications#eager_transformation_notifications

    To summarize, I would suggest using eager async transformations, so the upload itself would be faster and the eager process would be performed asynchronously.

    Please let me know if this helps and if you have any further questions.

    Best regards,

    Michal

Categories