HTML5从图像生成视频 [英] HTML5 generating video from images

查看：157 发布时间：2018/7/3 10:51:51 javascript jquery html5 html5-canvas html5-video

本文介绍了HTML5从图像生成视频的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想知道，因为HTML和javascript一起迷人，如果HTML5中有一个解决方案来生成许多图像的视频文件？

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?

For例如，您可以通过操纵画布将视频加载到画布中并使其显示为灰度视频。但是，我想知道，如果有一种方法可以从该灰度版本生成视频文件，那么
。如果你想通过whatsapp等发送视频会有意义。

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.

谢谢你

推荐答案

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

There are currently no built-in API to do video encoding in HTML5. There are work in progress though, 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).

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

If you are OK with gif animation you can encode the frames as a gif using one of the encoders out there (see below).

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

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).

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

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.

一些资源