@glimt/record 0.0.23 → 0.0.25

package/dist/record.umd.cjs

@@ -399,6 +399,8 @@ const COPY_CANVAS_ON_VOLUME_GREATER_THAN = 25e4;
 function getReadableCanvasContext(canvas) {
   if (canvas.width * canvas.height < COPY_CANVAS_ON_VOLUME_GREATER_THAN)
     return canvas.getContext("2d");
+  console.log("cloning canvas for is2DCanvasBlank");
+  const start = performance.now();
   const offscreen = document.createElement("canvas");
   offscreen.width = canvas.width;
   offscreen.height = canvas.height;
@@ -406,6 +408,11 @@ function getReadableCanvasContext(canvas) {
   if (ctx) {
     ctx.drawImage(canvas, 0, 0);
   }
+  console.log(
+    "cloned canvas for is2DCanvasBlank took",
+    performance.now() - start,
+    "ms"
+  );
   return offscreen.getContext("2d", { willReadFrequently: true });
 }
 function is2DCanvasBlank(canvas) {
@@ -1039,27 +1046,39 @@ function serializeElementNode(n2, options) {
   }
   if (tagName === "canvas" && recordCanvas) {
     if (n2.__context === "2d") {
+      const start2dCanvas = performance.now();
       if (!is2DCanvasBlank(n2)) {
         attributes.rr_dataURL = n2.toDataURL(
           dataURLOptions.type,
           dataURLOptions.quality
         );
       }
+      console.log("2d canvas took", performance.now() - start2dCanvas, "ms");
     } else if (!("__context" in n2)) {
       const canvasDataURL = n2.toDataURL(
         dataURLOptions.type,
         dataURLOptions.quality
       );
-      const blankCanvas = doc.createElement("canvas");
-      blankCanvas.width = n2.width;
-      blankCanvas.height = n2.height;
-      const blankCanvasDataURL = blankCanvas.toDataURL(
-        dataURLOptions.type,
-        dataURLOptions.quality
-      );
-      if (canvasDataURL !== blankCanvasDataURL) {
-        attributes.rr_dataURL = canvasDataURL;
-      }
+      attributes.rr_dataURL = canvasDataURL;
+      requestIdleCallback(() => {
+        try {
+          const blankCanvas = doc.createElement("canvas");
+          blankCanvas.width = n2.width;
+          blankCanvas.height = n2.height;
+          const blankCanvasDataURL = blankCanvas.toDataURL(
+            dataURLOptions.type,
+            dataURLOptions.quality
+          );
+          if (canvasDataURL === blankCanvasDataURL) {
+            console.log(
+              "deleting dataURL because it's the same as blank canvas"
+            );
+            delete attributes.rr_dataURL;
+          }
+        } catch (e2) {
+          console.log("did get context canvas error", e2);
+        }
+      });
     }
   }
   if (tagName === "img" && inlineImages) {