From 4aca5ac1b8d5db448c474af4799a08d3d9ec96eb Mon Sep 17 00:00:00 2001 From: xujiujiu <906784584@qq.com> Date: Tue, 15 Aug 2023 14:22:20 +0800 Subject: [PATCH 1/3] #1289 support config chrome launch options --- packages/rrvideo/rrvideo.config.example.json | 3 ++- packages/rrvideo/src/index.ts | 4 ++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/rrvideo/rrvideo.config.example.json b/packages/rrvideo/rrvideo.config.example.json index d1445e3006..5a6ecf5b4b 100644 --- a/packages/rrvideo/rrvideo.config.example.json +++ b/packages/rrvideo/rrvideo.config.example.json @@ -6,5 +6,6 @@ "mouseTail": { "strokeStyle": "green", "lineWidth": 2 - } + }, + "launchOptions": {} } diff --git a/packages/rrvideo/src/index.ts b/packages/rrvideo/src/index.ts index 0909746929..a23ca13165 100644 --- a/packages/rrvideo/src/index.ts +++ b/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 = { input: '', output: 'rrvideo-output.webm', headless: true, + launchOptions: {}, // A good trade-off value between quality and file size. resolutionRatio: 0.8, onProgressUpdate: () => { @@ -126,6 +129,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, From f796f1d31bc24e9f3bfd09faedccca499ad295d2 Mon Sep 17 00:00:00 2001 From: xujiujiu <906784584@qq.com> Date: Wed, 16 Aug 2023 09:14:48 +0800 Subject: [PATCH 2/3] format rrvideo code --- packages/rrvideo/src/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/rrvideo/src/index.ts b/packages/rrvideo/src/index.ts index a23ca13165..99120f1ee4 100644 --- a/packages/rrvideo/src/index.ts +++ b/packages/rrvideo/src/index.ts @@ -3,7 +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"; +import type { LaunchOptions } from 'playwright'; const rrwebScriptPath = path.resolve( require.resolve('rrweb-player'), From c7d4c6f0494b1828e6751928d8aadec9e6f200e7 Mon Sep 17 00:00:00 2001 From: xujiujiu <906784584@qq.com> Date: Thu, 17 Aug 2023 10:30:07 +0800 Subject: [PATCH 3/3] =?UTF-8?q?typescript=20check=20&=20=E2=80=99launchOpt?= =?UTF-8?q?ions=E2=80=98=20format?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/rrvideo/src/cli.ts | 22 +++++++++++++++++----- packages/rrvideo/src/index.ts | 10 +++++++++- 2 files changed, 26 insertions(+), 6 deletions(-) diff --git a/packages/rrvideo/src/cli.ts b/packages/rrvideo/src/cli.ts index 600c531a23..d571108269 100644 --- a/packages/rrvideo/src/cli.ts +++ b/packages/rrvideo/src/cli.ts @@ -5,6 +5,7 @@ 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)); @@ -12,17 +13,27 @@ 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, }) diff --git a/packages/rrvideo/src/index.ts b/packages/rrvideo/src/index.ts index 99120f1ee4..f98e821c80 100644 --- a/packages/rrvideo/src/index.ts +++ b/packages/rrvideo/src/index.ts @@ -102,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. @@ -129,7 +137,7 @@ export async function transformToVideo(options: RRvideoConfig) { Object.assign(config.rrwebPlayer, scaledViewport); const browser = await chromium.launch({ headless: config.headless, - ...config.launchOptions + ...config.launchOptions, }); const context = await browser.newContext({ viewport: scaledViewport,