From 899d0d04fa48e4b6b0b0eec1441a67a9e97a2baa Mon Sep 17 00:00:00 2001
From: "DESKTOP-RQ919RC\\Pc" <1300399510@qq.com>
Date: Wed, 10 Dec 2025 17:20:56 +0800
Subject: [PATCH] no message
---
player.html | 68 +++++---------------
未命名 (4).html | 162 ++++++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 177 insertions(+), 53 deletions(-)
create mode 100644 未命名 (4).html
diff --git a/player.html b/player.html
index e4c8bc8..c3b21a8 100644
--- a/player.html
+++ b/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);
// 添加音频轨道
diff --git a/未命名 (4).html b/未命名 (4).html
new file mode 100644
index 0000000..bee7782
--- /dev/null
+++ b/未命名 (4).html
@@ -0,0 +1,162 @@
+
+
+
+
+ Chrome 原生 API 屏幕录制
+
+
+
+
+
+
+
+
+
+ 状态：未开始
+
+
+
+
+