v12.1.1

Author: boehlerlukas

build/index.js

@@ -208,6 +208,21 @@ <h2 class="sub-headline">
   <div class="header-container-image">
     <img class="head-image" src="./pexels-niklas-jeromin-12734294.jpg" />
   </div>
+  <canvas id="myCanvas" width="200" height="200" style="border:1px solid #000000;"></canvas>
+
+  <script>
+    var canvas = document.getElementById('myCanvas');
+    var ctx = canvas.getContext('2d');
+    var centerX = canvas.width / 2;
+    var centerY = canvas.height / 2;
+    var radius = 70;
+
+    ctx.beginPath();
+    ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
+    ctx.fillStyle = 'blue';
+    ctx.fill();
+    ctx.stroke();
+  </script>
   <div class="content" id="haha">
     <div class="skeleton-text"></div>
     <div class="skeleton-text"></div>
@@ -217,6 +232,7 @@ <h2 class="sub-headline">
     <div class="skeleton-text"></div>
     <div class="skeleton-text"></div>
   </div>
+
 </body>
 
 </html>

demo/index.html

@@ -6,7 +6,18 @@ const Gleap = window.Gleap;
 
 // Gleap.setLanguage("en");
 
-Gleap.initialize("X5C0grjFCjUMbZKi131MjZLaGRwg2iKH");
+Gleap.setReplayOptions({
+  recordCanvas: true,
+  sampling: {
+    canvas: 15,
+  },
+  dataURLOptions: {
+    type: 'image/webp',
+    quality: 0.6,
+  },
+});
+
+Gleap.initialize("U7alA97Vzu15arf4XFpPyxNOdNAv4u0H");
 
 /*Gleap.setUrlHandler((url, newTab) => {
   alert("URL: " + url + " newTab: " + newTab);

demo/main.js

@@ -131,5 +131,42 @@ export namespace Gleap {
   function on(event: string, callback: (data?: any) => void): void;
   function getIdentity(): any;
   function isUserIdentified(): boolean;
+  function setReplayOptions(options: {
+    blockClass?: string | RegExp;
+    blockSelector?: string;
+    ignoreClass?: string | RegExp;
+    ignoreSelector?: string;
+    ignoreCSSAttributes?: string[];
+    maskTextClass?: string | RegExp;
+    maskTextSelector?: string;
+    maskAllInputs?: boolean;
+    maskInputOptions?: {
+      password?: boolean;
+      [key: string]: any;
+    };
+    maskInputFn?: (text: string) => string;
+    maskTextFn?: (text: string) => string;
+    slimDOMOptions?: {
+      [key: string]: any;
+    };
+    dataURLOptions?: {
+      [key: string]: any;
+    };
+    hooks?: {
+      [key: string]: any;
+    };
+    packFn?: (events: any) => any;
+    sampling?: any;
+    recordCanvas?: boolean;
+    recordCrossOriginIframes?: boolean;
+    recordAfter?: 'DOMContentLoaded' | 'load';
+    inlineImages?: boolean;
+    collectFonts?: boolean;
+    userTriggeredOnInput?: boolean;
+    plugins?: {
+      [key: string]: any;
+    }[];
+    errorHandler?: (error: Error) => void;
+  }): void;
 }
 export default Gleap;

index.d.ts

@@ -306,6 +306,14 @@ class Gleap {
     GleapNetworkIntercepter.getInstance().setMaxRequests(maxRequests);
   }
 
+  /**
+   * Set custom replay options.
+   * @param {*} options 
+   */
+  static setReplayOptions(options) {
+    GleapReplayRecorder.getInstance().setOptions(options);
+  }
+
   /**
    * Closes any open Gleap dialogs.
    */

published/12.1.1/index.js

@@ -6,6 +6,7 @@ export default class GleapReplayRecorder {
   events = [];
   bufferSize = 0;
   stopFunction = undefined;
+  customOptions = {};
 
   // GleapReplayRecorder singleton
   static instance;
@@ -20,6 +21,10 @@ export default class GleapReplayRecorder {
 
   constructor() { }
 
+  setOptions(options) {
+    this.customOptions = options;
+  }
+
   /**
    * Start replays
    * @returns 
@@ -30,38 +35,45 @@ export default class GleapReplayRecorder {
     this.startDate = Date.now();
     var events = this.events;
 
+    var options = {
+      inlineStylesheet: true,
+      blockClass: "gl-block",
+      ignoreClass: "gl-ignore",
+      maskTextClass: "gl-mask",
+      dataURLOptions: {
+        quality: 0.7,
+      },
+      recordCanvas: false,
+      sampling: {
+        scroll: 150,
+        mouseInteraction: {
+          MouseUp: false,
+          MouseDown: false,
+          Click: true,
+          ContextMenu: true,
+          DblClick: true,
+          Focus: true,
+          Blur: true,
+          TouchStart: true,
+          TouchEnd: false,
+        },
+      },
+      collectFonts: false,
+      recordCrossOriginIframes: false,
+    };
+
     try {
       this.stopFunction = rrwebRecord({
+        ...options,
+        ...this.customOptions,
         emit(rrwebEvent) {
           const { event } = ensureMaxMessageSize(rrwebEvent);
           events.push(event);
         },
-        recordCanvas: false,
-        dataURLOptions: {
-          quality: 0.7,
-        },
-        sampling: {
-          scroll: 150,
-          mouseInteraction: {
-            MouseUp: false,
-            MouseDown: false,
-            Click: true,
-            ContextMenu: true,
-            DblClick: true,
-            Focus: true,
-            Blur: true,
-            TouchStart: true,
-            TouchEnd: false,
-          },
-        },
-        collectFonts: false,
-        inlineStylesheet: true,
-        recordCrossOriginIframes: false,
-        blockClass: "gl-block",
-        ignoreClass: "gl-ignore",
-        maskTextClass: "gl-mask",
       });
-    } catch (e) { }
+    } catch (e) {
+      console.error(e);
+    }
   }
 
   /**