无感录屏技术

最新推荐文章于 2024-05-18 17:11:58 发布

web修理工

最新推荐文章于 2024-05-18 17:11:58 发布

阅读量448

点赞数

分类专栏： JavaScript 文章标签： javascript 音视频

本文链接：https://blog.csdn.net/qq_42374676/article/details/121598860

版权

JavaScript 专栏收录该内容

163 篇文章 2 订阅

订阅专栏

这篇博客详细介绍了如何使用rrweb库在网页中实现用户行为的录制和回放。通过引入rrweb的相关脚本，作者展示了如何在JavaScript中启动和停止录制，并创建一个播放器来重现记录的事件。示例代码包括了如何存储和播放录制的事件，为前端开发者提供了一种观察和分析用户交互的方法。

摘要由CSDN通过智能技术生成


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" />
    <button onclick="start()">start</button>
    <button onclick="stop()">stop</button>
    <button onclick="Player()">Player</button>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.css"
    />
    <script src="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/record/rrweb-record.min.js"></script>

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

    <script>
      let events = [],
        operation;
      function start() {
        // rrweb行为录制
        operation = rrweb.record({
          emit(event) {
            // 用任意方式存储 event
            console.log(event);
            events.push(event);
          },
        });
      }

      function stop() {
        operation && operation();
      }

      function Player() {
        new rrwebPlayer({
          target: document.body, // 可以自定义 DOM 元素
          data: {
            events,
          },
        });
      }

      //通过 <script> 的方式,全量引入、npm 引入的
        function start() {
          let self = this;
          this.operation = rrweb.record({
            emit(event) {
              self.events.push(event);
            },
          });
        }
      通过 <script> 的方式,仅仅引入录制部分代码
        function start() {
          let self = this;
          this.operation = rrwebRecord({
            emit(event) {
                console.log(event,'========')
              self.events.push(event);
            },
            recordCanvas: true, //支持录制canvas
            //其他参数
          });
        }

        function stop() {
          this.operation && this.operation();
        }
    </script>
  </body>
</html>