fix(web-test): real-time video playback via frame duplication

CDP screencast sends frames only on screen changes, causing ffmpeg
to compress pauses and produce sped-up video. Now duplicates the
previous frame to fill timing gaps, maintaining real-time speed.
Also add *.mp4 to .gitignore alongside *.png.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Nick Shirokov
2026-02-28 21:30:46 +03:00
parent 751a6a8f12
commit 99a5c7168a
2 changed files with 21 additions and 1 deletions
@@ -2415,11 +2415,30 @@ export async function startRecording(outputPath, opts = {}) {
ffmpeg.on('error', err => { ffmpegError += err.message; });
// Listen for screencast frames and pipe to ffmpeg
// CDP sends frames only on screen changes, so we duplicate frames
// to fill gaps and maintain real-time playback speed
const frameDuration = 1000 / fps;
let lastFrameTime = null;
let lastFrameBuf = null;
cdp.on('Page.screencastFrame', async ({ data, sessionId }) => {
const buf = Buffer.from(data, 'base64');
const now = Date.now();
if (!ffmpeg.stdin.destroyed) {
if (lastFrameTime && lastFrameBuf) {
// Fill the gap with duplicates of the previous frame
const gap = now - lastFrameTime;
const dupes = Math.round(gap / frameDuration) - 1;
for (let i = 0; i < dupes && i < fps * 2; i++) {
ffmpeg.stdin.write(lastFrameBuf);
}
}
ffmpeg.stdin.write(buf);
}
lastFrameTime = now;
lastFrameBuf = buf;
try { await cdp.send('Page.screencastFrameAck', { sessionId }); } catch {}
});
+2 -1
View File
@@ -26,8 +26,9 @@ __pycache__/
.claude/skills/web-test/scripts/node_modules/
.claude/skills/web-test/.browser-session.json
# Скриншоты (артефакты тестирования web-test)
# Скриншоты и видео (артефакты тестирования web-test)
*.png
*.mp4
# Навыки, скопированные для других AI-платформ (генерируются scripts/switch.py)
.codex/