A1300399510/PC-official
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

no message

Browse Source
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-12-10 16:32:02 +08:00
parent 8d664fcbea
commit 1334fa197f
1 changed files with 38 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
player.html
View File

@@ -746,6 +746,11 @@
<script src="/static/js/ffmpeg.min.js"></script>
<script src="/static/js/html2canvas.min.js"></script>
<script src="/static/js/html-to-image.js"></script>
<script src="https://unpkg.com/vconsole@3.15.1/dist/vconsole.min.js"></script>
<script>
// VConsole will be exported to `window.VConsole` by default.
var vConsole = new window.VConsole();
</script>
</head>
<body>
@@ -960,9 +965,9 @@
setTimeout(() => els.loader.remove(), 600);
}
async function renderUI(data) {
async function renderUI(data) {
els.songTitle.innerText = data.title;
// 预加载图片并转换为 Blob URL (解决跨域和缓存问题)
try {
const imgRes = await fetch(data.img);
@@ -1656,47 +1661,49 @@
// 启动渲染循环：html-to-image 截图
// 目标帧率 120 FPS，不再使用 setTimeout 限流，而是全力渲染
const targetFPS = 120;
async function renderLoop() {
if (!isMVRecording) return;
console.log('renderLoop');
// 标记开始处理
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)'
}
});
// 将捕捉到的画面绘制到录制画布上
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) {
// 恢复高清录制，限制最大 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);
}
// 不再使用 setTimeout 进行延时，避免 JS 定时器精度问题导致的抖动
// 直接请求下一帧，让浏览器决定最佳时机（通常是 60Hz，如果设备支持高刷则更高）
// 这样可以消除人为引入的卡顿
if (isMVRecording) {
mvRafId = requestAnimationFrame(renderLoop);
mvRafId = requestAnimationFrame(renderLoop);
}
}
mvRafId = requestAnimationFrame(renderLoop);