WebVideoCreator -- 用Node.js将你的Web动画渲染为视频吧!

571 阅读3分钟

web-video-creator-large.png

介绍

WebVideoCreator (简称WVC)是一个可以将Web动画捕获渲染为视频的框架,基于 Node.js + Puppeteer + Chrome + FFmpeg 实现。

Github:github.com/Vinlic/WebV…

Gitee:gitee.com/vblog/web-v…

有什么用?

WVC实现对Web页面任意动画的逐帧完美捕获,它可以最大化降低实现所见即所得的成本,它作为渲染后端目前发掘了以下用途:

  1. 📊 数据可视化视频渲染:结合ECharts等图表库在Web上实现图表动画并用WVC捕获为视频,比如抖音和视频号常见的动态排行榜视频,配合爬虫采数据更佳。
  2. 👩‍🏫 数字人视频渲染:AIGC概念火爆,各种数字分身搬上了荧幕,WVC支持在页面中使用透明通道视频或蒙版视频,可以在动画基础上配上数字人获得更好的视觉效果。
  3. 🎨 内容创作视频渲染:您可以设计一个简单的前端动画编辑和预览器来满足一些内容创作需求,使用WVC作为后端获得所见即所得的视频效果。
  4. 🎮️ 游戏或用户操作回放视频渲染:与基于Web开发的游戏或应用结合,云上将回放捕获为视频提供给用户可方便分享和二次剪辑。
  5. 更多应用场景等待发掘...

相比录屏工具的优势?

  1. 💯 完美捕获:浏览器的帧合成器默认存在节流策略以减少资源消耗,当绘制大量复杂图形或系统负载加大时会导致Web动画出现跳帧、掉帧、延缓等问题,如果使用录屏工具将难以确保每一帧都被正确捕获,而WVC接管了时间流速,能够决定下一帧什么时候绘制到画面。
  2. 🎞️ 并行渲染:录屏工具通常无法同时捕获多个Tab页的动画内容,但WVC可以在多个页面中并行捕获动画并最终合成这些分块为一个长视频,分段直接还支持合成转场。
  3. 🦾 可自动化:录屏工具需要人工操作,基于WVC可以使用一套Web动画模板结合数据爬虫+定时任务,自动的产出视频。
  4. 🧩 快速集成:录屏工具难以集成,WVC是基于Node.js开发的NPM包,可以很快的进行后端集成,有的开发者用于将游戏回放捕获为视频。

示例DEMO

github.com/Vinlic/WebV…

特性

  • 基于Node.js开发,使用非常简单,易于扩展和开发。
  • 视频处理速度非常快,最快5分钟视频可在1分钟内完成渲染。
  • 支持单幕和多幕视频渲染合成,多幕视频可应用转场效果
  • 支持分块视频合成,可以将分块分发到多个设备上渲染回传再合成为多幕视频,大幅降低长视频渲染耗时。
  • 支持并行多个视频渲染合成任务,充分利用系统资源。
  • 支持嵌入或导出支持透明通道的webm格式视频。
  • API支持进行分布式渲染封装,只需对WVC进行一些封装即可将大量视频分块分发到多个设备渲染并最终取回合并输出
  • 支持使用GPU加速渲染和合成,可以显著的降低视频渲染耗时。
  • 支持在Windows和Linux平台部署运行。

让我们快速开始吧

快速开始