no message

player.html

@@ -1661,73 +1661,35 @@
       // 启动渲染循环：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;
-        }
-        
+        console.log('renderLoop');
+
+
         // 标记开始处理
         const beginTime = Date.now();
 
         try {
-            // 如果上一帧还没处理完，直接跳过这一帧，防止 UI 线程卡死
-            if (isRendering) {
-                requestAnimationFrame(renderLoop);
-                return;
-            }
-
-            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);
-            }
+          const source = document.querySelector('.main-container');
+          if (source) {
+            // 使用高性能的手动绘制函数替代 html-to-image
+            // 这能将帧率从 5 FPS 提升到 60+ FPS
+            drawCanvasFrame();
+          }
         } catch (e) {
-            console.error('Frame capture error:', e);
-        } finally {
-            isRendering = false;
+          console.error('Frame capture error:', e);
         }
-        
+
+        // 不再使用 setTimeout 进行延时，避免 JS 定时器精度问题导致的抖动
+        // 直接请求下一帧，让浏览器决定最佳时机（通常是 60Hz，如果设备支持高刷则更高）
+        // 这样可以消除人为引入的卡顿
         if (isMVRecording) {
-             mvRafId = requestAnimationFrame(renderLoop);
+          mvRafId = requestAnimationFrame(renderLoop);
         }
       }
       mvRafId = requestAnimationFrame(renderLoop);
 
-
       mvStream = mvCanvas.captureStream(targetFPS);
 
       // 添加音频轨道