rrweb手機端錄屏，pc端使用

rrweb使用指南：https://github.com/rrweb-io/rrweb/blob/master/guide.zh_CN.md

本文是使用js文件引入的方式，vue項目，微信公眾號。

錄屏端的使用：

項目入口文件（index.html）引入

<script src="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/index.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.css">

 

需要錄屏的界面添加錄屏代碼

　let events=[]   //全局定義，我在使用過程中未全局定義，導致數據大量重復，找不到清除上一次的時機，剛開始還誤認為是插件的疊加。　

rrweb.record({
  emit(event) {
    events.push({event,//event是rrweb生產的錄屏信息，下面其它參數是項目實際需要，在別的使用場景中可忽略。
      fkValue:uuids,
      moduleCode: 'person_insurance',
      appCode:'001',
      userId:localStorage.getItem("openid")});
  },
});

setInterval(this.rrwebSave, 10*1000);

rrwebSave() {
  this.axios.post("/webreplayapi/replay/collect",JSON.stringify(events)).then((res) => {

  }).catch((err) => {

  });
  events=[]
}

在需要播放的地方添加播放代碼

<script src="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/index.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/style.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.css" />

                let dom = document.getElementById("rrwebDom");
                dom.innerHTML = "";
                new rrwebPlayer({
                  target: dom, // 可以自定義 DOM 元素
                  data: {
                    events,//錄屏數據
                    options: {
                      // skipInactive: false,
                      // loadTimeout:2000
                    },
                  },
                });

踩的小坑坑：
 1.不同的rrweb版本對錄屏效果有所影響，需確保錄屏和播放使用的版本一致。
 2.因為rrweb的本質是記錄dom元素及復制dom中對應的css，所以如果是在移動端錄制，在pc端播放，
   需要注意界面樣式像素的處理。（本人在使用時，移動端用的是rem，pc端播放時無法正確解析rem，
   導致樣式全部亂掉，因pc端框架限制，移動端最終講所有單位改為px，如果榮幸有大牛看到這篇文章，希望給出更好的解決方案。）
 3.如果在界面中使用了圖片，需要將普通放在一個公共的都可以讀取的服務器上，如果使用了絕對
   或相對路徑的話，在另一個項目中做錄屏播放時，圖片將無法加載。因為rrweb它只是單純的復制dom。