[Feature]: test execution video recording quality control

[svlobanov]

🚀 Feature Request

Currently video recording has only mode and size options, it's not possible to configure quality. For chromium-based browsers target bitrate = 1Mbit/s is hardcoded here https://github.com/microsoft/playwright/blob/47fb9a080d9dd4c1dff062c56060b86b621485ac/packages/playwright-core/src/server/chromium/videoRecorder.ts#L101 , also it's limited to one thread and target cpu usage is 50% (8/16). My tested system is video recording/playback platform so when I record in 1280x720, quality is very poor (because it plays video and requires more cpu, more bitrate for better quality) In firefox and webkit it's done without ffmpeg, but video recording quality-related parameters are not available to playwright user. I propose to expose quality controls (like bitrate, threads, speed for ffmpeg and similar thing for firefox/webkit) as test video options (like size option)

Example

No response

Motivation

Playwright will be able to record videos where you can read the text and see what is happening that might be useful if tested system playbacks/generates video (like video player, video editor, 3d design systems and so on)

[EiffelFly]

I also have the similar needs when I need to record the whole screen with as high quality as possible. It will be great if we can have this option!

[manudar]

I do have that need also, and in my case is even worse as I use firefox and the video quality with firefox engine is even worse than with chromium.

[nikischin]

I understand, this is not the intended use case for this but it would be also cool to use Playwright for automated screen casts. Therefore a improved quality, resolution and format would be needed.

[nikischin]

So I experimented a bit and would like to share my key takeaways here:

Since Playwright uses an embedded version of FFMPEG it is not possible to use any other codec then vp8 unfortunately. Or it would require to replace the FFMPEG versions bundled with Playwright.

I tried to squeeze the best quality out of VP8 with the modification below:

const codec = 'vp8';
const bitrate = '0'; // default to 1M
const threads = '0'; // use all available threads - default to 1
const qmin = '0'; // lower means better quality
const qmax = '0'; // lower means better quality - default to 50
const crf = '0'; // lower means better quality - default to 8
const deadline = 'best'; // default to realtime
const speed = '0'; // default to 8
const args = `-loglevel error -f image2pipe -avioflags direct -fpsprobesize 0 -probesize 32 -analyzeduration 0 -c:v mjpeg -i pipe:0 -y -an -r ${fps} -c:v ${codec} -qmin ${qmin} -qmax ${qmax} -crf ${crf} -deadline ${deadline} -speed ${speed} -b:v ${bitrate} -threads ${threads} -vf pad=${w}:${h}:0:0:gray,crop=${w}:${h}:0:0`.split(' ');
    args.push(options.outputFile);

this does work pretty well, however keep in mind that this takes a lot more CPU power than the current implementation. Also file sizes get bigger, however in my test case it still remained reasonable at around 100KB/s.

Also you could use the settings with crf set to 4 and qmax set to 10 with half the file size and almost no noticeable visual difference.

I also tried improving the quality for WebKit, since thats my preferred engine, however, I wasn't able to figure that out. If you might have some ideas on this I would be happy to try it out. For Firefox I only took a quick look but also wasn't able to figure out how to improve. Maybe you have an idea @svlobanov

It would be really nice however, if the config options showcased above together with the fps could be implemented into the library. I was wondering if opening a PR would give me a chance to get this merged?

[manudar]

That sounds good, but I use Playwright Python. Any idea on how I can set those values in Playwright Python?

[audunru]

Also trying to use Playwright for screencasts. For now, I'm getting the best quality with these settings

      use: {
        ...devices["Desktop Chrome"],
        viewport: { width: 1280, height: 720 },
        deviceScaleFactor: 1,
        video: { mode: "on", size: { width: 1280, height: 720 } }
        headless: false, // More accurate recording when not headless
      },

headless: false seems to solve an issue with chrome/chromium where the image on screen randomly just hangs for several seconds. I don't experience that in Firefox, but the video quality is not as good (more artifacts, blinking).

If anyone knows how to correlate time during the test to time in the video, please let me know. Eg. if I take the time and log that something happened at the 13s mark in the test, it is not necessarily at 13s in the final video. This seems to fluctuate during the test run.