HTML5 从图像生成视频

Question

我想知道，由于 HTML 和 javascript 结合在一起令人着迷，HTML5 中是否有解决方案可以从许多图像生成视频文件？

例如，您可以将视频加载到画布中，并通过操纵画布使其显示为灰度视频。但是，我想知道是否有某种方法可以从该灰度版本生成视频文件。如果您想通过 whatsapp 等发送视频，这是有道理的。

谢谢

原文由 Display name 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

目前没有内置的 API 可以在 HTML5 中进行视频编码。虽然有 正在进行的工作，以允许基本的视频和音频录制 - 但目前不可用（FireFox 中提供音频录制 - 它也仅限于 _流_）。

如果您对 gif 动画没问题，您可以使用其中一种编码器将帧编码为 gif（见下文）。

对于视频 - 已经进行了或多或少成功的尝试（我想到的项目似乎不再可用）但是从一个浏览器到另一个浏览器一直存在问题。

可以选择按照视频编码和文件格式规范自己构建低级风格的编码器。这是可行的，但这不是一个小项目。

无论如何，即使对于本地编译的应用程序，编码视频也是一项非常需要性能的任务。在浏览器中运行这样的任务将是一个更慢的过程，并且对于许多用户来说可能不切实际（而且移动设备会消耗这些电池）。

IMO 更好的方法（至少目前，在上述 API 可用之前）是将图像发送到服务器并让服务器在后台处理编码作业，然后将结果发送到客户端。通过这种方式，您可以使用多线程、卸载客户端、使用 ffmpeg 等本机编译编码器，并且可以将生成的视频流式传输回来。

一些资源

• 媒体流录制 API
• Gif 编码器 1
• Gif 编码器 2 (NodeJS)
• HTML5 视频录制信息和状态
• 实时视频编码器（NodeJS/ffmpeg）
• libvpx（需要 emscripten/asm.js）

原文由 user1693593 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

开始了：

• 文章：http: //techslides.com/convert-images-to-video-with-javascript
• 演示：http: //techslides.com/demos/image-video/create.html （一次选择多张图片）
• 代码： [just view the source]
• 您可以下载 .webm 视频文件

@K3N 回答提到构建编码器。幸运的是有一个 - https://github.com/antimatter15/whammy - 文章的片段：

你需要一个视频编码器，今天我偶然发现了 Whammy，一个实时的 JavaScript WebM 编码器。

原文由 Michal Stefanow 发布，翻译遵循 CC BY-SA 3.0 许可协议