@kalayanasundaram123/rrweb 2.0.2 → 2.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kalayanasundaram123/rrweb",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "description": "record and replay the web",
   "scripts": {
     "prepare": "npm run prepack",

package/umd/rrweb.js

@@ -5009,10 +5009,10 @@ function requireNoWorkResult$1() {
       let str = stringify;
       this.result = new Result(this._processor, root2, this._opts);
       this.result.css = css;
-      let self2 = this;
+      let self = this;
       Object.defineProperty(this.result, "root", {
         get() {
-          return self2.root;
+          return self.root;
         }
       });
       let map = new MapGenerator(str, root2, this._opts, css);
@@ -9289,10 +9289,10 @@ function requireNoWorkResult() {
       let str = stringify;
       this.result = new Result(this._processor, root2, this._opts);
       this.result.css = css;
-      let self2 = this;
+      let self = this;
       Object.defineProperty(this.result, "root", {
         get() {
-          return self2.root;
+          return self.root;
         }
       });
       let map = new MapGenerator(str, root2, this._opts, css);
@@ -13960,38 +13960,38 @@ function initCanvasWebGLMutationObserver(cb, win, blockClass, blockSelector) {
     handlers.forEach((h) => h());
   };
 }
-const jsContent = '(function() {\n  "use strict";\n  var chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";\n  var lookup = typeof Uint8Array === "undefined" ? [] : new Uint8Array(256);\n  for (var i = 0; i < chars.length; i++) {\n    lookup[chars.charCodeAt(i)] = i;\n  }\n  var encode = function(arraybuffer) {\n    var bytes = new Uint8Array(arraybuffer), i2, len = bytes.length, base64 = "";\n    for (i2 = 0; i2 < len; i2 += 3) {\n      base64 += chars[bytes[i2] >> 2];\n      base64 += chars[(bytes[i2] & 3) << 4 | bytes[i2 + 1] >> 4];\n      base64 += chars[(bytes[i2 + 1] & 15) << 2 | bytes[i2 + 2] >> 6];\n      base64 += chars[bytes[i2 + 2] & 63];\n    }\n    if (len % 3 === 2) {\n      base64 = base64.substring(0, base64.length - 1) + "=";\n    } else if (len % 3 === 1) {\n      base64 = base64.substring(0, base64.length - 2) + "==";\n    }\n    return base64;\n  };\n  const lastFingerprintMap = /* @__PURE__ */ new Map();\n  const transparentBlobMap = /* @__PURE__ */ new Map();\n  function fnv1aHash(buffer) {\n    const view = new Uint8Array(buffer);\n    let hash = 2166136261;\n    for (let i2 = 0; i2 < view.length; i2++) {\n      hash ^= view[i2];\n      hash = hash * 16777619 | 0;\n    }\n    return (hash >>> 0).toString(16);\n  }\n  async function getTransparentBlobFor(width, height, dataURLOptions) {\n    const id = `${width}-${height}`;\n    if ("OffscreenCanvas" in globalThis) {\n      if (transparentBlobMap.has(id)) return transparentBlobMap.get(id);\n      const offscreen = new OffscreenCanvas(width, height);\n      offscreen.getContext("2d");\n      const blob = await offscreen.convertToBlob(dataURLOptions);\n      const arrayBuffer = await blob.arrayBuffer();\n      const base64 = encode(arrayBuffer);\n      transparentBlobMap.set(id, base64);\n      return base64;\n    } else {\n      return "";\n    }\n  }\n  const worker = self;\n  let reusableCanvas = null;\n  let reusableCtx = null;\n  worker.onmessage = async function(e) {\n    if ("OffscreenCanvas" in globalThis) {\n      const { id, bitmap, width, height, dataURLOptions } = e.data;\n      try {\n        const transparentBase64 = getTransparentBlobFor(\n          width,\n          height,\n          dataURLOptions\n        );\n        if (!reusableCanvas || reusableCanvas.width !== width || reusableCanvas.height !== height) {\n          reusableCanvas = new OffscreenCanvas(width, height);\n          reusableCtx = reusableCanvas.getContext("2d");\n        }\n        reusableCtx.clearRect(0, 0, width, height);\n        reusableCtx.drawImage(bitmap, 0, 0);\n        bitmap.close();\n        const blob = await reusableCanvas.convertToBlob(dataURLOptions);\n        const type = blob.type;\n        const arrayBuffer = await blob.arrayBuffer();\n        const fingerprint = fnv1aHash(arrayBuffer);\n        if (!lastFingerprintMap.has(id)) {\n          const base642 = encode(arrayBuffer);\n          if (await transparentBase64 === base642) {\n            lastFingerprintMap.set(id, fingerprint);\n            return worker.postMessage({ id });\n          }\n          lastFingerprintMap.set(id, fingerprint);\n          worker.postMessage({ id, type, base64: base642, width, height });\n          return;\n        }\n        if (lastFingerprintMap.get(id) === fingerprint) {\n          return worker.postMessage({ id });\n        }\n        const base64 = encode(arrayBuffer);\n        worker.postMessage({ id, type, base64, width, height });\n        lastFingerprintMap.set(id, fingerprint);\n      } catch {\n        worker.postMessage({ id });\n      }\n    } else {\n      e.data.bitmap.close();\n      return worker.postMessage({ id: e.data.id });\n    }\n  };\n})();\n//# sourceMappingURL=image-bitmap-data-url-worker-DIbJg1p8.js.map\n';
-const blob = typeof self !== "undefined" && self.Blob && new Blob([jsContent], { type: "text/javascript;charset=utf-8" });
-function WorkerWrapper(options) {
-  let objURL;
-  try {
-    objURL = blob && (self.URL || self.webkitURL).createObjectURL(blob);
-    if (!objURL) throw "";
-    const worker = new Worker(objURL, {
-      name: options == null ? void 0 : options.name
-    });
-    worker.addEventListener("error", () => {
-      (self.URL || self.webkitURL).revokeObjectURL(objURL);
-    });
-    return worker;
-  } catch (e2) {
-    return new Worker(
-      "data:text/javascript;charset=utf-8," + encodeURIComponent(jsContent),
-      {
-        name: options == null ? void 0 : options.name
-      }
-    );
-  } finally {
-    objURL && (self.URL || self.webkitURL).revokeObjectURL(objURL);
-  }
-}
-function canCreateBlobWorker(win) {
-  try {
-    return typeof Worker !== "undefined" && win.origin != null && win.origin !== "null";
-  } catch (e2) {
-    return false;
-  }
-}
+function fnv1aHash(buffer) {
+  const view = new Uint8Array(buffer);
+  let hash = 2166136261;
+  for (let i2 = 0; i2 < view.length; i2++) {
+    hash ^= view[i2];
+    hash = hash * 16777619 | 0;
+  }
+  return (hash >>> 0).toString(16);
+}
+function canSnapshotCanvas() {
+  return typeof OffscreenCanvas !== "undefined";
+}
+const FPS_WORKER_SOURCE = `
+var _C='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
+function _enc(ab){var b=new Uint8Array(ab),i,n=b.length,o='';for(i=0;i<n;i+=3){o+=_C[b[i]>>2];o+=_C[(b[i]&3)<<4|b[i+1]>>4];o+=_C[(b[i+1]&15)<<2|b[i+2]>>6];o+=_C[b[i+2]&63];}if(n%3===2){o=o.substring(0,o.length-1)+'=';}else if(n%3===1){o=o.substring(0,o.length-2)+'==';}return o;}
+function _fp(ab){var v=new Uint8Array(ab),h=0x811c9dc5;for(var i=0;i<v.length;i++){h^=v[i];h=(h*0x01000193)|0;}return (h>>>0).toString(16);}
+var _last=new Map(),_cv=null,_ctx=null;
+self.onmessage=async function(e){
+  var d=e.data,id=d.id,bm=d.bitmap,w=d.width,h=d.height,opt=d.dataURLOptions;
+  try{
+    if(!('OffscreenCanvas' in self)){bm.close();return self.postMessage({id:id});}
+    if(!_cv||_cv.width!==w||_cv.height!==h){_cv=new OffscreenCanvas(w,h);_ctx=_cv.getContext('2d');}
+    _ctx.clearRect(0,0,w,h);_ctx.drawImage(bm,0,0);bm.close();
+    var blob=await _cv.convertToBlob(opt);
+    var buf=await blob.arrayBuffer();
+    var fp=_fp(buf);
+    if(_last.get(id)===fp)return self.postMessage({id:id});
+    _last.set(id,fp);
+    self.postMessage({id:id,type:blob.type,base64:_enc(buf),width:w,height:h});
+  }catch(err){try{bm.close();}catch(_){}self.postMessage({id:id});}
+};
+`;
 class CanvasManager {
   constructor(options) {
     __publicField(this, "pendingCanvasMutations", /* @__PURE__ */ new Map());
@@ -14006,6 +14006,9 @@ class CanvasManager {
     __publicField(this, "frozen", false);
     __publicField(this, "locked", false);
     __publicField(this, "snapshotInProgressMap", /* @__PURE__ */ new Map());
+    __publicField(this, "lastFingerprintMap", /* @__PURE__ */ new Map());
+    __publicField(this, "snapshotCanvas", null);
+    __publicField(this, "snapshotCtx", null);
     __publicField(this, "worker", null);
     __publicField(this, "lastSnapshotTime", 0);
     __publicField(this, "processMutation", (target, mutation) => {
@@ -14022,15 +14025,13 @@ class CanvasManager {
     this.mutationCb = options.mutationCb;
     this.mirror = options.mirror;
     this.options = options;
-    if (recordCanvas && typeof sampling === "number" && canCreateBlobWorker(win)) {
-      this.worker = this.initFPSWorker();
-    }
     this.addWindow(win);
     if (recordCanvas && sampling === "all") {
       this.startRAFTimestamping();
       this.startPendingCanvasMutationFlusher();
     }
-    if (recordCanvas && typeof sampling === "number" && this.worker) {
+    if (recordCanvas && typeof sampling === "number" && canSnapshotCanvas()) {
+      this.worker = this.initFPSWorker();
       this.initCanvasFPSObserver();
     }
   }
@@ -14047,9 +14048,12 @@ class CanvasManager {
     this.windowsSet = /* @__PURE__ */ new WeakSet();
     this.windows = [];
     this.shadowDoms = /* @__PURE__ */ new Set();
+    this.snapshotInProgressMap = /* @__PURE__ */ new Map();
+    this.lastFingerprintMap = /* @__PURE__ */ new Map();
+    this.snapshotCanvas = null;
+    this.snapshotCtx = null;
     (_a2 = this.worker) == null ? void 0 : _a2.terminate();
     this.worker = null;
-    this.snapshotInProgressMap = /* @__PURE__ */ new Map();
   }
   freeze() {
     this.frozen = true;
@@ -14063,6 +14067,29 @@ class CanvasManager {
   unlock() {
     this.locked = false;
   }
+  initFPSWorker() {
+    try {
+      const worker = new Worker(
+        "data:application/javascript;charset=utf-8," + encodeURIComponent(FPS_WORKER_SOURCE)
+      );
+      worker.onmessage = (e2) => {
+        const data = e2.data;
+        const { id } = data;
+        this.snapshotInProgressMap.set(id, false);
+        if (data.base64 === void 0) return;
+        this.emitCanvasSnapshot(
+          id,
+          data.base64,
+          data.type || "image/png",
+          data.width || 0,
+          data.height || 0
+        );
+      };
+      return worker;
+    } catch (e2) {
+      return null;
+    }
+  }
   /**
    * Begin observing canvas activity inside `win` — the top window, or the
    * `contentWindow` of a same-origin iframe. De-duplicated, so it is safe to
@@ -14102,45 +14129,74 @@ class CanvasManager {
   resetShadowRoots() {
     this.shadowDoms = /* @__PURE__ */ new Set();
   }
-  initFPSWorker() {
-    const worker = new WorkerWrapper();
-    worker.onmessage = (e2) => {
-      const data = e2.data;
-      const { id } = data;
-      this.snapshotInProgressMap.set(id, false);
-      if (!("base64" in data)) return;
-      const { base64, type, width, height } = data;
-      this.mutationCb({
+  /**
+   * Encode one canvas frame (an ImageBitmap of the canvas) to a data blob on
+   * the main thread, de-duplicating unchanged frames, and emit it as a canvas
+   * mutation. Replaces the old blob-URL Worker, which crashed the renderer when
+   * created inside sandboxed frames.
+   */
+  async snapshotImageBitmap(id, bitmap, width, height, dataURLOptions) {
+    try {
+      let offscreen = this.snapshotCanvas;
+      if (!offscreen || offscreen.width !== width || offscreen.height !== height) {
+        offscreen = new OffscreenCanvas(width, height);
+        this.snapshotCanvas = offscreen;
+        this.snapshotCtx = offscreen.getContext("2d");
+      }
+      const ctx = this.snapshotCtx;
+      if (!ctx) return;
+      ctx.clearRect(0, 0, width, height);
+      ctx.drawImage(bitmap, 0, 0);
+      const blob = await offscreen.convertToBlob(
+        dataURLOptions
+      );
+      const arrayBuffer = await blob.arrayBuffer();
+      const fingerprint = fnv1aHash(arrayBuffer);
+      if (this.lastFingerprintMap.get(id) === fingerprint) return;
+      this.lastFingerprintMap.set(id, fingerprint);
+      this.emitCanvasSnapshot(
         id,
-        type: CanvasContext["2D"],
-        commands: [
-          {
-            property: "clearRect",
-            // wipe canvas
-            args: [0, 0, width, height]
-          },
-          {
-            property: "drawImage",
-            // draws (semi-transparent) image
-            args: [
-              {
-                rr_type: "ImageBitmap",
-                args: [
-                  {
-                    rr_type: "Blob",
-                    data: [{ rr_type: "ArrayBuffer", base64 }],
-                    type
-                  }
-                ]
-              },
-              0,
-              0
-            ]
-          }
-        ]
-      });
-    };
-    return worker;
+        encode(arrayBuffer),
+        blob.type,
+        width,
+        height
+      );
+    } catch (e2) {
+    } finally {
+      bitmap.close();
+      this.snapshotInProgressMap.set(id, false);
+    }
+  }
+  emitCanvasSnapshot(id, base64, type, width, height) {
+    this.mutationCb({
+      id,
+      type: CanvasContext["2D"],
+      commands: [
+        {
+          property: "clearRect",
+          // wipe canvas
+          args: [0, 0, width, height]
+        },
+        {
+          property: "drawImage",
+          // draws (semi-transparent) image
+          args: [
+            {
+              rr_type: "ImageBitmap",
+              args: [
+                {
+                  rr_type: "Blob",
+                  data: [{ rr_type: "ArrayBuffer", base64 }],
+                  type
+                }
+              ]
+            },
+            0,
+            0
+          ]
+        }
+      ]
+    });
   }
   initCanvasFPSObserver() {
     let rafId;
@@ -14238,20 +14294,25 @@ class CanvasManager {
           context.clear(context.COLOR_BUFFER_BIT);
         }
       }
+      const width = canvas.width;
+      const height = canvas.height;
       createImageBitmap(canvas).then((bitmap) => {
-        var _a3;
-        (_a3 = this.worker) == null ? void 0 : _a3.postMessage(
-          {
+        if (this.worker) {
+          this.worker.postMessage(
+            { id, bitmap, width, height, dataURLOptions },
+            [bitmap]
+          );
+        } else {
+          void this.snapshotImageBitmap(
             id,
             bitmap,
-            width: canvas.width,
-            height: canvas.height,
+            width,
+            height,
             dataURLOptions
-          },
-          [bitmap]
-        );
+          );
+        }
       }).catch(() => {
-        this.snapshotInProgressMap.delete(id);
+        this.snapshotInProgressMap.set(id, false);
       });
     });
   }
@@ -15626,10 +15687,10 @@ function deserializeArg(imageMap, ctx, preload) {
         const blobContents = await Promise.all(
           arg.data.map(deserializeArg(imageMap, ctx, preload))
         );
-        const blob2 = new Blob(blobContents, {
+        const blob = new Blob(blobContents, {
           type: arg.type
         });
-        return blob2;
+        return blob;
       }
     } else if (Array.isArray(arg)) {
       const result2 = await Promise.all(