dennii/Web-Page-Performance-Test
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/Web-Page-Performance-Test.git synced 2026-04-17 20:05:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix video duration and quality: use timeslice and proper frame timing

Browse Source
This commit is contained in:
DeNNiiInc
2025-12-28 11:31:26 +11:00
parent 1a57b84285
commit fe24f638c6
1 changed files with 36 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
main.js
View File

@@ -706,12 +706,19 @@ async function downloadVideo() {
throw new Error('Recording failed'); throw new Error('Recording failed');
}; };
recorder.start(); // Start with timeslice to ensure proper chunking and duration
recorder.start(100); // Request data every 100ms
// Render frames // Calculate frame duration based on filmstrip timing
const totalDuration = videoFrames[videoFrames.length - 1].timing;
const frameDuration = totalDuration / videoFrames.length;
console.log(`Rendering ${videoFrames.length} frames over ${totalDuration}ms (${frameDuration}ms per frame)`);
// Render frames with proper timing
for (let i = 0; i < videoFrames.length; i++) { for (let i = 0; i < videoFrames.length; i++) {
const img = new Image(); const img = new Image();
img.crossOrigin = 'anonymous'; // Handle CORS img.crossOrigin = 'anonymous';
await new Promise((resolve, reject) => { await new Promise((resolve, reject) => {
img.onload = resolve; img.onload = resolve;
@@ -719,27 +726,35 @@ async function downloadVideo() {
img.src = videoFrames[i].data; img.src = videoFrames[i].data;
}); });
// Black background // Render this frame multiple times to fill the duration
ctx.fillStyle = '#000'; const renderCount = Math.max(1, Math.ceil(frameDuration / 33)); // 33ms per render at 30fps
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Center and scale image for (let r = 0; r < renderCount; r++) {
const scale = Math.min(canvas.width / img.width, canvas.height / img.height); // Black background
const x = (canvas.width - img.width * scale) / 2; ctx.fillStyle = '#000';
const y = (canvas.height - img.height * scale) / 2; ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, x, y, img.width * scale, img.height * scale);
// Center and scale image
// Add timestamp overlay const scale = Math.min(canvas.width / img.width, canvas.height / img.height);
ctx.fillStyle = 'rgba(0, 0, 0, 0.7)'; const x = (canvas.width - img.width * scale) / 2;
ctx.fillRect(10, canvas.height - 50, 200, 40); const y = (canvas.height - img.height * scale) / 2;
ctx.fillStyle = '#fff'; ctx.drawImage(img, x, y, img.width * scale, img.height * scale);
ctx.font = 'bold 24px Arial';
ctx.fillText(`${(videoFrames[i].timing / 1000).toFixed(1)}s`, 20, canvas.height - 20); // Add timestamp overlay
ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
// Wait for frame duration (33ms = ~30fps) ctx.fillRect(10, canvas.height - 50, 200, 40);
await new Promise(r => setTimeout(r, 33)); ctx.fillStyle = '#fff';
ctx.font = 'bold 24px Arial';
ctx.fillText(`${(videoFrames[i].timing / 1000).toFixed(1)}s`, 20, canvas.height - 20);
// Wait for next frame at 30fps
await new Promise(r => setTimeout(r, 33));
}
} }
// Add a small delay before stopping to ensure all data is captured
await new Promise(r => setTimeout(r, 200));
// Stop recording after all frames are rendered // Stop recording after all frames are rendered
recorder.stop(); recorder.stop();