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 quality: force high bitrate with multiple parameters and 30fps

Browse Source
This commit is contained in:
DeNNiiInc
2025-12-28 11:24:31 +11:00
parent 8eb02acf40
commit 0dbd593e9a
1 changed files with 21 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
main.js
View File

@@ -659,12 +659,26 @@ async function downloadVideo() {
throw new Error('No supported video format found'); throw new Error('No supported video format found');
} }
// Setup MediaRecorder with supported format // Setup MediaRecorder with supported format and force high quality
const stream = canvas.captureStream(10); // 10 FPS const stream = canvas.captureStream(30); // Increase to 30 FPS for smoother capture
const recorder = new MediaRecorder(stream, {
// MediaRecorder options - force maximum quality
const recorderOptions = {
mimeType: selectedMimeType, mimeType: selectedMimeType,
videoBitsPerSecond: 75000000 // 75 Mbps for high quality 1080p videoBitsPerSecond: 75000000, // 75 Mbps
}); bitsPerSecond: 75000000, // Some browsers use this instead
};
// Add quality parameter if supported (0-1 scale, 1 = highest)
if (selectedMimeType.includes('webm')) {
recorderOptions.videoKeyFrameIntervalDuration = 100; // Keyframe every 100ms
recorderOptions.videoKeyFrameIntervalCount = 1; // More keyframes = better quality
}
const recorder = new MediaRecorder(stream, recorderOptions);
console.log('MediaRecorder configured with:', recorderOptions);
console.log('Actual settings:', recorder.videoBitsPerSecond || 'not reported');
const chunks = []; const chunks = [];
recorder.ondataavailable = e => { recorder.ondataavailable = e => {
@@ -723,8 +737,8 @@ async function downloadVideo() {
ctx.font = 'bold 24px Arial'; ctx.font = 'bold 24px Arial';
ctx.fillText(`${(videoFrames[i].timing / 1000).toFixed(1)}s`, 20, canvas.height - 20); ctx.fillText(`${(videoFrames[i].timing / 1000).toFixed(1)}s`, 20, canvas.height - 20);
// Wait for frame duration (100ms = 10fps) // Wait for frame duration (33ms = ~30fps)
await new Promise(r => setTimeout(r, 100)); await new Promise(r => setTimeout(r, 33));
} }
// Stop recording after all frames are rendered // Stop recording after all frames are rendered