Fix: Solve the inconsistency between rrvideo and the real recorded pa…

…ge rendering when rendering the page with a headless browser (#26) Author: xujiujiu <906784584@qq.com> --------- Co-authored-by: xujiujiu <906784584@qq.com>
rrweb-io · Mar 19, 2023 · f638338 · f638338
1 parent 2475162
commit f638338
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 13 deletions.
diff --git 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
@@ -6,5 +6,6 @@
   "mouseTail": {
     "strokeStyle": "green",
     "lineWidth": 2
-  }
-}
+  },
+  "startDelayTime": 2000
+}
diff --git 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<eventWithTime>,
-  config?: Omit<RRwebPlayerOptions["props"], "events">
+  config?: Omit<RRwebPlayerOptions["props"] & Config, "events">
 ): string {
   return `
 <html>
@@ -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();
+      })
     </script>
   </body>
 </html>
@@ -55,7 +76,7 @@ type RRvideoConfig = {
   input: string;
   cb: (file: string, error: null | Error) => void;
   output: string;
-  rrwebPlayer: Omit<RRwebPlayerOptions["props"], "events">;
+  rrwebPlayer: Omit<RRwebPlayerOptions["props"] & Config, "events">;
 };
 
 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;