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

Question

我正在寻找一种方法/最佳实践，在保存到文件系统之前，在所有实际浏览器中使用 Javascript、HTML5 或 Webassambly 调整视频大小并可能修剪视频。

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

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

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

作为一个流程示意图，它看起来像：

1. 从文件系统<input type='file' />打开/选择一个视频
2. 调整视频大小并可能将其修剪为给定属性
3. 可能临时保存在“localStorage”或通过 FilesystemAPI
4. 从事其他工作，例如出版等。

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

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

Answer 1

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

虽然这很奇怪...不能保证正确的帧计时，大多数浏览器在选项卡不活动时都会出现错误，等等。

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

如果可能的话，您最好制作一个浏览器扩展来处理这个问题，直到 Web 编解码器 API 实现。