web-video-creator
Version:
A framework for creating videos based on Node.js + Puppeteer + FFmpeg.
1,005 lines (860 loc) • 27.6 kB
Markdown
# 高级别API
# WebVideoCreator
### WebVideoCreator.config([options: Object])
配置 WVC 的全局开关和属性,在任何操作之前都必须运行它。
#### options 参数
<table width="100%">
<thead >
<tr>
<th>参数</th>
<th>类型</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>debug</td>
<td>boolean</td>
<td>WebVideoCreator调试日志,开启后将输出一些内部的调试日志</td>
</tr>
<tr>
<td>browserVersion</td>
<td>string</td>
<td>指定WVC使用的Chrome浏览器版本</td>
</tr>
<tr>
<td>browserHeadless</td>
<td>boolean</td>
<td>浏览器无头开关,建议保持开启,如果关闭请确保开启兼容渲染模式否则无法渲染,仅用于调试画面</td>
</tr>
<tr>
<td>browserFrameRateLimit</td>
<td>boolean</td>
<td>浏览器帧率限制开关,默认开启,关闭帧率限制可以提高渲染效率并支持高于60fps的动画,但这会关闭GPU垂直同步可能导致画面撕裂或其它问题</td>
</tr>
<tr>
<td>browserDebug</td>
<td>boolean</td>
<td>浏览器Debug开关,开启后将输出浏览器的运行日志,如果你想看页面的日志,请设置consoleLog为true,而不是这个</td>
</tr>
<tr>
<td>ffmpegDebug</td>
<td>boolean</td>
<td>开启后将输出每一条执行的ffmpeg命令</td>
</tr>
<tr>
<td>ffmpegExecutablePath</td>
<td>string</td>
<td>ffmpeg可执行文件路径,设置后将禁用内部的ffmpeg-static,建议您默认使用内部的FFmpeg以确保功能完整性</td>
</tr>
<tr>
<td>ffprobeExecutablePath</td>
<td>string</td>
<td>ffprobe可执行文件路径,设置后将禁用内部的ffprobe-static,建议您默认使用内部的ffprobe以确保功能完整性</td>
</tr>
<tr>
<td>browserUseGPU</td>
<td>boolean</td>
<td>浏览器GPU加速开关,建议开启提高渲染性能,如果您没有GPU设备或遭遇了诡异的渲染问题则可以关闭它</td>
</tr>
<tr>
<td>browserUseAngle</td>
<td>boolean</td>
<td>浏览器是否使用Angle作为渲染后端,默认开启增强渲染跨平台兼容性和性能</td>
</tr>
<tr>
<td>browserDisableDevShm</td>
<td>boolean</td>
<td>是否禁用浏览器使用共享内存,当/dev/shm较小时建议开启此选项</td>
</tr>
<tr>
<td>browserExecutablePath</td>
<td>string</td>
<td>浏览器可执行文件路径,设置后将禁用内部的浏览器,建议您默认使用内部的浏览器以确保功能完整性</td>
</tr>
<tr>
<td>browserLaunchTimeout</td>
<td>number</td>
<td>浏览器启动超时时间(毫秒),设置等待浏览器启动超时时间</td>
</tr>
<tr>
<td>browserProtocolTimeout</td>
<td>number</td>
<td>浏览器协议通信超时时间(毫秒),设置CDP协议通信超时时间</td>
</tr>
<tr>
<td>allowUnsafeContext</td>
<td>boolean</td>
<td>默认禁用,开启后能够导航到不安全的URL,但由于不安全上下文限制,将无法在页面中使用动态图像和内嵌视频</td>
</tr>
<tr>
<td>compatibleRenderingMode</td>
<td>boolean</td>
<td>兼容渲染模式,不建议启用,启用后将禁用HeadlessExperimental.beginFrame API调用改为普通的Page.screenshot,这会导致渲染性能下降,且部分动画可能帧率无法同步,当你遭遇下面错误的时候可以尝试开启它:TargetCloseError: Protocol error (HeadlessExperimental.beginFrame): Target closed</td>
</tr>
<tr>
<td>numBrowserMin</td>
<td>number</td>
<td>资源池最小浏览器实例数量</td>
</tr>
<tr>
<td>numBrowserMax</td>
<td>number</td>
<td>资源池最大浏览器实例数量</td>
</tr>
<tr>
<td>numPageMin</td>
<td>number</td>
<td>浏览器实例最小页面实例数量</td>
</tr>
<tr>
<td>numPageMax</td>
<td>number</td>
<td>浏览器实例最大页面实例数量</td>
</tr>
<tr>
<td>userAgent</td>
<td>string</td>
<td>访问页面时的用户UA</td>
</tr>
<tr>
<td>frameQuality</td>
<td>number</td>
<td>捕获帧图质量(0-100)仅jpeg有效</td>
</tr>
<tr>
<td>frameFormat</td>
<td>string</td>
<td>帧图格式(jpeg/png)建议使用jpeg,png捕获较为耗时</td>
</tr>
<tr>
<td>beginFrameTimeout</td>
<td>number</td>
<td>BeginFrame捕获图像超时时间(毫秒)</td>
</tr>
<tr>
<td>mp4Encoder</td>
<td>string</td>
<td>全局MP4格式的视频编码器,默认使用libx264软编码器,建议根据您的硬件选用合适的硬编码器加速合成</td>
</tr>
<tr>
<td>webmEncoder</td>
<td>string</td>
<td>全局WEBM格式的视频编码器,默认使用libvpx软编码器,建议根据您的硬件选用合适的硬编码器加速合成</td>
</tr>
<tr>
<td>audioEncoder</td>
<td>string</td>
<td>全局音频编码器,建议采用默认的aac编码器</td>
</tr>
</tbody>
</table>
<br>
### WebVideoCreator.createSingleVideo(options: Object): [SingleVideo](#singlevideo)
创建单幕视频实例
#### options 参数
参考 [SingleVideo](#singlevideo) 构造函数的options参数。
<br>
### WebVideoCreator.createMultiVideo(options: Object): [MultiVideo](#multivideo)
创建多幕视频实例
#### options 参数
参考 [MultiVideo](#multivideo) 构造函数的options参数。
<br>
### WebVideoCreator.createChunkVideo(options: Object): [ChunkVideo](#chunkvideo)
创建分块视频实例
#### options 参数
参考 [ChunkVideo](#chunkVideo) 构造函数的options参数。
<br>
# SingleVideo
单幕视频
## 构造函数
### new SingleVideo(options: Object)
#### options 参数
<table width="100%">
<thead >
<tr>
<th>参数</th>
<th>类型</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>url</td>
<td>string</td>
<td>待渲染的页面URL</td>
</tr>
<tr>
<td>outputPath</td>
<td>string</td>
<td>视频输出路径</td>
</tr>
<tr>
<td>width</td>
<td>number</td>
<td>视频宽度</td>
</tr>
<tr>
<td>height</td>
<td>number</td>
<td>视频高度</td>
</tr>
<tr>
<td>duration</td>
<td>number</td>
<td>视频时长</td>
</tr>
<tr>
<td>startTime</td>
<td>number</td>
<td>视频开始捕获时间点</td>
</tr>
<tr>
<td>fps</td>
<td>number</td>
<td>视频帧率</td>
</tr>
<tr>
<td>format</td>
<td>string</td>
<td>导出视频格式(mp4/webm)</td>
</tr>
<tr>
<td>attachCoverPath</td>
<td>string</td>
<td>附加到视频首帧的封面文件路径</td>
</tr>
<tr>
<td>coverCapture</td>
<td>boolean</td>
<td>是否捕获封面并输出</td>
</tr>
<tr>
<td>coverCaptureTime</td>
<td>number</td>
<td>封面捕获时间点(毫秒)</td>
</tr>
<tr>
<td>coverCaptureFormat</td>
<td>string</td>
<td>封面捕获格式(jpg/png/bmp)</td>
</tr>
<tr>
<td>videoEncoder</td>
<td>string</td>
<td>视频编码器,详见 <a href="./video-encoder.md">视频编码器说明</a></td>
</tr>
<tr>
<td>videoQuality</td>
<td>number</td>
<td>视频质量(0-100)</td>
</tr>
<tr>
<td>videoBitrate</td>
<td>string</td>
<td>视频码率(设置码率将忽略videoQuality)</td>
</tr>
<tr>
<td>pixelFormat</td>
<td>string</td>
<td>像素格式(yuv420p/yuv444p/rgb24)</td>
</tr>
<tr>
<td>audioEncoder</td>
<td>string</td>
<td>音频编码器,建议默认aac</td>
</tr>
<tr>
<td>audioBitrate</td>
<td>string</td>
<td>音频码率</td>
</tr>
<tr>
<td>volume</td>
<td>number</td>
<td>视频音量(0-100)</td>
</tr>
<tr>
<td>pageWaitForOptions</td>
<td><a href="https://pptr.dev/api/puppeteer.waitforoptions">WaitForOptions</a></td>
<td>页面等待选项</td>
</tr>
<tr>
<td>pageViewport</td>
<td><a href="https://pptr.dev/api/puppeteer.viewport#properties">Viewport</a></td>
<td>页面视窗参数</td>
</tr>
<tr>
<td>pagePrepareFn</td>
<td>Function</td>
<td>页面预处理函数,可以在渲染之前对Page对象操作</td>
</tr>
<tr>
<td>timeActions</td>
<td>Object{[key: Number]: Function}</td>
<td>事件序列,可以在渲染过程中对Page对象操作,key 为 Number 指定某个渲染时刻触发</td>
</tr>
<tr>
<td>showProgress</td>
<td>boolean</td>
<td>是否在命令行展示进度</td>
</tr>
<tr>
<td>autostartRender</td>
<td>boolean</td>
<td>是否自动启动渲染,如果为false请务必在页面中执行 <a href="./capture-ctx.md#capturecontextstart">captureCtx.start()</a></td>
</tr>
<tr>
<td>consoleLog</td>
<td>boolean</td>
<td>是否开启控制台日志输出</td>
</tr>
<tr>
<td>videoPreprocessLog</td>
<td>boolean</td>
<td>是否开启视频预处理日志输出</td>
</tr>
<tr>
<td>parallelWriteFrames</td>
<td>number</td>
<td>并行写入流的帧数</td>
</tr>
</tbody>
</table>
## 事件
### progress
合成进度事件,回调参数:(progress, processedFrameCount, totalFrameCount)
### completed
已完成合成事件,回调参数:(result)
### error
错误事件,回调参数:(err)
## 成员
### SingleVideo.registerFont(options: Object)
注册字体
#### options 参数
参考 [Font](#font) 字体参数。
### SingleVideo.registerFonts([options: Object, ...])
注册多个字体
#### options 参数
参考 [Font](#font) 字体参数。
### SingleVideo.addAudio(options: Object)
添加音频
#### options 参数
参考 [Audio](#audio) 音频参数。
### SingleVideo.addAudios([options: Object, ...])
添加多个音频
#### options 参数
参考 [Audio](#audio) 音频参数。
### SingleVideo.start()
启动单幕渲染合成
### SingleVideo.startAndWait(): Promise
启动单幕渲染合成并等待完成
<br>
# MultiVideo
多幕视频
## 构造函数
### new MultiVideo(options: Object)
#### options 参数
<table width="100%">
<thead >
<tr>
<th>参数</th>
<th>类型</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>width</td>
<td>number</td>
<td>视频宽度</td>
</tr>
<tr>
<td>height</td>
<td>number</td>
<td>视频高度</td>
</tr>
<tr>
<td>outputPath</td>
<td>string</td>
<td>视频输出路径</td>
</tr>
<tr>
<td>chunks</td>
<td><a href="#chunkvideo">ChunkVideo</a>[]</td>
<td>未渲染或已渲染的ChunkVideo列表,可以是ChunkVideo实例也可以是普通对象</td>
</tr>
<tr>
<td>startTime</td>
<td>number</td>
<td>视频开始捕获时间点</td>
</tr>
<tr>
<td>fps</td>
<td>number</td>
<td>视频帧率</td>
</tr>
<tr>
<td>format</td>
<td>string</td>
<td>导出视频格式(mp4/webm)</td>
</tr>
<tr>
<td>attachCoverPath</td>
<td>string</td>
<td>附加到视频首帧的封面文件路径</td>
</tr>
<tr>
<td>coverCapture</td>
<td>boolean</td>
<td>是否捕获封面并输出</td>
</tr>
<tr>
<td>coverCaptureTime</td>
<td>number</td>
<td>封面捕获时间点(毫秒)</td>
</tr>
<tr>
<td>coverCaptureFormat</td>
<td>string</td>
<td>封面捕获格式(jpg/png/bmp)</td>
</tr>
<tr>
<td>videoEncoder</td>
<td>string</td>
<td>视频编码器,详见 [视频编码器说明](./video-encoder.md)</td>
</tr>
<tr>
<td>videoQuality</td>
<td>number</td>
<td>视频质量(0-100)</td>
</tr>
<tr>
<td>videoBitrate</td>
<td>string</td>
<td>视频码率(设置码率将忽略videoQuality)</td>
</tr>
<tr>
<td>pixelFormat</td>
<td>string</td>
<td>像素格式(yuv420p/yuv444p/rgb24)</td>
</tr>
<tr>
<td>audioEncoder</td>
<td>string</td>
<td>音频编码器,建议默认aac</td>
</tr>
<tr>
<td>audioBitrate</td>
<td>string</td>
<td>音频码率</td>
</tr>
<tr>
<td>volume</td>
<td>number</td>
<td>视频音量(0-100)</td>
</tr>
<tr>
<td>pagePrepareFn</td>
<td>Function</td>
<td>页面预处理函数,可以在渲染之前对Page对象操作</td>
</tr>
<tr>
<td>timeActions</td>
<td>Object{[key: Number]: Function}</td>
<td>事件序列,可以在渲染过程中对Page对象操作,key 为 Number 指定某个渲染时刻触发</td>
</tr>
<tr>
<td>showProgress</td>
<td>boolean</td>
<td>是否在命令行展示进度</td>
</tr>
<tr>
<td>parallelWriteFrames</td>
<td>number</td>
<td>并行写入流的帧数</td>
</tr>
</tbody>
</table>
## 事件
### progress
合成进度事件,回调参数:(progress: number, processedFrameCount: number, totalFrameCount: number)
### completed
已完成合成事件,回调参数:(result)
### error
错误事件,回调参数:(err)
## 成员
### MultiVideo.registerFont(options: Object)
注册字体
#### options 参数
参考 [Font](#font) 字体参数。
### MultiVideo.registerFonts([options: Object, ...])
注册多个字体
#### options 参数
参考 [Font](#font) 字体参数。
### MultiVideo.addAudio(options: Object)
添加音频
#### options 参数
参考 [Audio](#audio) 音频参数。
### MultiVideo.addAudios([options: Object, ...])
添加多个音频
#### options 参数
参考 [Audio](#audio) 音频参数。
### MultiVideo.input(chunk: [ChunkVideo](#chunkvideo), [[transtion](#transition)])
输入分块视频,可以选择加入转场效果
#### chunk 参数
参考 [ChunkVideo](#chunkvideo) 。
#### transtion 参数
参考 [transtion](#transition) 。
### MultiVideo.start()
启动多幕视频渲染合成,如果输入的分块视频已经合成完毕则会跳过渲染进入合成阶段
### MultiVideo.startAndWait(): Promise
启动多幕视频渲染合成并等待完成
<br>
# ChunkVideo
分块视频
## 构造函数
### new ChunkVideo(options: Object)
#### options 参数
<table width="100%">
<thead >
<tr>
<th>参数</th>
<th>类型</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>url</td>
<td>string</td>
<td>待渲染的页面URL,与content二选一</td>
</tr>
<tr>
<td>content</td>
<td>string</td>
<td>待渲染的页面内容,与url二选一</td>
</tr>
<tr>
<td>outputPath</td>
<td>string</td>
<td>视频输出路径</td>
</tr>
<tr>
<td>width</td>
<td>number</td>
<td>视频宽度</td>
</tr>
<tr>
<td>height</td>
<td>number</td>
<td>视频高度</td>
</tr>
<tr>
<td>duration</td>
<td>number</td>
<td>视频时长</td>
</tr>
<tr>
<td>startTime</td>
<td>number</td>
<td>视频开始捕获时间点</td>
</tr>
<tr>
<td>fps</td>
<td>number</td>
<td>视频帧率</td>
</tr>
<tr>
<td>transition</td>
<td>string | <a href="#transition">Transition</a></td>
<td>进入下一视频分块的转场效果</td>
</tr>
<tr>
<td>format</td>
<td>string</td>
<td>导出视频格式(mp4/webm)</td>
</tr>
<tr>
<td>attachCoverPath</td>
<td>string</td>
<td>附加到视频首帧的封面文件路径</td>
</tr>
<tr>
<td>coverCapture</td>
<td>boolean</td>
<td>是否捕获封面并输出</td>
</tr>
<tr>
<td>coverCaptureTime</td>
<td>number</td>
<td>封面捕获时间点(毫秒)</td>
</tr>
<tr>
<td>coverCaptureFormat</td>
<td>string</td>
<td>封面捕获格式(jpg/png/bmp)</td>
</tr>
<tr>
<td>videoEncoder</td>
<td>string</td>
<td>视频编码器,详见 <a href="./video-encoder.md">视频编码器说明</a></td>
</tr>
<tr>
<td>videoQuality</td>
<td>number</td>
<td>视频质量(0-100)</td>
</tr>
<tr>
<td>videoBitrate</td>
<td>string</td>
<td>视频码率(设置码率将忽略videoQuality)</td>
</tr>
<tr>
<td>pixelFormat</td>
<td>string</td>
<td>像素格式(yuv420p/yuv444p/rgb24)</td>
</tr>
<tr>
<td>audioEncoder</td>
<td>string</td>
<td>音频编码器,建议默认aac</td>
</tr>
<tr>
<td>audioBitrate</td>
<td>string</td>
<td>音频码率</td>
</tr>
<tr>
<td>volume</td>
<td>number</td>
<td>视频音量(0-100)</td>
</tr>
<tr>
<td>pageWaitForOptions</td>
<td><a href="https://pptr.dev/api/puppeteer.waitforoptions">WaitForOptions</a></td>
<td>页面等待选项</td>
</tr>
<tr>
<td>pageViewport</td>
<td><a href="https://pptr.dev/api/puppeteer.viewport#properties">Viewport</a></td>
<td>页面视窗参数</td>
</tr>
<tr>
<td>pagePrepareFn</td>
<td>Function</td>
<td>页面预处理函数,可以在渲染之前对Page对象操作</td>
</tr>
<tr>
<td>timeActions</td>
<td>Object{[key: Number]: Function}</td>
<td>事件序列,可以在渲染过程中对Page对象操作,key 为 Number 指定某个渲染时刻触发</td>
</tr>
<tr>
<td>showProgress</td>
<td>boolean</td>
<td>是否在命令行展示进度</td>
</tr>
<tr>
<td>autostartRender</td>
<td>boolean</td>
<td>是否自动启动渲染,如果为false请务必在页面中执行 captureCtx.start()</td>
</tr>
<tr>
<td>consoleLog</td>
<td>boolean</td>
<td>是否开启控制台日志输出</td>
</tr>
<tr>
<td>videoPreprocessLog</td>
<td>boolean</td>
<td>是否开启视频预处理日志输出</td>
</tr>
<tr>
<td>parallelWriteFrames</td>
<td>number</td>
<td>并行写入流的帧数</td>
</tr>
</tbody>
</table>
## 事件
### progress
合成进度事件,回调参数:(progress: number, processedFrameCount: number, totalFrameCount: number)
### completed
已完成合成事件,回调参数:(result)
### error
错误事件,回调参数:(err)
## 成员
### ChunkVideo.registerFont(options: Object)
注册字体
#### options 参数
参考 [Font](#font) 字体参数。
### ChunkVideo.registerFonts([options: Object, ...])
注册多个字体
#### options 参数
参考 [Font](#font) 字体参数。
### ChunkVideo.addAudio(options: Object)
添加音频
#### options 参数
参考 [Audio](#audio) 音频参数。
### ChunkVideo.addAudios([options: Object, ...])
添加多个音频
#### options 参数
参考 [Audio](#audio) 音频参数。
### ChunkVideo.setTransition(options: Object)
设置转场效果
#### options 参数
参考 [Transition](#transition) 转场参数。
### ChunkVideo.start()
启动分块视频渲染合成,分块视频渲染后还需要输入到 [MultiVideo](#multivideo) 进行最终视频合成
### ChunkVideo.startAndWait(): Promise
启动分块视频渲染合成并等待完成
# Audio
音频参数
<table width="100%">
<thead >
<tr>
<th>参数</th>
<th>类型</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>url</td>
<td>string</td>
<td>音频URL,与path二选一</td>
</tr>
<tr>
<td>path</td>
<td>string</td>
<td>音频本地路径,与url二选一</td>
</tr>
<tr>
<td>startTime</td>
<td>number</td>
<td>起始时间点(毫秒)</td>
</tr>
<tr>
<td>endTime</td>
<td>number</td>
<td>结束时间点(毫秒)</td>
</tr>
<tr>
<td>loop</td>
<td>boolean</td>
<td>是否循环播放</td>
</tr>
<tr>
<td>volume</td>
<td>number</td>
<td>音量(0-100)</td>
</tr>
<tr>
<td>seekStart</td>
<td>number</td>
<td>裁剪起始时间点(毫秒)</td>
</tr>
<tr>
<td>seekEnd</td>
<td>number</td>
<td>裁剪结束实际点(毫秒)</td>
</tr>
<tr>
<td>fadeInDuration</td>
<td>number</td>
<td>淡入时长(毫秒)</td>
</tr>
<tr>
<td>fadeOutDuration</td>
<td>number</td>
<td>淡出时长(毫秒)</td>
</tr>
<tr>
<td>retryFetchs</td>
<td>number</td>
<td>重试拉取次数</td>
</tr>
<tr>
<td>ignoreCache</td>
<td>boolean</td>
<td>是否忽略本地缓存</td>
</tr>
</tbody>
</table>
# Transition
转场参数,请参考 [转场效果](./transition.md) 。
<table width="100%">
<thead >
<tr>
<th>参数</th>
<th>类型</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>id</td>
<td>string</td>
<td>转场ID(与滤镜名称一致)</td>
</tr>
<tr>
<td>duration</td>
<td>string</td>
<td>转场时长(毫秒)</td>
</tr>
</tbody>
</table>
# Font
字体参数
<table width="100%">
<thead >
<tr>
<th>参数</th>
<th>类型</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>url</td>
<td>string</td>
<td>字体URL,与path二选一</td>
</tr>
<tr>
<td>path</td>
<td>string</td>
<td>字体本地路径,与url二选一</td>
</tr>
<tr>
<td>family</td>
<td>string</td>
<td>字体集名称</td>
</tr>
<tr>
<td>style</td>
<td>string</td>
<td>字体样式</td>
</tr>
<tr>
<td>weight</td>
<td>number | string</td>
<td>字体粗细</td>
</tr>
<tr>
<td>format</td>
<td>string</td>
<td>字体格式</td>
</tr>
<tr>
<td>retryFetchs</td>
<td>number</td>
<td>重试拉取次数</td>
</tr>
<tr>
<td>ignoreCache</td>
<td>boolean</td>
<td>是否忽略本地缓存</td>
</tr>
</tbody>
</table>