@posthog/rrweb-record 0.0.44 → 0.0.46

package/dist/rrweb-record.umd.min.cjs

@@ -77,8 +77,17 @@ or you can use record.mirror to access the mirror instance during recording.`;le
     }
     return base64;
   };
-  const lastBlobMap = /* @__PURE__ */ new Map();
+  const lastFingerprintMap = /* @__PURE__ */ new Map();
   const transparentBlobMap = /* @__PURE__ */ new Map();
+  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);
+  }
   async function getTransparentBlobFor(width, height, dataURLOptions) {
     const id = \`\${width}-\${height}\`;
     if ("OffscreenCanvas" in globalThis) {
@@ -95,6 +104,8 @@ or you can use record.mirror to access the mirror instance during recording.`;le
     }
   }
   const worker = self;
+  let reusableCanvas = null;
+  let reusableCtx = null;
   worker.onmessage = async function(e) {
     if ("OffscreenCanvas" in globalThis) {
       const { id, bitmap, width, height, dataURLOptions } = e.data;
@@ -103,34 +114,39 @@ or you can use record.mirror to access the mirror instance during recording.`;le
         height,
         dataURLOptions
       );
-      const offscreen = new OffscreenCanvas(width, height);
-      const ctx = offscreen.getContext("2d");
-      ctx.drawImage(bitmap, 0, 0);
+      if (!reusableCanvas || reusableCanvas.width !== width || reusableCanvas.height !== height) {
+        reusableCanvas = new OffscreenCanvas(width, height);
+        reusableCtx = reusableCanvas.getContext("2d");
+      }
+      reusableCtx.clearRect(0, 0, width, height);
+      reusableCtx.drawImage(bitmap, 0, 0);
       bitmap.close();
-      const blob = await offscreen.convertToBlob(dataURLOptions);
+      const blob = await reusableCanvas.convertToBlob(dataURLOptions);
       const type = blob.type;
       const arrayBuffer = await blob.arrayBuffer();
-      const base64 = encode(arrayBuffer);
-      if (!lastBlobMap.has(id) && await transparentBase64 === base64) {
-        lastBlobMap.set(id, base64);
-        return worker.postMessage({ id });
+      const fingerprint = fnv1aHash(arrayBuffer);
+      if (!lastFingerprintMap.has(id)) {
+        const base642 = encode(arrayBuffer);
+        if (await transparentBase64 === base642) {
+          lastFingerprintMap.set(id, fingerprint);
+          return worker.postMessage({ id });
+        }
+        lastFingerprintMap.set(id, fingerprint);
+        worker.postMessage({ id, type, base64: base642, width, height });
+        return;
       }
-      if (lastBlobMap.get(id) === base64) return worker.postMessage({ id });
-      worker.postMessage({
-        id,
-        type,
-        base64,
-        width,
-        height
-      });
-      lastBlobMap.set(id, base64);
+      if (lastFingerprintMap.get(id) === fingerprint)
+        return worker.postMessage({ id });
+      const base64 = encode(arrayBuffer);
+      worker.postMessage({ id, type, base64, width, height });
+      lastFingerprintMap.set(id, fingerprint);
     } else {
       e.data.bitmap.close();
       return worker.postMessage({ id: e.data.id });
     }
   };
 })();
-//# sourceMappingURL=image-bitmap-data-url-worker-DqRH07Di.js.map
+//# sourceMappingURL=image-bitmap-data-url-worker-B8-18rdG.js.map
 `,Fi=typeof self!="undefined"&&self.Blob&&new Blob([kn],{type:"text/javascript;charset=utf-8"});function Ka(e){let t;try{if(t=Fi&&(self.URL||self.webkitURL).createObjectURL(Fi),!t)throw"";const s=new Worker(t,{name:e==null?void 0:e.name});return s.addEventListener("error",()=>{(self.URL||self.webkitURL).revokeObjectURL(t)}),s}catch(s){return new Worker("data:text/javascript;charset=utf-8,"+encodeURIComponent(kn),{name:e==null?void 0:e.name})}finally{t&&(self.URL||self.webkitURL).revokeObjectURL(t)}}class el{constructor(t){A(this,"pendingCanvasMutations",new Map),A(this,"rafStamps",{latestId:0,invokeId:null}),A(this,"mirror"),A(this,"mutationCb"),A(this,"resetObservers"),A(this,"frozen",!1),A(this,"locked",!1),A(this,"rafIdTimestamp",null),A(this,"rafIdFlush",null),A(this,"processMutation",(m,h)=>{(this.rafStamps.invokeId&&this.rafStamps.latestId!==this.rafStamps.invokeId||!this.rafStamps.invokeId)&&(this.rafStamps.invokeId=this.rafStamps.latestId),this.pendingCanvasMutations.has(m)||this.pendingCanvasMutations.set(m,[]),this.pendingCanvasMutations.get(m).push(h)});const{sampling:s="all",win:o,blockClass:i,blockSelector:a,recordCanvas:c,dataURLOptions:d}=t;this.mutationCb=t.mutationCb,this.mirror=t.mirror,c&&s==="all"&&this.initCanvasMutationObserver(o,i,a,d),c&&typeof s=="number"&&this.initCanvasFPSObserver(s,o,i,a,{dataURLOptions:d})}reset(){this.pendingCanvasMutations.clear(),this.resetObservers&&this.resetObservers(),this.rafIdTimestamp!==null&&(cancelAnimationFrame(this.rafIdTimestamp),this.rafIdTimestamp=null),this.rafIdFlush!==null&&(cancelAnimationFrame(this.rafIdFlush),this.rafIdFlush=null)}freeze(){this.frozen=!0}unfreeze(){this.frozen=!1}lock(){this.locked=!0}unlock(){this.locked=!1}initCanvasFPSObserver(t,s,o,i,a){if(!("OffscreenCanvas"in s))return;const c=Li(s,o,i,!0),d=new Map,m=new Ka;m.onmessage=p=>{const{id:f}=p.data;if(d.set(f,!1),!("base64"in p.data))return;const{base64:g,type:S,width:w,height:v}=p.data;this.mutationCb({id:f,type:$e["2D"],commands:[{property:"clearRect",args:[0,0,w,v]},{property:"drawImage",args:[{rr_type:"ImageBitmap",args:[{rr_type:"Blob",data:[{rr_type:"ArrayBuffer",base64:g}],type:S}]},0,0]}],displayWidth:w,displayHeight:v})};const h=1e3/t;let r=0,u;const l=()=>{const p=[],f=g=>{g.querySelectorAll("canvas").forEach(S=>{se(S,o,i,!0)||p.push(S)}),g.querySelectorAll("*").forEach(S=>{S.shadowRoot&&f(S.shadowRoot)})};return f(s.document),p},n=p=>{if(r&&p-r<h){u=requestAnimationFrame(n);return}r=p,l().forEach(async f=>{var g;const S=this.mirror.getId(f);if(d.get(S)||f.width===0||f.height===0)return;if(d.set(S,!0),["webgl","webgl2"].includes(f.__context)){const y=f.getContext(f.__context);((g=y==null?void 0:y.getContextAttributes())==null?void 0:g.preserveDrawingBuffer)===!1&&y.clear(y.COLOR_BUFFER_BIT)}const w=f.clientWidth||f.width,v=f.clientHeight||f.height,x=await createImageBitmap(f,{resizeWidth:w,resizeHeight:v});m.postMessage({id:S,bitmap:x,width:w,height:v,dataURLOptions:a.dataURLOptions},[x])}),u=requestAnimationFrame(n)};u=requestAnimationFrame(n),this.resetObservers=()=>{c(),cancelAnimationFrame(u)}}initCanvasMutationObserver(t,s,o,i){this.startRAFTimestamping(),this.startPendingCanvasMutationFlusher();const a=Li(t,s,o,!1),c=Za(this.processMutation.bind(this),t,s,o,i),d=Qa(this.processMutation.bind(this),t,s,o,i);this.resetObservers=()=>{a(),c(),d()}}startPendingCanvasMutationFlusher(){this.rafIdFlush=requestAnimationFrame(()=>this.flushPendingCanvasMutations())}startRAFTimestamping(){const t=s=>{this.rafStamps.latestId=s,this.rafIdTimestamp=requestAnimationFrame(t)};this.rafIdTimestamp=requestAnimationFrame(t)}flushPendingCanvasMutations(){this.pendingCanvasMutations.forEach((t,s)=>{const o=this.mirror.getId(s);this.flushPendingCanvasMutationFor(s,o)}),this.rafIdFlush=requestAnimationFrame(()=>this.flushPendingCanvasMutations())}flushPendingCanvasMutationFor(t,s){if(this.frozen||this.locked)return;const o=this.pendingCanvasMutations.get(t);if(!o||s===-1)return;const i=o.map(c=>{const h=c,{type:d}=h;return Ne(h,["type"])}),{type:a}=o[0];this.mutationCb({id:s,type:a,commands:i}),this.pendingCanvasMutations.delete(t)}}class tl{constructor(t){A(this,"trackedLinkElements",new WeakSet),A(this,"mutationCb"),A(this,"adoptedStyleSheetCb"),A(this,"styleMirror",new xa),this.mutationCb=t.mutationCb,this.adoptedStyleSheetCb=t.adoptedStyleSheetCb}attachLinkElement(t,s){"_cssText"in s.attributes&&this.mutationCb({adds:[],removes:[],texts:[],attributes:[{id:s.id,attributes:s.attributes}]}),this.trackLinkElement(t)}trackLinkElement(t){this.trackedLinkElements.has(t)||(this.trackedLinkElements.add(t),this.trackStylesheetInLinkElement(t))}adoptStyleSheets(t,s){if(t.length===0)return;const o={id:s,styleIds:[]},i=[];for(const a of t){let c;this.styleMirror.has(a)?c=this.styleMirror.getId(a):(c=this.styleMirror.add(a),i.push({styleId:c,rules:Array.from(a.rules||CSSRule,(d,m)=>({rule:Ui(d,a.href),index:m}))})),o.styleIds.push(c)}i.length>0&&(o.styles=i),this.adoptedStyleSheetCb(o)}reset(){this.styleMirror.reset(),this.trackedLinkElements=new WeakSet}trackStylesheetInLinkElement(t){}}class rl{constructor(){A(this,"nodeMap",new WeakMap),A(this,"active",!1)}inOtherBuffer(t,s){const o=this.nodeMap.get(t);return o&&Array.from(o).some(i=>i!==s)}add(t,s){this.active||(this.active=!0,requestAnimationFrame(()=>{this.nodeMap=new WeakMap,this.active=!1})),this.nodeMap.set(t,(this.nodeMap.get(t)||new Set).add(s))}destroy(){}}let G,ot,_r,ft=!1;try{if(Array.from([1],e=>e*2)[0]!==2){const e=document.createElement("iframe");document.body.appendChild(e),Array.from=((ls=e.contentWindow)==null?void 0:ls.Array.from)||Array.from,document.body.removeChild(e)}}catch(e){console.debug("Unable to override Array.from",e)}const ce=oo();function xe(e={}){const{emit:t,checkoutEveryNms:s,checkoutEveryNth:o,blockClass:i="rr-block",blockSelector:a=null,ignoreClass:c="rr-ignore",ignoreSelector:d=null,maskTextClass:m="rr-mask",maskTextSelector:h=null,inlineStylesheet:r=!0,maskAllInputs:u,maskInputOptions:l,slimDOMOptions:n,maskInputFn:p,maskTextFn:f,hooks:g,packFn:S,sampling:w={},dataURLOptions:v={},mousemoveWait:x,recordDOM:y=!0,recordCanvas:b=!1,recordCrossOriginIframes:C=!1,recordAfter:R=e.recordAfter==="DOMContentLoaded"?e.recordAfter:"load",userTriggeredOnInput:I=!1,collectFonts:O=!1,inlineImages:N=!1,plugins:P,keepIframeSrcFn:ee=()=>!1,ignoreCSSAttributes:D=new Set([]),errorHandler:M}=e;Pa(M);const ie=T({type:"image/webp",quality:.4,maxBase64ImageLength:1048576},v),_=C?window.parent===window:!0;let U=!1;if(!_)try{window.parent.document&&(U=!1)}catch(k){U=!0}if(_&&!t)throw new Error("emit function is required");if(!_&&!U)return()=>{};x!==void 0&&w.mousemove===void 0&&(w.mousemove=x),ce.reset();const J=u===!0?{color:!0,date:!0,"datetime-local":!0,email:!0,month:!0,number:!0,range:!0,search:!0,tel:!0,text:!0,time:!0,url:!0,week:!0,textarea:!0,select:!0,password:!0}:l!==void 0?l:{password:!0},W=n===!0||n==="all"?{script:!0,comment:!0,headFavicon:!0,headWhitespace:!0,headMetaSocial:!0,headMetaRobots:!0,headMetaHttpEquiv:!0,headMetaVerification:!0,headMetaAuthorship:n==="all",headMetaDescKeywords:n==="all",headTitleMutations:n==="all"}:n||{};Ca();let be,me=0;const E=k=>{for(const Y of P||[])Y.eventProcessor&&(k=Y.eventProcessor(k));return S&&!U&&(k=S(k)),k};G=(k,Y)=>{var q;const Z=k;if(Z.timestamp=ct(),(q=we[0])!=null&&q.isFrozen()&&Z.type!==B.FullSnapshot&&!(Z.type===B.IncrementalSnapshot&&Z.data.source===F.Mutation)&&we.forEach(fe=>fe.unfreeze()),_)t==null||t(E(Z),Y);else if(U){const fe={type:"rrweb",event:E(Z),origin:window.location.origin,isCheckout:Y};window.parent.postMessage(fe,"*")}if(Z.type===B.FullSnapshot)be=Z,me=0;else if(Z.type===B.IncrementalSnapshot){if(Z.data.source===F.Mutation&&Z.data.isAttachIframe)return;me++;const fe=o&&me>=o,Pe=s&&Z.timestamp-be.timestamp>s;(fe||Pe)&&ot(!0)}};const oe=k=>{if(C&&k.removes&&k.removes.length>0){const Y=k.adds.length>0?new Set(k.adds.map(q=>q.node.id)):null;k.removes.forEach(({id:q})=>{(!Y||!Y.has(q))&&te.removeIframeById(q)})}G({type:B.IncrementalSnapshot,data:T({source:F.Mutation},k)})},ae=k=>G({type:B.IncrementalSnapshot,data:T({source:F.Scroll},k)}),Ae=k=>G({type:B.IncrementalSnapshot,data:T({source:F.CanvasMutation},k)}),ge=k=>G({type:B.IncrementalSnapshot,data:T({source:F.AdoptedStyleSheet},k)}),he=new tl({mutationCb:oe,adoptedStyleSheetCb:ge}),te=new Ha({mirror:ce,mutationCb:oe,stylesheetManager:he,recordCrossOriginIframes:C,wrappedEmit:G});for(const k of P||[])k.getMirror&&k.getMirror({nodeMirror:ce,crossOriginIframeMirror:te.crossOriginIframeMirror,crossOriginIframeStyleMirror:te.crossOriginIframeStyleMirror});const Re=new rl;_r=new el({recordCanvas:b,mutationCb:Ae,win:window,blockClass:i,blockSelector:a,mirror:ce,sampling:w.canvas,dataURLOptions:ie});const X=new Va({mutationCb:oe,scrollCb:ae,bypassOptions:{blockClass:i,blockSelector:a,maskTextClass:m,maskTextSelector:h,inlineStylesheet:r,maskInputOptions:J,dataURLOptions:ie,maskTextFn:f,maskInputFn:p,recordCanvas:b,inlineImages:N,sampling:w,slimDOMOptions:W,iframeManager:te,stylesheetManager:he,canvasManager:_r,keepIframeSrcFn:ee,processedNodeManager:Re},mirror:ce});ot=(k=!1)=>{if(!y)return;G({type:B.Meta,data:{href:window.location.href,width:wn(),height:yn()}},k),he.reset(),X.init(),we.forEach(q=>q.lock());const Y=To(document,{mirror:ce,blockClass:i,blockSelector:a,maskTextClass:m,maskTextSelector:h,inlineStylesheet:r,maskAllInputs:J,maskTextFn:f,maskInputFn:p,slimDOM:W,dataURLOptions:ie,recordCanvas:b,inlineImages:N,onSerialize:q=>{vn(q,ce)&&te.addIframe(q),Cn(q,ce)&&he.trackLinkElement(q),Lr(q)&&X.addShadowRoot(L.shadowRoot(q),document)},onIframeLoad:(q,Z)=>{te.attachIframe(q,Z),X.observeAttachShadow(q)},onStylesheetLoad:(q,Z)=>{he.attachLinkElement(q,Z)},keepIframeSrcFn:ee});if(!Y)return console.warn("Failed to snapshot the document");G({type:B.FullSnapshot,data:{node:Y,initialOffset:gn(window)}},k),we.forEach(q=>q.unlock()),C&&te.reattachIframes(),document.adoptedStyleSheets&&document.adoptedStyleSheets.length>0&&he.adoptStyleSheets(document.adoptedStyleSheets,ce.getId(document))};try{const k=[],Y=fe=>{var Pe;return $(ja)({mutationCb:oe,mousemoveCb:(j,Ct)=>G({type:B.IncrementalSnapshot,data:{source:Ct,positions:j}}),mouseInteractionCb:j=>G({type:B.IncrementalSnapshot,data:T({source:F.MouseInteraction},j)}),scrollCb:ae,viewportResizeCb:j=>G({type:B.IncrementalSnapshot,data:T({source:F.ViewportResize},j)}),inputCb:j=>G({type:B.IncrementalSnapshot,data:T({source:F.Input},j)}),mediaInteractionCb:j=>G({type:B.IncrementalSnapshot,data:T({source:F.MediaInteraction},j)}),styleSheetRuleCb:j=>G({type:B.IncrementalSnapshot,data:T({source:F.StyleSheetRule},j)}),styleDeclarationCb:j=>G({type:B.IncrementalSnapshot,data:T({source:F.StyleDeclaration},j)}),canvasMutationCb:Ae,fontCb:j=>G({type:B.IncrementalSnapshot,data:T({source:F.Font},j)}),selectionCb:j=>{G({type:B.IncrementalSnapshot,data:T({source:F.Selection},j)})},customElementCb:j=>{G({type:B.IncrementalSnapshot,data:T({source:F.CustomElement},j)})},blockClass:i,ignoreClass:c,ignoreSelector:d,maskTextClass:m,maskTextSelector:h,maskInputOptions:J,inlineStylesheet:r,sampling:w,recordDOM:y,recordCanvas:b,inlineImages:N,userTriggeredOnInput:I,collectFonts:O,doc:fe,maskInputFn:p,maskTextFn:f,keepIframeSrcFn:ee,blockSelector:a,slimDOMOptions:W,dataURLOptions:ie,mirror:ce,iframeManager:te,stylesheetManager:he,shadowDomManager:X,processedNodeManager:Re,canvasManager:_r,ignoreCSSAttributes:D,plugins:((Pe=P==null?void 0:P.filter(j=>j.observer))==null?void 0:Pe.map(j=>({observer:j.observer,options:j.options,callback:Ct=>G({type:B.Plugin,data:{plugin:j.name,payload:Ct}})})))||[]},g)},q=fe=>{try{k.push(Y(fe.contentDocument))}catch(Pe){console.warn(Pe)}};te.addLoadListener(q);const Z=()=>{ot(),k.push(Y(document)),ft=!0};return document.readyState==="interactive"||document.readyState==="complete"?Z():(k.push(re("DOMContentLoaded",()=>{G({type:B.DomContentLoaded,data:{}}),R==="DOMContentLoaded"&&Z()})),k.push(re("load",()=>{G({type:B.Load,data:{}}),R==="load"&&Z()},window))),()=>{k.forEach(fe=>fe()),Re.destroy(),te.removeLoadListener(),te.destroy(),ce.reset(),ft=!1,Na()}}catch(k){console.warn(k)}}xe.addCustomEvent=(e,t)=>{if(!ft)throw new Error("please add custom event after start recording");G({type:B.Custom,data:{tag:e,payload:t}})};xe.freezePage=()=>{we.forEach(e=>e.freeze())};xe.takeFullSnapshot=e=>{if(!ft)throw new Error("please take full snapshot after start recording");ot(e)};xe.mirror=ce;var $i;(function(e){e[e.NotStarted=0]="NotStarted",e[e.Running=1]="Running",e[e.Stopped=2]="Stopped"})($i||($i={}));const{addCustomEvent:il}=xe,{freezePage:nl}=xe,{takeFullSnapshot:ol}=xe;exports.record=xe;exports.resetMaxDepthState=Lo;exports.wasMaxDepthReached=Do;
 ;if (typeof module.exports == "object" && typeof exports == "object") {
   var __cp = (to, from, except, desc) => {