在使用JavaScript / HTML5保存/上传之前，在浏览器/客户端中调整视频大小

Question

我正在寻找一种方法/最佳实践来调整大小，也许可以在所有实际浏览器中使用Javascript，HTML5或Webassambly修剪视频，然后再保存在文件系统中。

在浏览器中操作视频的"最佳"方法是什么？我正在寻找不同的可能性概念：

• JS-框架
• 一个Webassembly Lib
• WebGL
• RTP流式传输到本地Websoket并保存在存储中
• 使用像getUserMedia((这样的WebAPI

目标是通过IPFS共享分散的视频，因此无法在服务器端调整大小。 调整大小后可以保存结果。

作为过程示意图，它看起来像：

1. 从文件系统<input type='file' />中打开/选择视频
2. 调整视频大小并可能修剪为给定属性
3. 也许可以临时保存在"本地存储"中或通过文件系统API
4. 做其他工作，如出版等。

我的想法实际上是将视频流式传输到文档本身并捕获流。但我不确定是否有更快速有效的方法来完成这项工作。也没有必要在调整大小时播放视频。

希望你能帮助我找到一个好的解决方案，并告诉我你对此的经验。

Answer 1

唯一合理的方法是将视频帧绘制到画布上(不需要WebGL，只需.drawImage()(，并使用CanvasCaptureMediaStream并使用MediaRecorder API进行记录。

不过这很奇怪...不能保证正确的帧计时，大多数浏览器在选项卡未处于活动状态时都有错误等。

另一种方法是为 JavaScript 构建 FFmpeg，最终变得庞大而缓慢。

如果可能的话，你最好做一个浏览器扩展来处理这个问题，直到 Web Codecs API 实现。