feat(video): add quality option to recordVideo

Author: azmeuk

docs/src/api/params.md

@@ -827,6 +827,9 @@ When set to `minimal`, only record information necessary for routing from HAR. T
     - `duration` ?<[float]> How long each annotation is displayed in milliseconds. Defaults to `500`.
     - `position` ?<[AnnotatePosition]<"top-left"|"top"|"top-right"|"bottom-left"|"bottom"|"bottom-right">> Position of the action title overlay. Defaults to `"top-right"`.
     - `fontSize` ?<[int]> Font size of the action title in pixels. Defaults to `24`.
+  - `quality` ?<[Object]> Encoding quality. When omitted, the tuned VP8 defaults are used.
+    - `mode` <[VideoQualityMode]<"crf"|"bitrate">> `"crf"` for constant rate factor (constant visual quality, variable file size). `"bitrate"` for a target bitrate (variable visual quality, predictable file size).
+    - `value` <[int]> For `"crf"`, an integer between `0` (lossless) and `63` (worst). For `"bitrate"`, the target bitrate in bits per second (e.g. `1_000_000` for 1 Mbit/s).
 
 Enables video recording for all pages into `recordVideo.dir` directory. If not specified videos are not recorded. Make
 sure to await [`method: BrowserContext.close`] for videos to be saved.
