解决rrvideo 用无头浏览器渲染页面时展示与真实录制的页面渲染不一致

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"
   }
 }

rrvideo.config.example.json

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

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"),
@@ -37,12 +38,29 @@ function getHtml(
         props: {
           events,
           showController: false,
+          autoPlay: false, // 默认关闭自动播放
           ...userConfig
         },
-      });
-      window.onReplayStart();
-      window.replayer.play();
+      }); 
+
       window.replayer.addEventListener('finish', () => window.onReplayFinish());
+      let time = userConfig.startDelayTime || 1000 // 开始播放延迟时间
+      let start = fn => {
+        let timer = setTimeout(() => {
+          clearTimeout(timer);
+          fn()
+        }, time)
+      }
+      // 建议默认不自动播放，如果倍速的话自动播放前期页面块会空白
+      if (userConfig.autoPlay) {
+        start = fn => {
+          fn()
+        };
+      }
+      start(() => {
+        window.onReplayStart();
+        window.replayer.play();
+      })
     </script>
   </body>
 </html>
@@ -68,8 +86,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;