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

Question

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

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

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

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

作为流程示意图，它看起来像:

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

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

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

Answer 1

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

虽然这很奇怪...不能保证正确的帧时序，大多数浏览器在选项卡未激活时都有错误，等等。

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

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