diff --git a/package.json b/package.json index 9bf5fb3..db615d9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rrvideo", - "version": "0.2.1", + "version": "0.2.2", "description": "transform rrweb session into video", "main": "build/index.js", "bin": { @@ -18,10 +18,9 @@ "license": "MIT", "dependencies": { "@types/minimist": "^1.2.1", - "@types/puppeteer": "^5.4.0", "minimist": "^1.2.5", - "puppeteer": "^5.4.1", - "rrweb-player": "^0.6.5", + "puppeteer": "^19.7.2", + "rrweb-player": "^1.0.0-alpha.4", "typescript": "^4.0.5" } } diff --git a/rrvideo.config.example.json b/rrvideo.config.example.json index 724aa07..a79da91 100644 --- a/rrvideo.config.example.json +++ b/rrvideo.config.example.json @@ -6,5 +6,6 @@ "mouseTail": { "strokeStyle": "green", "lineWidth": 2 - } -} \ No newline at end of file + }, + "startDelayTime": 2000 +} diff --git a/src/index.ts b/src/index.ts index 6465530..574a195 100644 --- a/src/index.ts +++ b/src/index.ts @@ -4,6 +4,7 @@ import { spawn } from "child_process"; import puppeteer from "puppeteer"; import type { eventWithTime } from "rrweb/typings/types"; import type { RRwebPlayerOptions } from "rrweb-player"; +import type { Page, Browser } from "puppeteer"; const rrwebScriptPath = path.resolve( require.resolve("rrweb-player"), @@ -12,10 +13,14 @@ const rrwebScriptPath = path.resolve( const rrwebStylePath = path.resolve(rrwebScriptPath, "../style.css"); const rrwebRaw = fs.readFileSync(rrwebScriptPath, "utf-8"); const rrwebStyle = fs.readFileSync(rrwebStylePath, "utf-8"); +interface Config { + // start playback delay time + startDelayTime?: number, +} function getHtml( events: Array, - config?: Omit + config?: Omit ): string { return ` @@ -37,12 +42,28 @@ function getHtml( props: { events, showController: false, + autoPlay: false, // autoPlay off by default ...userConfig }, - }); - window.onReplayStart(); - window.replayer.play(); + }); + window.replayer.addEventListener('finish', () => window.onReplayFinish()); + let time = userConfig.startDelayTime || 1000 // start playback delay time, default 1000ms + let start = fn => { + setTimeout(() => { + fn() + }, time) + } + // It is recommended not to play auto by default. If the speed is not 1, the page block in the early stage of autoPlay will be blank + if (userConfig.autoPlay) { + start = fn => { + fn() + }; + } + start(() => { + window.onReplayStart(); + window.replayer.play(); + }) @@ -55,7 +76,7 @@ type RRvideoConfig = { input: string; cb: (file: string, error: null | Error) => void; output: string; - rrwebPlayer: Omit; + rrwebPlayer: Omit; }; const defaultConfig: RRvideoConfig = { @@ -68,8 +89,8 @@ const defaultConfig: RRvideoConfig = { }; class RRvideo { - private browser!: puppeteer.Browser; - private page!: puppeteer.Page; + private browser!: Browser; + private page!: Page; private state: "idle" | "recording" | "closed" = "idle"; private config: RRvideoConfig;