How To Compress Video in Angular Before Upload Server?

Question

I have an Angular App that uploads videos through Spring Boot Server to S3 bucket. However, I need to reduce the size of videos since I need to upload 30MB videos from mobile devices.

• Is there a way I can reduce the quality of the video before uploading it to my server?

• Or do you recommend some other strategy that allows to reduce the waiting time? With the understanding that the videos are finally going to be hosted in a S3 bucket, perhaps performing the compression on my Spring Boot server?

At this point, I would like to clarify if when sending the video from my Angular App to the Spring Boot server, it would arrive as a "MultipartFile" through a POST request using Angular's HTTPClient.

Does it make sense to think that the strategy of compressing the video on the Spring Boot server can reduce the loading time of the video, since from Spring Boot the video is loaded to S3?.

Can someone with experience please clarify this for me?

Answer 1

Is there a way I can reduce the quality of the video before uploading it to my server?

Note that compressing a video is a heavy and time consuming operation to be done through a web browser using client side programming languages (javascript). You may find javascript libraries like videoconverter.js which doesn't seem to work properly. But, the same action for images through the web browser before sending to the server makes sense and you can find working libraries for it.

Or do you recommend some other strategy that allows to reduce the waiting time? With the understanding that the videos are finally going to be hosted in a S3 bucket, perhaps performing the compression on my Spring Boot server?

This is not recommended to do such heavy operation even on server-side. A possible client-side solution is trimming the video file ordered by seconds to make nested video files and then send them to the server. After that, you can use them partially or concatenate to make a single video file again.

Does it make sense to think that the strategy of compressing the video on the Spring Boot server can reduce the loading time of the video, since from Spring Boot the video is loaded to S3?.

It depends on how you perform the operation. On demand compression is not a good choice. The compression using background worker process to produce new files before serving is a good choice.

Answer 2

I will try to answer to the best of my knowledge and abilities. Here's what I know.

Is there a way I can reduce the quality of the video before uploading it to my server?

Yes. But I'd recommend not to do it at the client's side due to the following:

Cons

• user input must not be trusted by doing compression on the client-side, you will have to do some sanity check on the server-side anyway
• video compression (or optimization) involve complex operations, there is less choice in JavaScript than in other languages
• since the operations are complex, you are putting stress on your clients, making it heavier. If you don't control their configuration (hardware, browser, and version), a situation you can have almost only in an intranet, you will probably degrade (or fail) the browsing experience of some of your users
• for all those reasons, client-side bugs are harder to track and fix and can quickly cost you more in development than adding resources to your servers

Pros

• you offload some computation from your servers
• you help people with a small bandwidth but powerful computers and recent browser to upload large videos

Video compression tools

• FFmpeg
• FFmpeg Java equivalent

My Suggestion

• if you need to spare your server, you can make the video compression in batch, asynchronously at some time of the day when your server is not heavily loaded

• if you have a lot of input, it can be cheaper to send the optimization to another server (ie: an on-demand virtual-machine at Amazon, DigitalOcean, Linode, etc., so you pay only when you need) than to upgrade your "main" server

• Also take a look at this too to understand best practices

Answer 3

My understanding is that most video files are already compressed by codecs. However, if you require additional compression, you can set up something like GZIP or Brotli on your Spring Boot server (I don't believe this type of compression is even possible in Angular).