简体繁体 English

如何从 Javascript 中的 an.mp4 中提取每 5 帧？

[英]How do you extract every 5th frame from an .mp4 in Javascript?

原文 2020-05-06 19:19:09 6 3 javascript/ mp4/ video-processing

I'm building a web app that uploads a local.mp4 to an S3 bucket.我正在构建一个 web 应用程序，它将 local.mp4 上传到 S3 存储桶。 It's intended for low bandwidth environments.它适用于低带宽环境。 Is it possible to upload every 5th frame of an.mp4 in JavaScript on the frontend and upload this reduced.mp4?是否可以在前端的 JavaScript 中每隔 5 帧上传 an.mp4 并上传这个简化的.mp4？

3 个解决方案

I don't know if it's possible (I didn't find anything online) but it's certainly not easy.我不知道这是否可能（我没有在网上找到任何东西），但这肯定不容易。 It would be easier to maybe have an endpoint in a server that receives a video and returns a minified version.在接收视频并返回缩小版本的服务器中可能有一个端点会更容易。 Like this:像这样：

Client --can you minify this video?---> Server客户端——你能缩小这个视频吗？---> 服务器
Client <--minified video---- Server客户端<--缩小视频-----服务器
Client ---upload minified video---> S3 bucket客户端---上传缩小视频---> S3 存储桶

No, it's not possible.不，这是不可能的。 Frames are not independent.框架不是独立的。 Uploading a frame, without uploading the frames it references will crate a corrupt video.上传一个帧，而不上传它引用的帧将创建一个损坏的视频。

You could make use of FFMPEG in your browser in fact.实际上，您可以在浏览器中使用 FFMPEG。 From ffmpeg.wasm:来自 ffmpeg.wasm：

ffmpeg.wasm is a pure Webassembly / Javascript port of FFmpeg. ffmpeg.wasm是FFmpeg的纯Webassembly/Javascript端口。 It enables video & audio record, convert and stream right inside browsers.它可以在浏览器内实现视频和音频录制、转换和 stream。

Check out the different parameters in regards to your nth frame rate from the documentation on FFMPEG.org .从FFMPEG.org的文档中查看有关第 n 帧速率的不同参数。

PS: It might be better solutions to shrink the upload size, ie. PS：缩小上传大小可能是更好的解决方案，即。 compress harder, resize the video dimensions, or combinations of all these, including lowering the frame rate.更努力地压缩，调整视频尺寸或所有这些的组合，包括降低帧速率。