no message

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');
+            // 如果上一帧还没处理完，直接跳过这一帧，防止 UI 线程卡死
-          if (source) {
+            if (isRendering) {
-            // 恢复高清录制，限制最大 dpr 为 2 以平衡性能
+                requestAnimationFrame(renderLoop);
-            const dpr = Math.min(window.devicePixelRatio || 1, 2);
+                return;
-            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)'
-              }
-            });
 
-            console.log('canvas', canvas);
+            isRendering = true;
-
+            const source = document.querySelector('.main-container');
-            // 将捕捉到的画面绘制到录制画布上
+            if (source) {
-            mvCtx.clearRect(0, 0, mvCanvas.width, mvCanvas.height);
+                // 恢复高清录制，限制最大 dpr 为 2 以平衡性能
-            mvCtx.drawImage(canvas, 0, 0, mvCanvas.width, mvCanvas.height);
+                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);
+             mvRafId = requestAnimationFrame(renderLoop);
-          console.log('mvRafId', mvRafId);
-
         }
       }
       mvRafId = requestAnimationFrame(renderLoop);