Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Mar 17, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
608e216
解决rrvideo 用无头浏览器渲染页面时展示与真实录制的页面渲染不一致
xujiujiu Feb 28, 2023
6543d7d
更新无头浏览器问题及倍速时前部分空白问题
xujiujiu Feb 28, 2023
b3057a6
自动播放配置适配
xujiujiu Feb 28, 2023
6596e75
无头浏览器类型引入修改
xujiujiu Feb 28, 2023
bd7ac19
默认2s后开始播放并录制
xujiujiu Feb 28, 2023
40f63fe
默认关闭自动播放
xujiujiu Feb 28, 2023
e1fef4d
默认不自动播放，配置自动播放时延时无效
xujiujiu Feb 28, 2023
4ff20b8
ts 类型校验
xujiujiu Mar 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 3 additions & 4 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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": {
Expand All @@ -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"
}
}
5 changes: 3 additions & 2 deletions rrvideo.config.example.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,5 +6,6 @@
"mouseTail": {
"strokeStyle": "green",
"lineWidth": 2
}
}
},
"startDelayTime": 2000
}
35 changes: 28 additions & 7 deletions src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"),
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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 = {
Expand All @@ -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;

Expand Down