webpage-video-capture

webpage-video-capture 是一个可以录制网页视频的Node.js程序，它能录制使用JavaScript动画的网页生成流畅视频。它采用timecut和puppeteer打开一个网页，覆盖其时间处理函数，生成网页快照图片，然后将这些图片帧序列传递给ffmpeg编码成视频。它可以精准的生成任意低于或高于网页实时FPS的视频，且生成的视频是平滑流畅的，同时支持在视频中插入背景音乐。

你可以从命令行或Node.js库运行webpage-video-capture。它依赖ffmpeg，Node.js v10.0.0或更高版本以及npm，请确保系统环境中已安装相关依赖。

使用指南

使用以下命令来安装webpage-video-capture：

npm install webpage-video-capture -g

由于puppeteer的一个权限问题，Mac或Linux的用户在安装全局包时可能出现权限错误。你可以配置npm将全局包安装到当前用户的指定目录，详细方法请参考这篇教程: https://docs.npmjs.com/getting-started/fixing-npm-permissions#option-two-change-npms-default-directory

你也可以选择直接用root用户来安装，通过以下命令：

sudo npm install -g webpage-video-capture --unsafe-perm=true --allow-root

国内用户可能会遇到下载puppeteer很慢而导致安装卡住或报错的情况，可以尝试使用cnpm来安装或这使用以下命令修改puppeteer的下载源后再来安装：

npm config set PUPPETEER_DOWNLOAD_HOST=https://npm.taobao.org/mirrors
npm install webpage-video-capture -g

接下来你就可以在命令行中直接使用webpage-video-capture命令了：

webpage-video-capture --help

使用方式：

webpage-video-capture "url" [options]

url可以是web url（例如https://example.com）或文件路径。如果未指定url，则默认为index.html。注意用引号括起包含特殊字符（如#和&）的网址，options相关参数下面会进行详细说明

下面是一些使用示例，默认行为：

webpage-video-capture

上面的命令将打开当前工作目录下的index.html，将视口设置为800 x 600，以每秒60帧的速度录制5秒，并使用yuv420p像素格式生成名为video.mp4的视频文件到当前工作目录中。默认值可能在将来发生变化，所以对于长期脚本来说，建议明确的传递相关的选项参数，如下例所示。

录制一个网络上的https://example.com页面，并输出到./videos/example.mp4:

webpage-video-capture https://example.com --output ./videos/example.mp4

设置页面视口尺寸为1920 x 1080（这通常也等于视频的分辨率），FPS为24，录制时长为10秒：

webpage-video-capture index.html --viewport 1920,1080 --fps 24 --duration 10 --output video-24fps-10s.mp4

为视频添加背景音乐：

webpage-video-capture index.html --audio audio.mp3 --output video-with-audio.mp4

录制页面中的指定区域，宽800像素，高600像素，距离页面左上角偏移x轴100像素，y轴200像素，此时输出的视频分辨率将是800 x 600像素：

webpage-video-capture index.html -V 1920,1080 --width 800 --height 600 -x 100 -y 200 video-800x600.mp4

命令行参数选项

• 音频：-a, --audio path

  • 音频文件路径，用作视频的背景音乐。

• 输出: -O, --output path

  • 视频文件的保存路径，如果没有明确的设置ffmpeg的编码格式参数，该文件的扩展名将用于确定编码格式。

• 帧率：-R, --fps frame rate

  • 录制视频的帧率（FPS，默认值：60）。

• 时长：-d, --duration seconds

  • 视频录制时长，以秒为单位（默认值：5）。

• CSS选择器：-S, --selector "selector"

  • CSS选择器找到的第一个元素将作为视频每一帧的裁切边界框。

• 视口尺寸：-V, --viewport dimensions

  • 网页视口尺寸，以像素为单位。例如：800（宽度）或800,600（宽度和高度，默认值）。

• Canvas模式：--canvas-capture-mode [format]

  • 从Canvas数据录制帧图像，而不是网页截图。从Canvas元素直接拷贝数据，这通常比使用网页截图模式要快（但需要网页支持），可以提供可选的图像格式（例如png），否则它使用保存的图像的扩展名，或者png如果未指定或支持格式则默认使用。可以使格式前缀immediate:（例如immediate:png）以在渲染后立即获取像素数据，这有时是某些WebGL渲染器所需要的。使用--selector选项指定Canvas元素，否则默认为网页中的第一个Canvas元素。

• 动画起始秒数：-s, --start n seconds

  • 在保持任何帧之前运行n个虚拟秒的代码（默认值：0）。

• 延迟开始录制：--start-delay n seconds

  • 在页面加载后延迟n个真实秒后开始录制。

• X轴偏移：-x, --x-offset pixels

  • 页面录制区域框的X轴偏移距离，单位为像素（默认值：0）。

• Y轴偏移：-y, --y-offset pixels

  • 页面录制区域框的Y轴偏移距离，单位为像素（默认值：0）。

• 录制宽度：-W, --width pixels

  • 页面录制区域框的宽度，单位为像素，未指定时将为整个页面的宽度。

• 录制宽度：-H, --height pixels

  • 页面录制区域框的高度，单位为像素，未指定时将为整个页面的高度。

• 左边缘：-l, --left pixels

  • 页面录制区域框与内容左边缘的距离，单位为像素。等同于--x-offset。

• 右边缘：-r, --right pixels

  • 页面录制区域框与内容右边缘的距离，单位为像素。在设置了--width时，该参数将被忽略。

• 上边缘：-t, --top pixels

  • 页面录制区域框与内容上边缘的距离，单位为像素。等同于--y-offset.

• 下边缘：-b, --bottom pixels

  • 页面录制区域框与内容下边缘的距离，单位为像素。在设置了--height时，该参数将被忽略。

• 禁用偶数自动宽度：--no-round-to-even-width

  • 禁用录制宽度自动舍入到最近的偶数（不建议禁用，偶数像素跨端兼容性更好）。

• 禁用偶数自动高度：--no-round-to-even-height

  • 禁用录制高度自动舍入到最近的偶数（不建议禁用，偶数像素跨端兼容性更好）。

• 浏览器可执行文件路径：--executable-path path

  • 使用该路径上的Chromium/Chrome作为puppeteer的实例。

• Puppeteer启动参数：-L, --launch-arguments arguments

  • 传递给Puppeteer/Chromium的启动参数，用引号括起来。示例：--launch-arguments="--single-process"。可以在这里找到参数列表。

• 禁用无头模式：--no-headless

  • 禁用无头模式，运行Chromium/Chrome在窗口模式下。

• 快照模式：--snapshot-mode

  • 开启快照模式，将只输出网页快照图片，而非视频。

• FFmpeg输入参数：-e, --input-options options

  • 额外的ffmpeg 输入参数，用引号括起来。例如：--input-options="-framerate 30"

• FFmpeg输出参数：-E, --output-options options

  • 额外的ffmpeg 输入参数，用引号括起来。例如：--output-options="-vf scale=320:240"

• 静默模式：-q, --quiet

  • 关闭所有控制台日志（不包括出错提示）。

• 版本号：-v, --version

  • 显示命令行工具的版本号，然后直接退出。

• 帮助：-h, --help

  • 显示命令行工具的参数选项说明，然后直接退出。

Node API

Node API的使用方式及参数选项与命令行工具类似，你以通过调用webpage-video-capture导出的capture函数实现同样的功能：

const capture = require('webpage-video-capture');

capture({
  url: './index.html',
  fps: 30,
  duration: 20,
  viewport: {
    width: 1920,
    height: 1080
  },
  output: './video-30fps.mp4',
  audio: './resources/audio.mp3'
});