[rrvideo] feat: support config chrome launch options

packages/rrvideo/rrvideo.config.example.json

@@ -6,5 +6,6 @@
   "mouseTail": {
     "strokeStyle": "green",
     "lineWidth": 2
-  }
+  },
+  "launchOptions": {}
 }

packages/rrvideo/src/cli.ts

@@ -5,24 +5,35 @@ import minimist from 'minimist';
 import { ProgressBar } from '@open-tech-world/cli-progress-bar';
 import type { RRwebPlayerOptions } from 'rrweb-player';
 import { transformToVideo } from './index';
+import type { LaunchOptions } from 'playwright';
 
 const argv = minimist(process.argv.slice(2));
 
 if (!argv.input) {
   throw new Error('please pass --input to your rrweb events file');
 }
 
-let config = {};
+type ConfigOptions = Omit<
+  RRwebPlayerOptions['props'] & {
+    launchOptions?: LaunchOptions;
+  },
+  'events'
+>;
+
+let config: ConfigOptions = {};
+let launchOptions: LaunchOptions = {};
 
 if (argv.config) {
   const configPathStr = argv.config as string;
   const configPath = path.isAbsolute(configPathStr)
     ? configPathStr
     : path.resolve(process.cwd(), configPathStr);
-  config = JSON.parse(fs.readFileSync(configPath, 'utf-8')) as Omit<
-    RRwebPlayerOptions['props'],
-    'events'
-  >;
+  config = JSON.parse(fs.readFileSync(configPath, 'utf-8')) as ConfigOptions;
+
+  if (config.launchOptions) {
+    launchOptions = { ...config.launchOptions };
+    delete config.launchOptions;
+  }
 }
 
 const pBar = new ProgressBar({ prefix: 'Transforming' });
@@ -35,6 +46,7 @@ const onProgressUpdate = (percent: number) => {
 transformToVideo({
   input: argv.input as string,
   output: argv.output as string,
+  launchOptions: launchOptions || {},
   rrwebPlayer: config,
   onProgressUpdate,
 })

packages/rrvideo/src/index.ts

@@ -3,6 +3,7 @@ import * as path from 'path';
 import { chromium } from 'playwright';
 import { EventType, eventWithTime } from '@rrweb/types';
 import type { RRwebPlayerOptions } from 'rrweb-player';
+import type { LaunchOptions } from 'playwright';
 
 const rrwebScriptPath = path.resolve(
   require.resolve('rrweb-player'),
@@ -18,6 +19,7 @@ type RRvideoConfig = {
   input: string;
   output?: string;
   headless?: boolean;
+  launchOptions?: LaunchOptions;
   // A number between 0 and 1. The higher the value, the better the quality of the video.
   resolutionRatio?: number;
   // A callback function that will be called when the progress of the replay is updated.
@@ -29,6 +31,7 @@ const defaultConfig: Required<RRvideoConfig> = {
   input: '',
   output: 'rrvideo-output.webm',
   headless: true,
+  launchOptions: {},
   // A good trade-off value between quality and file size.
   resolutionRatio: 0.8,
   onProgressUpdate: () => {
@@ -99,6 +102,14 @@ export async function transformToVideo(options: RRvideoConfig) {
   if (!options.input) throw new Error('input is required');
   // If the output is not specified or undefined, use the default value.
   if (!options.output) delete options.output;
+  // rrvideo config file support set 'headless', if the headless is not boolean, use the default value.
+  if (
+    options.launchOptions &&
+    typeof options.launchOptions.headless === 'boolean'
+  ) {
+    config.headless = options.launchOptions.headless;
+    delete options.launchOptions.headless;
+  }
   Object.assign(config, options);
   if (config.resolutionRatio > 1) config.resolutionRatio = 1; // The max value is 1.
 
@@ -126,6 +137,7 @@ export async function transformToVideo(options: RRvideoConfig) {
   Object.assign(config.rrwebPlayer, scaledViewport);
   const browser = await chromium.launch({
     headless: config.headless,
+    ...config.launchOptions,
   });
   const context = await browser.newContext({
     viewport: scaledViewport,