HTML5从图像生成video
我想知道,因为HTML和javascript一起迷人,如果HTML5中有一个解决方案来生成许多图像的video文件?
例如,您可以通过操作canvas将video加载到canvas中并使其显示为灰度video。 但是,我想知道,如果有一种方法可以从该greyscaled版本生成video文件。 如果你想通过whatsapp等发送video,那将是有意义的。
谢谢
目前没有内置的API可以在HTML5中进行video编码。 虽然有正在进行的工作,但允许进行基本的video和音频录制 – 但此时此function尚不可用(FireFox中提供录音 – 它也仅限于流 )。
如果您对gif动画没问题,可以使用其中一个编码器将帧编码为gif(见下文)。
对于video – 已经有过或多或少成功的尝试(我想到的项目似乎不再可用)但是从一个浏览器到另一个浏览器存在问题。
根据video编码和文件格式规范,可以选择以低级样式构建编码器。 它是可行的,但它不是一个小项目。
无论如何,即使对于本机编译的应用程序,编码video也是一项非常糟糕的性能任务。 在浏览器中运行这样的任务将是一个更加缓慢的过程,并且可能对许多用户来说不实用(并且移动设备会吸收这些电池)。
更好的方法IMO(至少在上述API变得可用之前)是将图像发送到服务器并在后台处理编码作业中具有服务器,然后将结果发送到客户端。 这样,您可以使用multithreading,卸载客户端,使用本机编译的编码器(如ffmpeg),并且可以回传生成的video。
一些资源
- MediaStream Recording API
- Gif编码器1
- Gif编码器2(NodeJS)
- HTML5video录制信息和状态
- 实时video编码器(NodeJS / ffmpeg)
- libvpx(需要emscripten / asm.js)
开始了:
- 文章: http : //techslides.com/convert-images-to-video-with-javascript
- 演示: http : //techslides.com/demos/image-video/create.html (一次选择多个图像)
- 代码:
[just view the source]
- 您可以下载
.webm
video文件
@ K3N答案提到建立一个编码器。 幸运的是有一个 – https://github.com/antimatter15/whammy – 文章摘录:
你需要一个video编码器,今天我偶然发现了Whammy,一个实时的JavaScript WebM编码器。
嗨,我使用tech-slides提供的代码构建它。 我还制作了一个模板应用程序,您可以在其中获取图像列表并将其转换为video格式。 您必须根据自己的需要编辑代码。 它仅在Chrome和YouTube中受支持。 因此,基本上在whammy.js中,您将图像转换为JavaScript文件中的canvas,然后使用whammy.js函数将canvas转换为video。 您需要设置事件侦听器并将video加载到video标记中。 Whammy.js只生成webp文件。 将其转换为mp4:将其加载到YouTube中,然后使用YouTube作为mp4下载。 希望能帮助到你。