@kalayanasundaram123/rrweb 2.0.3 → 2.0.4

package/package.json

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

package/umd/rrweb.js

@@ -13972,6 +13972,26 @@ function fnv1aHash(buffer) {
 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());
@@ -13989,6 +14009,7 @@ class CanvasManager {
     __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) => {
       const newFrame = this.rafStamps.invokeId && this.rafStamps.latestId !== this.rafStamps.invokeId;
@@ -14010,10 +14031,12 @@ class CanvasManager {
       this.startPendingCanvasMutationFlusher();
     }
     if (recordCanvas && typeof sampling === "number" && canSnapshotCanvas()) {
+      this.worker = this.initFPSWorker();
       this.initCanvasFPSObserver();
     }
   }
   reset() {
+    var _a2;
     this.pendingCanvasMutations.clear();
     this.restoreHandlers.forEach((handler) => {
       try {
@@ -14029,6 +14052,8 @@ class CanvasManager {
     this.lastFingerprintMap = /* @__PURE__ */ new Map();
     this.snapshotCanvas = null;
     this.snapshotCtx = null;
+    (_a2 = this.worker) == null ? void 0 : _a2.terminate();
+    this.worker = null;
   }
   freeze() {
     this.frozen = true;
@@ -14042,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
@@ -14248,9 +14296,22 @@ class CanvasManager {
       }
       const width = canvas.width;
       const height = canvas.height;
-      createImageBitmap(canvas).then(
-        (bitmap) => this.snapshotImageBitmap(id, bitmap, width, height, dataURLOptions)
-      ).catch(() => {
+      createImageBitmap(canvas).then((bitmap) => {
+        if (this.worker) {
+          this.worker.postMessage(
+            { id, bitmap, width, height, dataURLOptions },
+            [bitmap]
+          );
+        } else {
+          void this.snapshotImageBitmap(
+            id,
+            bitmap,
+            width,
+            height,
+            dataURLOptions
+          );
+        }
+      }).catch(() => {
         this.snapshotInProgressMap.set(id, false);
       });
     });