在上传到远程网站期间缩小/调整视频大小 [英] Downscaling/resizing a video during upload to a remote website

问题描述

我有一个用 Ruby on rails 编写的 Web 应用程序，它使用表单将视频从用户上传到服务器(我实际上使用的是直接上传到 s3 的 jquery 上传器，但我认为这无关紧要).
为了减少视频的上传时间，我想缩小它，例如如果视频大小为 1000x2000 像素，我想将其缩小到 500x1000.有没有办法在客户端上传视频时这样做?有没有可以做到这一点的javascript库?

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?

推荐答案

重新压缩视频是一个重要的问题，不会很快在浏览器中发生.

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

随着 HTML5 的变化，理论上如果你能克服几个问题是可能的:

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

• 您将使用 文件 API 来读取用户选择的文件的内容使用 元素.但是，看起来 FileReader 读取 将整个文件放入内存，然后再将其交给您的代码，这正是您在处理大型视频文件时所不想要的.不幸的是，这是一个您无能为力的问题.它可能仍然有效，但对于超过 10-20 MB 左右的内容，性能可能无法接受.
• 获得文件数据后，您必须实际解释它–通常使用 demuxer 将容器(mpeg 等)文件拆分为视频和音频流来完成，以及一个 codec 来将这些流解压为原始图像/音频数据.您的操作系统附带了多种编解码器实现，但都无法通过 JavaScript 访问.有一些 JS 视频 和 audio 编解码器 实现，但它们是实验性的并且非常缓慢；并且只实现解压器，所以在创建输出时会卡住.
• 解压缩、缩放和重新压缩音频和视频是极度处理器密集型的，这正是 JavaScript(以及一般的脚本语言)最擅长的工作负载.至少，您必须使用 Web workers 在单独的线程上运行您的代码.
• 所有这些工作都已经完成几项 次 结束；您正在重新发明轮子.

• 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 accomplished with a demuxer to split the continer (mpeg, etc) file into video and audio streams, and a codec to decompress those streams into raw image/audio data. Your OS comes 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 decompressor, so you'd be stuck when it comes to creating output.
• Decompressing, scaling, and recompressing 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.

如果您不顾一切，可以尝试诸如处理压缩的插件/ActiveX 控件之类的东西，但是您必须说服用户安装插件(糟糕).

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

这篇关于在上传到远程网站期间缩小/调整视频大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！