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?

例如，您可以通过操作画布将视频加载到画布中并使其显示为灰度视频.不过，我想知道，如果有某种方法可以从该灰度版本中生成视频文件.如果您想通过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.

一些资源

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

这篇关于HTML5 从图像生成视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！