diff --git a/player.html b/player.html
index ca81c5c..e4c8bc8 100644
--- a/player.html
+++ b/player.html
@@ -1661,52 +1661,68 @@
// 启动渲染循环:html-to-image 截图
// 目标帧率 120 FPS,不再使用 setTimeout 限流,而是全力渲染
const targetFPS = 120;
+
+ let isRendering = false; // 防止堆叠
+
+ // FPS 计算变量
+ let frameCount = 0;
+ let lastFpsTime = Date.now();
async function renderLoop() {
if (!isMVRecording) return;
-
+
+ // 计算并打印 FPS
+ frameCount++;
+ const now = Date.now();
+ if (now - lastFpsTime >= 1000) {
+ console.log(`Recording FPS: ${frameCount}`);
+ frameCount = 0;
+ lastFpsTime = now;
+ }
+
// 标记开始处理
const beginTime = Date.now();
try {
- const source = document.querySelector('.main-container');
- if (source) {
- // 恢复高清录制,限制最大 dpr 为 2 以平衡性能
- const dpr = Math.min(window.devicePixelRatio || 1, 2);
- const canvas = await htmlToImage.toCanvas(source, {
- backgroundColor: null,
- pixelRatio: dpr,
- skipAutoScale: true,
- cacheBust: false,
- fontEmbedCSS: '', // 禁用字体嵌入,防止崩溃
- filter: (node) => {
- // 过滤无效图片防止崩溃
- if (node.tagName === 'IMG' && (!node.src || node.src === window.location.href)) return false;
- return true;
- },
- style: {
- transform: 'translateZ(0)'
- }
- });
+ // 如果上一帧还没处理完,直接跳过这一帧,防止 UI 线程卡死
+ if (isRendering) {
+ requestAnimationFrame(renderLoop);
+ return;
+ }
- console.log('canvas', canvas);
-
- // 将捕捉到的画面绘制到录制画布上
- mvCtx.clearRect(0, 0, mvCanvas.width, mvCanvas.height);
- mvCtx.drawImage(canvas, 0, 0, mvCanvas.width, mvCanvas.height);
- }
+ isRendering = true;
+ const source = document.querySelector('.main-container');
+ if (source) {
+ // 恢复高清录制,限制最大 dpr 为 2 以平衡性能
+ const dpr = Math.min(window.devicePixelRatio || 1, 2);
+ const canvas = await htmlToImage.toCanvas(source, {
+ backgroundColor: null,
+ pixelRatio: dpr,
+ skipAutoScale: true,
+ cacheBust: false,
+ fontEmbedCSS: '', // 禁用字体嵌入,防止崩溃
+ filter: (node) => {
+ // 过滤无效图片防止崩溃
+ if (node.tagName === 'IMG' && (!node.src || node.src === window.location.href)) return false;
+ return true;
+ },
+ style: {
+ transform: 'translateZ(0)'
+ }
+ });
+
+ // 将捕捉到的画面绘制到录制画布上
+ mvCtx.clearRect(0, 0, mvCanvas.width, mvCanvas.height);
+ mvCtx.drawImage(canvas, 0, 0, mvCanvas.width, mvCanvas.height);
+ }
} catch (e) {
- console.error('Frame capture error:', e);
+ console.error('Frame capture error:', e);
+ } finally {
+ isRendering = false;
}
-
- // 不再使用 setTimeout 进行延时,避免 JS 定时器精度问题导致的抖动
- // 直接请求下一帧,让浏览器决定最佳时机(通常是 60Hz,如果设备支持高刷则更高)
- // 这样可以消除人为引入的卡顿
- console.log('isMVRecording', isMVRecording);
+
if (isMVRecording) {
- mvRafId = requestAnimationFrame(renderLoop);
- console.log('mvRafId', mvRafId);
-
+ mvRafId = requestAnimationFrame(renderLoop);
}
}
mvRafId = requestAnimationFrame(renderLoop);