I have a web application written in Ruby on rails that uploads videos from the user to the server using a form (I actually use a jquery uploader that uploads direct to s3, but I dont think this is relevant).
In order to decrease the upload time for a video I want to downscale it e.g. if the video size is 1000x2000 pixels I want to downscale it to 500x1000. Is there a way to do so while the video uploads on the client side? Is there a javascript library that can do that?

I have a web application written in Ruby on rails that uploads videos from the user to the server using a form (I actually use a jquery uploader that uploads direct to s3, but I dont think this is relevant).
In order to decrease the upload time for a video I want to downscale it e.g. if the video size is 1000x2000 pixels I want to downscale it to 500x1000. Is there a way to do so while the video uploads on the client side? Is there a javascript library that can do that?

• javascript
• ruby-on-rails
• video
• upload

• See answer here: stackoverflow./questions/31316791/… – Matthew Lock Commented May 8, 2017 at 5:36

2 Answers 2

Repressing a video is a non-trivial problem that isn't going to happen in a browser any time soon.

With the changes in HTML5, it is theoretically possible if you can overe several problems:

• You'd use the File API to read the contents of a file that the user selects using an <input type="file"> element. However, it looks like the FileReader reads the entire file into memory before handing it over to your code, which is exactly what you don't want when dealing with large video files. Unfortunately, this is a problem you can do nothing about. It might still work, but performance will probably be unacceptable for anything over 10-20 MB or so.
• Once you have the file's data, you have to actually interpret it – something usually acplished with a demuxer to split the continer (mpeg, etc) file into video and audio streams, and a codec to depress those streams into raw image/audio data. Your OS es with several implementations of codecs, none of which are accessible from JavaScript. There are some JS video and audio codec implementations, but they are experimental and painfully slow; and only implement the depressor, so you'd be stuck when it es to creating output.
• Depressing, scaling, and repressing audio and video is extremely processor-intensive, which is exacty the kind of workload that JavaScript (and scripting languages in general) is the worst at. At the very minimum, you'd have to use Web workers to run your code on a separate thread.
• All of this work has been done several times over; you're reinventing the wheel.

Realistically, this is something that has to be done server-side, and even then it's not a trivial endeavor.

If you're desperate, you could try something like a plugin/ActiveX control that handles the pression, but then you have to convince users to install a plugin (yuck).

You could use a gem like Carrierwave (https://github./jnicklas/carrierwave). It has the ability to process files before storing them. Even if you upload them directly to S3 first with javascript, you could then have Carrierwave retrieve the file, process it, and store it again.

Otherwise you could just have Carrierwave deal with the file from the beginning (unless you are hosting with Heroku and need to avoid the timeouts by going direct to S3).