@@ -851,6 +854,16 @@ Dimensions of the recorded videos. If not specified the size will be equal to `v
 scaled down to fit into 800x800. If `viewport` is not configured explicitly the video size defaults to 800x450.
 Actual picture of each page will be scaled down if necessary to fit the specified size.
 
+## context-option-recordvideo-quality
+* langs: csharp, java, python
+  - alias-python: record_video_quality
+- `recordVideoQuality` <[Object]>
+  * alias-java: RecordVideoQuality
+  - `mode` <[VideoQualityMode]<"crf"|"bitrate">> `"crf"` for constant rate factor (constant visual quality, variable file size). `"bitrate"` for a target bitrate (variable visual quality, predictable file size).
+  - `value` <[int]> For `"crf"`, an integer between `0` (lossless) and `63` (worst). For `"bitrate"`, the target bitrate in bits per second (e.g. `1_000_000` for 1 Mbit/s).
+
+Encoding quality. When omitted, the tuned VP8 defaults are used.
+
 ## context-option-proxy
 - `proxy` <[Object]>
   * alias: Proxy
@@ -1075,6 +1088,7 @@ between the same pixel in compared images, between zero (strict) and one (lax),
 - %%-context-option-recordvideo-%%
 - %%-context-option-recordvideo-dir-%%
 - %%-context-option-recordvideo-size-%%
+- %%-context-option-recordvideo-quality-%%
 - %%-context-option-strict-%%
 - %%-context-option-service-worker-policy-%%
 

docs/src/test-api/class-testoptions.md

@@ -648,6 +648,9 @@ export default defineConfig({
       - `level` ?<[TestAnnotationLevel]<"file"|"test"|"step">> Level of the detail to include about the current test.
       - `position` ?<[AnnotatePosition]<"top-left"|"top"|"top-right"|"bottom-left"|"bottom"|"bottom-right">> Position of the test information overlay. Defaults to `"top-left"`.
       - `fontSize` ?<[int]> Font size of the test information in pixels. Defaults to `14`.
+  - `quality` ?<[Object]> Encoding quality. When omitted, the tuned VP8 defaults are used.
+    - `mode` <[VideoQualityMode]<"crf"|"bitrate">> `"crf"` for constant rate factor (constant visual quality, variable file size). `"bitrate"` for a target bitrate (variable visual quality, predictable file size).
+    - `value` <[int]> For `"crf"`, an integer between `0` (lossless) and `63` (worst). For `"bitrate"`, the target bitrate in bits per second (e.g. `1_000_000` for 1 Mbit/s).
 
 Whether to record video for each test. Defaults to `'off'`.
 * `'off'`: Do not record video.

packages/playwright-client/types/types.d.ts

@@ -10499,6 +10499,23 @@ export interface Browser {
          */
         fontSize?: number;
       };
+
+      /**
+       * Encoding quality. When omitted, the tuned VP8 defaults are used.
+       */
+      quality?: {
+        /**
+         * `"crf"` for constant rate factor (constant visual quality, variable file size). `"bitrate"` for a target bitrate
+         * (variable visual quality, predictable file size).
+         */
+        mode: "crf"|"bitrate";
+
+        /**
+         * For `"crf"`, an integer between `0` (lossless) and `63` (worst). For `"bitrate"`, the target bitrate in bits per
+         * second (e.g. `1_000_000` for 1 Mbit/s).
+         */
+        value: number;
+      };
     };
 
     /**
@@ -15946,6 +15963,23 @@ export interface BrowserType<Unused = {}> {
          */
         fontSize?: number;
       };
+
+      /**
+       * Encoding quality. When omitted, the tuned VP8 defaults are used.
+       */
+      quality?: {
+        /**
+         * `"crf"` for constant rate factor (constant visual quality, variable file size). `"bitrate"` for a target bitrate
+         * (variable visual quality, predictable file size).
+         */
+        mode: "crf"|"bitrate";
+
+        /**
+         * For `"crf"`, an integer between `0` (lossless) and `63` (worst). For `"bitrate"`, the target bitrate in bits per
+         * second (e.g. `1_000_000` for 1 Mbit/s).
+         */
+        value: number;
+      };
     };
 
     /**
@@ -22517,6 +22551,23 @@ export interface Electron {
          */
         fontSize?: number;
       };
+
+      /**
+       * Encoding quality. When omitted, the tuned VP8 defaults are used.
+       */
+      quality?: {
+        /**
+         * `"crf"` for constant rate factor (constant visual quality, variable file size). `"bitrate"` for a target bitrate
+         * (variable visual quality, predictable file size).
+         */
+        mode: "crf"|"bitrate";
+
+        /**
+         * For `"crf"`, an integer between `0` (lossless) and `63` (worst). For `"bitrate"`, the target bitrate in bits per
+         * second (e.g. `1_000_000` for 1 Mbit/s).
+         */
+        value: number;
+      };
     };
 
     /**
@@ -23205,6 +23256,23 @@ export interface AndroidDevice {
          */
         fontSize?: number;
       };
+
+      /**
+       * Encoding quality. When omitted, the tuned VP8 defaults are used.
+       */
+      quality?: {
+        /**
+         * `"crf"` for constant rate factor (constant visual quality, variable file size). `"bitrate"` for a target bitrate
+         * (variable visual quality, predictable file size).
+         */
+        mode: "crf"|"bitrate";
+
+        /**
+         * For `"crf"`, an integer between `0` (lossless) and `63` (worst). For `"bitrate"`, the target bitrate in bits per
+         * second (e.g. `1_000_000` for 1 Mbit/s).
+         */
+        value: number;
+      };
     };
 
     /**
@@ -24385,6 +24453,23 @@ export interface BrowserContextOptions {
        */
       fontSize?: number;
     };
+
+    /**
+     * Encoding quality. When omitted, the tuned VP8 defaults are used.
+     */
+    quality?: {
+      /**
+       * `"crf"` for constant rate factor (constant visual quality, variable file size). `"bitrate"` for a target bitrate
+       * (variable visual quality, predictable file size).
+       */
+      mode: "crf"|"bitrate";
+
+      /**
+       * For `"crf"`, an integer between `0` (lossless) and `63` (worst). For `"bitrate"`, the target bitrate in bits per
+       * second (e.g. `1_000_000` for 1 Mbit/s).
+       */
+      value: number;
+    };
   };
 
   /**

packages/playwright-core/src/protocol/validator.ts

@@ -209,6 +209,10 @@ scheme.AndroidDeviceLaunchBrowserParams = tObject({
       fontSize: tOptional(tInt),
       cursor: tOptional(tEnum(['none', 'pointer'])),
     })),
+    quality: tOptional(tObject({
+      mode: tEnum(['crf', 'bitrate']),
+      value: tInt,
+    })),
   })),
   strictSelectors: tOptional(tBoolean),
   serviceWorkers: tOptional(tEnum(['allow', 'block'])),
@@ -494,6 +498,10 @@ scheme.BrowserNewContextParams = tObject({
       fontSize: tOptional(tInt),
       cursor: tOptional(tEnum(['none', 'pointer'])),
     })),
+    quality: tOptional(tObject({
+      mode: tEnum(['crf', 'bitrate']),
+      value: tInt,
+    })),
   })),
   strictSelectors: tOptional(tBoolean),
   serviceWorkers: tOptional(tEnum(['allow', 'block'])),
@@ -571,6 +579,10 @@ scheme.BrowserNewContextForReuseParams = tObject({
       fontSize: tOptional(tInt),
       cursor: tOptional(tEnum(['none', 'pointer'])),
     })),
+    quality: tOptional(tObject({
+      mode: tEnum(['crf', 'bitrate']),
+      value: tInt,
+    })),
   })),
   strictSelectors: tOptional(tBoolean),
   serviceWorkers: tOptional(tEnum(['allow', 'block'])),
@@ -670,6 +682,10 @@ scheme.BrowserContextInitializer = tObject({
         fontSize: tOptional(tInt),
         cursor: tOptional(tEnum(['none', 'pointer'])),
       })),
+      quality: tOptional(tObject({
+        mode: tEnum(['crf', 'bitrate']),
+        value: tInt,
+      })),
     })),
     strictSelectors: tOptional(tBoolean),
     serviceWorkers: tOptional(tEnum(['allow', 'block'])),
@@ -1074,6 +1090,10 @@ scheme.BrowserTypeLaunchPersistentContextParams = tObject({
       fontSize: tOptional(tInt),
       cursor: tOptional(tEnum(['none', 'pointer'])),
     })),
+    quality: tOptional(tObject({
+      mode: tEnum(['crf', 'bitrate']),
+      value: tInt,
+    })),
   })),
   strictSelectors: tOptional(tBoolean),
   serviceWorkers: tOptional(tEnum(['allow', 'block'])),

packages/playwright-core/src/server/dispatchers/pageDispatcher.ts

@@ -410,7 +410,7 @@ export class PageDispatcher extends Dispatcher<Page, channels.PageChannel, Brows
     let artifact: Artifact | undefined;
     if (params.record) {
       this._videoRecorder = new VideoRecorder(this._page.screencast);
-      artifact = this._videoRecorder.start(params);
+      artifact = this._videoRecorder.start({ size: params.size });
     }
     return { artifact: artifact ? createVideoDispatcher(this.parentScope(), artifact) : undefined };
   }

packages/playwright-core/src/server/videoRecorder.ts

@@ -43,7 +43,11 @@ export class VideoRecorder {
     this._screencast = screencast;
   }
 
-  start(options: { fileName?: string, size?: { width: number, height: number } }) {
+  start(options: {
+    fileName?: string,
+    size?: { width: number, height: number },
+    quality?: { mode: 'crf' | 'bitrate', value: number },
+  }) {
     assert(!this._artifact);
     // Do this first, it likes to throw.
     const ffmpegPath = registry.findExecutable('ffmpeg')!.executablePathOrDie(this._screencast.page.browserContext._browser.sdkLanguage());
@@ -59,7 +63,7 @@ export class VideoRecorder {
     const { size } = this._screencast.addClient(this._client);
     // For video files only, prioritize encoding into the given size, regardless of the actual pixel data.
     const videoSize = options.size ?? size;
-    this._videoRecorder = new FfmpegVideoRecorder(ffmpegPath, videoSize, outputFile);
+    this._videoRecorder = new FfmpegVideoRecorder(ffmpegPath, videoSize, outputFile, { quality: options.quality });
     this._artifact = new Artifact(this._screencast.page.browserContext, outputFile);
     return this._artifact;
   }
@@ -91,10 +95,16 @@ export function startAutomaticVideoRecording(page: Page) {
   if (page.browserContext._options.recordVideo?.showActions)
     page.screencast.showActions(page.browserContext._options.recordVideo?.showActions);
   const dir = recordVideo.dir ?? page.browserContext._browser.options.artifactsDir;
-  const artifact = recorder.start({ size: recordVideo.size, fileName: path.join(dir, page.guid + '.webm') });
+  const artifact = recorder.start({
+    size: recordVideo.size,
+    fileName: path.join(dir, page.guid + '.webm'),
+    quality: recordVideo.quality,
+  });
   page.video = artifact;
 }
 
+type QualityOption = { mode: 'crf' | 'bitrate', value: number };
+
 class FfmpegVideoRecorder {
   private _size: types.Size;
   private _process: ChildProcess | null = null;
@@ -108,13 +118,15 @@ class FfmpegVideoRecorder {
   private _ffmpegPath: string;
   private _launchPromise: Promise<Error | null>;
   private _outputFile: string;
+  private _quality: QualityOption | undefined;
 
-  constructor(ffmpegPath: string, size: types.Size, outputFile: string) {
+  constructor(ffmpegPath: string, size: types.Size, outputFile: string, options: { quality?: QualityOption } = {}) {
     if (!outputFile.endsWith('.webm'))
       throw new Error('File must have .webm extension');
     this._outputFile = outputFile;
     this._ffmpegPath = ffmpegPath;
     this._size = size;
+    this._quality = options.quality;
     this._launchPromise = this._launch().catch(e => e);
   }
 
@@ -159,9 +171,7 @@ class FfmpegVideoRecorder {
     // "-threads 1" means using one thread. This drastically reduces stalling when
     //   cpu is overbooked. By default vp8 tries to use all available threads?
 
-    const w = this._size.width;
-    const h = this._size.height;
-    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 vp8 -qmin 0 -qmax 50 -crf 8 -deadline realtime -speed 8 -b:v 1M -threads 1 -vf pad=${w}:${h}:0:0:gray,crop=${w}:${h}:0:0`.split(' ');
+    const args = buildFfmpegArgs(this._size, this._quality);
     args.push(this._outputFile);
 
     const { launchedProcess, gracefullyClose } = await launchProcess({
@@ -258,3 +268,14 @@ function createWhiteImage(width: number, height: number): Buffer {
   const data = Buffer.alloc(width * height * 4, 255);
   return jpegjs.encode({ data, width, height }, 80).data;
 }
+
+function buildFfmpegArgs(size: types.Size, quality: QualityOption | undefined): string[] {
+  const w = size.width;
+  const h = size.height;
+  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 vp8 -qmin 0 -qmax 50 -deadline realtime -speed 8 -threads 1 -vf pad=${w}:${h}:0:0:gray,crop=${w}:${h}:0:0`.split(' ');
+  if (quality?.mode === 'bitrate')
+    args.push('-b:v', String(quality.value));
+  else
+    args.push('-crf', String(quality?.value ?? 8), '-b:v', '1M');
+  return args;
+}