javascript HTML5 从图像生成视频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28717016/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 generating video from images
提问by Display name
i'm wondering, since HTML and with javascript are mesmerizing together, if there is a solution in HTML5 to generate a video-file from many images?
我想知道，既然 HTML 和 javascript 一起令人着迷，那么 HTML5 中是否有解决方案可以从许多图像生成视频文件？
For example, you're able to load a video into a canvas and make it appear as greyscaled video, by manipulating the canvas. However, I would like to know, if there is somewhat a method to generate a video-file out of that greyscaled version. Would make sense, if you want to send the video via whatsapp etc.
例如，您可以通过操作画布将视频加载到画布中并使其显示为灰度视频。但是，我想知道，是否有某种方法可以从灰度版本中生成视频文件。如果您想通过 whatsapp 等发送视频，那是有道理的。
Thank you
谢谢
采纳答案by Display name
There are currently no built-in API to do video encoding in HTML5. There are work in progressthough, to allow basic video and audio recording - but it's not available at this time (audio recording is available in FireFox - it is also limited to streams).
目前没有内置的 API 可以在 HTML5 中进行视频编码。有工作正在进行中，虽然，允许基本的视频和音频记录-但它在这个时候是不可用（录音可以在Firefox -这也只限于流）。
If you are OK with gif animation you can encode the frames as a gif using one of the encoders out there (see below).
如果您对 gif 动画没问题，您可以使用其中一个编码器将帧编码为 gif（见下文）。
For video - there has been attempts, more or less successful, (the project I had in mind does not seem to be available anymore) but there has been issues from one browser to another.
对于视频 - 有过尝试，或多或少是成功的，（我心目中的项目似乎不再可用）但是从一个浏览器到另一个浏览器都有问题。
There is the option of building an encoder yourself low-level style, following video encoding and file format specifications. It's doable but it's not a small project.
可以选择按照视频编码和文件格式规范自行构建低级风格的编码器。这是可行的，但不是一个小项目。
In any case, encoding video is a pretty performance hungry task even for native compiled applications. Running such a task in the browser will be a even more slow process and probably not practical for many users (and mobile devices will suck on those batteries).
无论如何，即使对于本机编译的应用程序，编码视频也是一项非常需要性能的任务。在浏览器中运行这样的任务将是一个更慢的过程，对许多用户来说可能不切实际（移动设备会消耗这些电池）。
The better approach IMO (at the moment at least, until the aforementioned API becomes available), is to send images to server and have a server in the back handling encoding jobs, then send the result to client. This way you can use multi-threading, offload the client, use native compiled encoders such as ffmpeg, and the resulting video can be streamed back.
IMO 更好的方法（至少目前，在上述 API 可用之前）是将图像发送到服务器并在后台使用服务器处理编码作业，然后将结果发送到客户端。通过这种方式，您可以使用多线程、卸载客户端、使用本机编译的编码器（例如 ffmpeg），并且生成的视频可以流式传输回来。
Some resources
一些资源
回答by Mars Robertson
Here we go:
开始了：
- Article: http://techslides.com/convert-images-to-video-with-javascript
- Demo: http://techslides.com/demos/image-video/create.html(select multiple images at once)
- Code:
[just view the source] - You can download
.webmvideo file
- 文章：http: //techslides.com/convert-images-to-video-with-javascript
- 演示：http: //techslides.com/demos/image-video/create.html （一次选择多张图片）
- 代码：
[just view the source] - 您可以下载
.webm视频文件
@K3N answer mentions building an encoder. Luckily there is one - https://github.com/antimatter15/whammy- snippet from the article:
@K3N 回答提到了构建编码器。幸运的是，有一个 - https://github.com/antimatter15/whammy- 文章片段：
You need a video encoder and today I just happened to stumble on Whammy, a real time JavaScript WebM Encoder.
你需要一个视频编码器，今天我偶然发现了 Whammy，一个实时 JavaScript WebM 编码器。
回答by Khorram Bin Salim Khondkar
Hi I have built it using the code provided by tech-slides. Also I made a template application where you can take list of images and turn them into video format. You have to edit the code according to your own needs. It is only supported in chrome and YouTube though. So basically in whammy.js you turn the images into canvas in a JavaScript file then turn the canvas into video using whammy.js function. You need to set event listener and load the videos into video tag. Whammy.js only produce webp file. To turn it into mp4: Load it in YouTube then download it using YouTube as mp4. Hope it helps.
嗨，我已经使用 tech-slides 提供的代码构建了它。我还制作了一个模板应用程序，您可以在其中获取图像列表并将它们转换为视频格式。您必须根据自己的需要编辑代码。不过，它仅在 chrome 和 YouTube 中受支持。所以基本上在 whammy.js 中，你将图像转换为 JavaScript 文件中的画布，然后使用 whammy.js 函数将画布转换为视频。您需要设置事件侦听器并将视频加载到视频标签中。Whammy.js 只生成 webp 文件。将其转换为 mp4：将其加载到 YouTube 中，然后使用 YouTube 将其下载为 mp4。希望能帮助到你。
