使用 fastboard sdk插入动态 PPT 的时候, 可以使用渲染参数控制网页上的 CPU、GPU以及内存资源的占用。
key | type | description |
---|---|---|
minFPS | number | 默认值: 30 设置最小 fps, 应用会尽量保证实际 fps 高于此值, 此值越小, cpu 开销越小。 |
maxFPS | number | 默认值: 40 设置最大 fps, 应用会保证实际 fps 低于此值, 此值越小, cpu 开销越小。 |
resolution | number | 默认值: pc 浏览器为 window.devicePixelRatio; 移动端浏览器为 1 。 设置渲染分辨倍率, 原始 ppt 有自己的像素尺寸,当在 2k 或者 4k 屏幕下,如果按原始 ppt 分辨率显示,画面会比较模糊。可以调整此值,使画面更清晰,同时性能开销也变高。 建议保持默认值就行,或者固定为 1。 |
autoResolution | boolean | 默认值: false, 控制是否根据运行时实际 fps 自动缩放渲染分辨率, 使得运行时 fps 保持在 minFPS 和 masFPS 之间 |
autoFPS | boolean | 默认值: false, 控制开启动态 fps, 开启后, 会根据 cpu 效率动态提升和降低 fps |
transactionBgColor | string | number | 默认值: 0x000000, 设置切页动画的背景色, 接受 css 颜色字符串或者 16进制颜色值("#ffffff",0xffffff) |
maxResolutionLevel | number | 用于设置最高显示分辨率。此值不仅影响 canvas 渲染分辨率, 同时也影响纹理质量,在低端设备, 降低此值能极大改善内存占用及图片黑屏现象. 1 最低 960 * 540, 小于 1 按 1 计算; 2 普通 1280 * 720(移动端默认设置); 3 高清 1920 * 1080; 4 3K 3200 × 1800, 大于 4 按 4 计算(pc 端默认设置);默认情况下, pc 设备 3K, 移动设备 720P |
forceCanvas | boolean | 默认 false 是否强制使用 2d 渲染, 强制使用 2d 渲染会丢失部分 3d、滤镜、特效 |
由于页面服务器没有 GPU 资源使用的 CPU 模拟 GPU, 在展示 PPT 的情况下,录制出的视频会出现电音等问题。可以通过设置 forceCanvas: true 强制使用 canvas 2D 渲染以及 maxResolutionLevel: 1 降低渲染分辨率来规避这类问题。
强制 2D 渲染会丢失部分动画效果及元素的滤镜、特效。视觉表现没有实际上课的效果强,但是不会影响 PPT 的整体观感和课件内容的传达。
仅在云端录制页面使用 forceCanvas: true,正常上课不要使用
@netless/fastboard
sdk 内部使用 SlideApp 显示 ppt 内容, 要修改 ppt 渲染参数, 请参考如下代码重新注册一次 SlideApp.
如果使用以下代码中的参数后,录制依然因为 CPU 占用过高出现电音, 可以酌情使用上一节表格中的 minFPS
、maxFPS
、resolution
参数进一步调节 CPU 占用。
import { register, SlideApp, type SlideOptions, addSlideHooks } from "@netless/fastboard";
register({
kind: SlideApp.kind,
src: SlideApp,
appOptions: {
forceCanvas: true, // 强制 2D 渲染
maxResolutionLevel: 1, // 降低最高分辨率
},
addHooks: addSlideHooks,
});