From 608e2168ad78ae3b4249c97db533aeb46efc3606 Mon Sep 17 00:00:00 2001 From: xujiujiu <906784584@qq.com> Date: Tue, 28 Feb 2023 16:27:01 +0800 Subject: [PATCH 1/8] =?UTF-8?q?=E8=A7=A3=E5=86=B3rrvideo=20=E7=94=A8?= =?UTF-8?q?=E6=97=A0=E5=A4=B4=E6=B5=8F=E8=A7=88=E5=99=A8=E6=B8=B2=E6=9F=93?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=97=B6=E5=B1=95=E7=A4=BA=E4=B8=8E=E7=9C=9F?= =?UTF-8?q?=E5=AE=9E=E5=BD=95=E5=88=B6=E7=9A=84=E9=A1=B5=E9=9D=A2=E6=B8=B2?= =?UTF-8?q?=E6=9F=93=E4=B8=8D=E4=B8=80=E8=87=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 验证了下，更新了rrweb-player 为最新的版本就好了，目前rrvideo内使用的rrweb-player还是旧仓库的npm，没有随着rrweb/rrweb-player里版本进行更新导致 --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 9bf5fb3..f3c9b73 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": { @@ -21,7 +21,7 @@ "@types/puppeteer": "^5.4.0", "minimist": "^1.2.5", "puppeteer": "^5.4.1", - "rrweb-player": "^0.6.5", + "rrweb-player": "^1.0.0-alpha.4", "typescript": "^4.0.5" } } From 6543d7d5829d92fcdb222d1b7ac8c3714541ba51 Mon Sep 17 00:00:00 2001 From: xujiujiu <906784584@qq.com> Date: Tue, 28 Feb 2023 17:31:58 +0800 Subject: [PATCH 2/8] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E6=97=A0=E5=A4=B4?= =?UTF-8?q?=E6=B5=8F=E8=A7=88=E5=99=A8=E9=97=AE=E9=A2=98=E5=8F=8A=E5=80=8D?= =?UTF-8?q?=E9=80=9F=E6=97=B6=E5=89=8D=E9=83=A8=E5=88=86=E7=A9=BA=E7=99=BD?= =?UTF-8?q?=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 3 +-- src/index.ts | 15 ++++++++++++--- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index f3c9b73..db615d9 100644 --- a/package.json +++ b/package.json @@ -18,9 +18,8 @@ "license": "MIT", "dependencies": { "@types/minimist": "^1.2.1", - "@types/puppeteer": "^5.4.0", "minimist": "^1.2.5", - "puppeteer": "^5.4.1", + "puppeteer": "^19.7.2", "rrweb-player": "^1.0.0-alpha.4", "typescript": "^4.0.5" } diff --git a/src/index.ts b/src/index.ts index 6465530..9e2f5a5 100644 --- a/src/index.ts +++ b/src/index.ts @@ -2,6 +2,7 @@ import * as fs from "fs"; import * as path from "path"; import { spawn } from "child_process"; import puppeteer from "puppeteer"; +import type puppeteer from "puppeteer"; import type { eventWithTime } from "rrweb/typings/types"; import type { RRwebPlayerOptions } from "rrweb-player"; @@ -39,10 +40,18 @@ function getHtml( showController: false, ...userConfig }, - }); - window.onReplayStart(); - window.replayer.play(); + }); + window.replayer.addEventListener('finish', () => window.onReplayFinish()); + let time = userConfig.time + if (userConfig.autoPlay) { + time = 0 + } + const timer = setTimeout(() => { + clearTimeout(timer); + window.onReplayStart(); + window.replayer.play(); + }, time) From b3057a695cf012eb121fb30fccc5cd0cda1627e0 Mon Sep 17 00:00:00 2001 From: xujiujiu <906784584@qq.com> Date: Tue, 28 Feb 2023 17:35:39 +0800 Subject: [PATCH 3/8] =?UTF-8?q?=E8=87=AA=E5=8A=A8=E6=92=AD=E6=94=BE?= =?UTF-8?q?=E9=85=8D=E7=BD=AE=E9=80=82=E9=85=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/index.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/index.ts b/src/index.ts index 9e2f5a5..aae8f9a 100644 --- a/src/index.ts +++ b/src/index.ts @@ -44,7 +44,8 @@ function getHtml( window.replayer.addEventListener('finish', () => window.onReplayFinish()); let time = userConfig.time - if (userConfig.autoPlay) { + // 建议默认不自动播放，如果倍速的话自动播放前期页面块会空白 + if (!userConfig.hasOwnProperty('autoPlay') || userConfig.autoPlay) { time = 0 } const timer = setTimeout(() => { From 6596e75f3614d3e1734908c7425ad8809c38972f Mon Sep 17 00:00:00 2001 From: xujiujiu <906784584@qq.com> Date: Tue, 28 Feb 2023 17:42:22 +0800 Subject: [PATCH 4/8] =?UTF-8?q?=E6=97=A0=E5=A4=B4=E6=B5=8F=E8=A7=88?= =?UTF-8?q?=E5=99=A8=E7=B1=BB=E5=9E=8B=E5=BC=95=E5=85=A5=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/index.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/index.ts b/src/index.ts index aae8f9a..b887a70 100644 --- a/src/index.ts +++ b/src/index.ts @@ -2,9 +2,9 @@ import * as fs from "fs"; import * as path from "path"; import { spawn } from "child_process"; import puppeteer from "puppeteer"; -import type 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"), @@ -78,8 +78,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; From bd7ac19ca1e63621c3ba9572e90fd8a3c71ea666 Mon Sep 17 00:00:00 2001 From: xujiujiu <906784584@qq.com> Date: Tue, 28 Feb 2023 17:45:29 +0800 Subject: [PATCH 5/8] =?UTF-8?q?=E9=BB=98=E8=AE=A42s=E5=90=8E=E5=BC=80?= =?UTF-8?q?=E5=A7=8B=E6=92=AD=E6=94=BE=E5=B9=B6=E5=BD=95=E5=88=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- rrvideo.config.example.json | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/rrvideo.config.example.json b/rrvideo.config.example.json index 724aa07..2f0fb99 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 + }, + "time": 2000 +} From 40f63fe4c61c700ecfc3f8b12604a96d4fd1bded Mon Sep 17 00:00:00 2001 From: xujiujiu <906784584@qq.com> Date: Tue, 28 Feb 2023 17:46:49 +0800 Subject: [PATCH 6/8] =?UTF-8?q?=E9=BB=98=E8=AE=A4=E5=85=B3=E9=97=AD?= =?UTF-8?q?=E8=87=AA=E5=8A=A8=E6=92=AD=E6=94=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- rrvideo.config.example.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/rrvideo.config.example.json b/rrvideo.config.example.json index 2f0fb99..f79c18a 100644 --- a/rrvideo.config.example.json +++ b/rrvideo.config.example.json @@ -7,5 +7,6 @@ "strokeStyle": "green", "lineWidth": 2 }, - "time": 2000 + "time": 2000, + "autoPlay": false } From e1fef4d19773a64c2271670b4dc0d94c5c196a3c Mon Sep 17 00:00:00 2001 From: xujiujiu <906784584@qq.com> Date: Tue, 28 Feb 2023 18:14:37 +0800 Subject: [PATCH 7/8] =?UTF-8?q?=E9=BB=98=E8=AE=A4=E4=B8=8D=E8=87=AA?= =?UTF-8?q?=E5=8A=A8=E6=92=AD=E6=94=BE=EF=BC=8C=E9=85=8D=E7=BD=AE=E8=87=AA?= =?UTF-8?q?=E5=8A=A8=E6=92=AD=E6=94=BE=E6=97=B6=E5=BB=B6=E6=97=B6=E6=97=A0?= =?UTF-8?q?=E6=95=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- rrvideo.config.example.json | 3 +-- src/index.ts | 20 ++++++++++++++------ 2 files changed, 15 insertions(+), 8 deletions(-) diff --git a/rrvideo.config.example.json b/rrvideo.config.example.json index f79c18a..a79da91 100644 --- a/rrvideo.config.example.json +++ b/rrvideo.config.example.json @@ -7,6 +7,5 @@ "strokeStyle": "green", "lineWidth": 2 }, - "time": 2000, - "autoPlay": false + "startDelayTime": 2000 } diff --git a/src/index.ts b/src/index.ts index b887a70..7c13503 100644 --- a/src/index.ts +++ b/src/index.ts @@ -38,21 +38,29 @@ function getHtml( props: { events, showController: false, + autoPlay: false, // 默认关闭自动播放 ...userConfig }, }); window.replayer.addEventListener('finish', () => window.onReplayFinish()); - let time = userConfig.time + let time = userConfig.startDelayTime || 1000 // 开始播放延迟时间 + let start = fn => { + let timer = setTimeout(() => { + clearTimeout(timer); + fn() + }, time) + } // 建议默认不自动播放，如果倍速的话自动播放前期页面块会空白 - if (!userConfig.hasOwnProperty('autoPlay') || userConfig.autoPlay) { - time = 0 + if (userConfig.autoPlay) { + start = fn => { + fn() + }; } - const timer = setTimeout(() => { - clearTimeout(timer); + start(() => { window.onReplayStart(); window.replayer.play(); - }, time) + }) From 4ff20b8eb857f0b5cc017bbae91d7beef2c4e301 Mon Sep 17 00:00:00 2001 From: xujiujiu <906784584@qq.com> Date: Wed, 1 Mar 2023 09:37:08 +0800 Subject: [PATCH 8/8] =?UTF-8?q?ts=20=E7=B1=BB=E5=9E=8B=E6=A0=A1=E9=AA=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/index.ts | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/src/index.ts b/src/index.ts index 7c13503..574a195 100644 --- a/src/index.ts +++ b/src/index.ts @@ -13,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 ` @@ -38,20 +42,19 @@ function getHtml( props: { events, showController: false, - autoPlay: false, // 默认关闭自动播放 + autoPlay: false, // autoPlay off by default ...userConfig }, }); window.replayer.addEventListener('finish', () => window.onReplayFinish()); - let time = userConfig.startDelayTime || 1000 // 开始播放延迟时间 + let time = userConfig.startDelayTime || 1000 // start playback delay time, default 1000ms let start = fn => { - let timer = setTimeout(() => { - clearTimeout(timer); + 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() @@ -73,7 +76,7 @@ type RRvideoConfig = { input: string; cb: (file: string, error: null | Error) => void; output: string; - rrwebPlayer: Omit; + rrwebPlayer: Omit; }; const defaultConfig: RRvideoConfig = {