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。