背景: 录制的不是真正的视频流,而是一个记录页面 DOM 变化的 JSON 数组,因此不能录制整个显示器的屏幕,只能录制浏览器的一个页签。
record 负责在一开始录制DOM全量信息,通过MutationObserver监听页面变化,将每次的变化emit出来传给开发,replay负责将record录制的json数据重组回放当时页面内容。
- rrweb 的播放器是在一个iframe上回放录屏的。
- rrweb主要由rrweb , rrweb-player , rrweb-snapshot三个库组成
- rrweb与webRTC对比优势
- rrweb完全还原DOM结构,没有清晰度问题
- 录制内容是json数据,页面无变动不会增加大小
- 用户可以无感录制
- 有一套完整的独立设计的播放器
import rrwebPlayer from 'rrweb-player';
import 'rrweb-player/dist/style.css';
import * as rrweb from 'rrweb';
function App () {
const [num, updateNum] = useState(0)
const rrwebRef = useRef([])
const replay = useRef(num)
// 开始录制
const recordFn = () => {
rrweb.record({
emit (event) {
rrwebRef.current.push(event); // 将 event 存入 events 数组中
}
});
}
// 暂停录制
const stopFn = () => {
recordFn();
console.log('play',rrwebRef.current)
}
// 播放
const play = () => {
replay.current = new rrwebPlayer({
target: document.getElementById('replay-container'),
// 配置项
props: {
events:rrwebRef.current,
},
});
}
// 销毁
const destory = () => {
replay.current?.pause();
replay.current?.$destroy();
replay.current = null;
rrwebRef.current = [];
const replayContainer = document.getElementById('replay-container');
while (replayContainer.firstChild) {
replayContainer.removeChild(replayContainer.firstChild);
}
console.log('is not a function',replay.current)
}
return (
<div className="App">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
<div>{ num}</div>
<button onClick={() => { updateNum(num + 1) }}>add</button>
<button onClick={() => { recordFn()}}>start record</button>
<button onClick={() => { stopFn() }}>stop record</button>
<button onClick={play}>play</button>
<button onClick={destory}>destory</button>
<div id="replay-container"></div>
</div>
);
}