‏playwright-recorder-plus: ضبط ویدیوی تمیز از Playwright

توسعه‌دهنده‌ای به اسم MuTsunTsai یه پکیج npm منتشر کرده به اسم playwright-recorder-plus که کارش ضبط ویدیوی صفحه موقع کار با Playwright ـه. تو مستندات پروژه اومده که ضبط‌کنندهٔ داخلی خود Playwright یعنی recordVideo خروجی VP8 فشرده می‌ده که دور لبهٔ حروف نویز داره. آرگومان‌های ffmpeg هم اونجا هاردکد شدن روی یه پریست realtime با بیت‌ریت پایین؛ برای آرتیفکت CI کافیه، ولی برای ویدیوی آموزشی و دمو آزاردهنده‌ست.

نویسنده می‌گه تیم Playwright چند بار (ایشوهای 8683، 12056، 17217 و 31424) درخواست باز کردن این تنظیمات رو رد کرده، با این استدلال که ffmpeg جزئیات پیاده‌سازی داخلیه. راه‌حل این پکیج اینه که به جای دست‌زدن به دل Playwright، از API عمومی page.screencast (که از نسخهٔ 1.59 در دسترسه) فریم‌های خام JPEG رو می‌گیره و خودش اونا رو به یه ffmpeg جداگانه پایپ می‌کنه. اون ffmpeg هم از بستهٔ ffmpeg-static میاد، پس ffmpeg سیستمی لازم نیست.

قلب ماجرا یه پایپ‌لاین دومرحله‌ایه. پاس اول همیشه H.264 با پریست ultrafast ـه و اصلاً قابل تنظیم نیست، چون باید از زمان واقعی جلوتر بمونه؛ اگه انکودر عقب بیفته، فشار برگشتی روی stdin کال‌بک دریافت فریم‌ها رو کند می‌کنه و ویدیوی نهایی کوتاه‌تر از واقعیت درمیاد. پاس دوم تو پس‌زمینه همون فایل میانی رو به کدک و کانتینر دلخواه شما ترنسکد می‌کنه و صداهای زمان‌بندی‌شده رو هم قاطیش می‌کنه. یعنی کیفیت ضبط دیگه به سرعت انکود نهایی گره نخورده.

نقطهٔ شروع attachRecorder(page, options) ـه که یه کنترلر برمی‌گردونه. پسوند فایل خروجی کدک پاس دوم رو خودش انتخاب می‌کنه، .mp4 می‌ره سراغ H.264 و .webm سراغ VP9. اگه هم بخواین، با preset (youtube یا web) یا آرایهٔ ffmpegArgs خودتون دستی تعیینش می‌کنین. حواستون به دو تا فعل جدا باشه: stop() فقط ضبط رو تموم می‌کنه، ولی برای رسیدن فایل نهایی به دیسک باید finalized رو await کنین.

const recorder = await attachRecorder(page, { path: "out.mp4" });
await page.goto("https://example.com");
await recorder.stop();     // ends recording (returns fast)
await recorder.finalized;  // wait for the final file to land

بقیهٔ امکانات هم دور همین محور می‌چرخن: crop برای ضبط یه ناحیه که ورودیش دقیقاً با خروجی Locator.boundingBox() جوره، autoStart: false برای وقتی که صفحه اول باید warm-up بشه، attachRecorderForContext() که پاپ‌آپ‌ها و صفحه‌های target=_blank رو هم خودکار می‌گیره، و recorder.audio(path, { offset }) برای چسبوندن فایل صوتی سر یه لحظهٔ مشخص. یه محدودیت هم داره: صدایی که خود صفحه پخش می‌کنه ضبط نمی‌شه. اجراش Node 18 به بالا و Playwright نسخهٔ 1.59 به بعد می‌خواد.

با pause() و resume() هم می‌شه بخش‌های خسته‌کننده مثل یه بیلد طولانی رو از وسط ویدیو انداخت بیرون، بدون اینکه فایل دومی ساخته بشه:

await page.click("#start");
await rec.pause();
await waitForBuildToComplete();
await rec.resume();
await page.click("#finish");

نکات کلیدی:

• جایگزین recordVideo که روی API عمومی page.screencast سوار می‌شه؛ نیازمند Playwright 1.59+ و Node 18+.
• پاس اول همیشه H.264 ultrafast و غیرقابل تغییره تا انکودر از زمان واقعی عقب نمونه.
• پریست‌های آماده: youtube برای H.264/mp4 و web برای VP9/webm، یا ffmpegArgs دلخواه.
• امکاناتی که recordVideo نداره: pause/resume، شروع تأخیری، crop، ضبط چندصفحه‌ای و mux صدا.
• ffmpeg از ffmpeg-static میاد و موقع نصب حدود 50 مگابایت باینری دانلود می‌کنه.