support inlining remove video elements using the canvas manager

highlight · Feb 21, 2025 · 51addd9 · 51addd9
1 parent 2701b9d
commit 51addd9
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 34 deletions.
diff --git a/packages/rrweb-snapshot/src/snapshot.ts b/packages/rrweb-snapshot/src/snapshot.ts
@@ -402,6 +402,7 @@ function serializeNode(
     maskInputFn: MaskInputFn | undefined;
     dataURLOptions?: DataURLOptions;
     inlineImages: boolean;
+    inlineVideos: boolean;
     recordCanvas: boolean;
     keepIframeSrcFn: KeepIframeSrcFn;
     /**
@@ -426,6 +427,7 @@ function serializeNode(
     maskInputFn,
     dataURLOptions = {},
     inlineImages,
+    inlineVideos,
     recordCanvas,
     keepIframeSrcFn,
     newlyAddedElement = false,
@@ -466,6 +468,7 @@ function serializeNode(
         maskTextClass,
         dataURLOptions,
         inlineImages,
+        inlineVideos,
         recordCanvas,
         keepIframeSrcFn,
         newlyAddedElement,
@@ -596,6 +599,7 @@ function serializeElementNode(
     maskTextClass: string | RegExp;
     dataURLOptions?: DataURLOptions;
     inlineImages: boolean;
+    inlineVideos: boolean;
     recordCanvas: boolean;
     keepIframeSrcFn: KeepIframeSrcFn;
     /**
@@ -616,6 +620,7 @@ function serializeElementNode(
     maskTextClass,
     dataURLOptions = {},
     inlineImages,
+    inlineVideos,
     recordCanvas,
     keepIframeSrcFn,
     newlyAddedElement = false,
@@ -854,30 +859,43 @@ function serializeElementNode(
     // In case old browsers don't support customElements
   }
 
-  if (inlineImages && tagName === 'video') {
-    const video = n as HTMLVideoElement;
-    if (video.src === '' || video.src.indexOf('blob:') !== -1) {
-      const { width, height } = n.getBoundingClientRect();
-      attributes = {
-        width,
-        height,
-        rr_width: `${width}px`,
-        rr_height: `${height}px`,
-        rr_inlined_video: true,
-        class: attributes.class,
-        style: attributes.style,
-      };
-      tagName = 'canvas';
+  const saveVideoAsCanvas = (video: HTMLVideoElement) => {
+    const { width, height } = video.getBoundingClientRect();
+    attributes = {
+      width,
+      height,
+      rr_width: `${width}px`,
+      rr_height: `${height}px`,
+      rr_inlined_video: true,
+      class: attributes.class,
+      style: attributes.style,
+    };
+    tagName = 'canvas';
 
-      // create blank canvas of same dimensions
-      const blankCanvas = doc.createElement('canvas');
-      blankCanvas.width = (n as HTMLCanvasElement).width;
-      blankCanvas.height = (n as HTMLCanvasElement).height;
+    // create blank canvas of same dimensions
+    const blankCanvas = doc.createElement('canvas');
+    blankCanvas.width = (n as HTMLCanvasElement).width;
+    blankCanvas.height = (n as HTMLCanvasElement).height;
 
-      attributes.rr_dataURL = blankCanvas.toDataURL(
-        dataURLOptions.type,
-        dataURLOptions.quality,
-      );
+    attributes.rr_dataURL = blankCanvas.toDataURL(
+      dataURLOptions.type,
+      dataURLOptions.quality,
+    );
+  };
+
+  if (tagName === 'video') {
+    const video = n as HTMLVideoElement;
+    if (inlineImages) {
+      // local video - webcam (no src) or memory (blob)
+      if (video.src === '' || video.src.indexOf('blob:') !== -1) {
+        saveVideoAsCanvas(video);
+      }
+    }
+    if (inlineVideos) {
+      // remote video
+      if (video.src !== '' && video.src.indexOf('blob:') === -1) {
+        saveVideoAsCanvas(video);
+      }
     }
   }
 
@@ -1016,6 +1034,7 @@ export function serializeNodeWithId(
     dataURLOptions?: DataURLOptions;
     keepIframeSrcFn?: KeepIframeSrcFn;
     inlineImages?: boolean;
+    inlineVideos?: boolean;
     recordCanvas?: boolean;
     preserveWhiteSpace?: boolean;
     onSerialize?: (n: Node) => unknown;
@@ -1047,6 +1066,7 @@ export function serializeNodeWithId(
     slimDOMOptions,
     dataURLOptions = {},
     inlineImages = false,
+    inlineVideos = false,
     recordCanvas = false,
     onSerialize,
     onIframeLoad,
@@ -1084,6 +1104,7 @@ export function serializeNodeWithId(
     maskInputFn,
     dataURLOptions,
     inlineImages,
+    inlineVideos,
     recordCanvas,
     keepIframeSrcFn,
     newlyAddedElement,
@@ -1179,6 +1200,7 @@ export function serializeNodeWithId(
       slimDOMOptions,
       dataURLOptions,
       inlineImages,
+      inlineVideos,
       recordCanvas,
       preserveWhiteSpace,
       onSerialize,
@@ -1248,6 +1270,7 @@ export function serializeNodeWithId(
             slimDOMOptions,
             dataURLOptions,
             inlineImages,
+            inlineVideos,
             recordCanvas,
             preserveWhiteSpace,
             onSerialize,
@@ -1301,6 +1324,7 @@ export function serializeNodeWithId(
             slimDOMOptions,
             dataURLOptions,
             inlineImages,
+            inlineVideos,
             recordCanvas,
             preserveWhiteSpace,
             onSerialize,
@@ -1342,6 +1366,7 @@ function snapshot(
     slimDOM?: 'all' | boolean | SlimDOMOptions;
     dataURLOptions?: DataURLOptions;
     inlineImages?: boolean;
+    inlineVideos?: boolean;
     recordCanvas?: boolean;
     preserveWhiteSpace?: boolean;
     onSerialize?: (n: Node) => unknown;
@@ -1367,6 +1392,7 @@ function snapshot(
     maskTextSelector = null,
     inlineStylesheet = true,
     inlineImages = false,
+    inlineVideos = false,
     recordCanvas = false,
     maskAllInputs = false,
     maskTextFn,
@@ -1440,6 +1466,7 @@ function snapshot(
     slimDOMOptions,
     dataURLOptions,
     inlineImages,
+    inlineVideos,
     recordCanvas,
     preserveWhiteSpace,
     onSerialize,

diff --git a/packages/rrweb/src/record/index.ts b/packages/rrweb/src/record/index.ts
@@ -95,6 +95,7 @@ function record<T = eventWithTime>(
     userTriggeredOnInput = false,
     collectFonts = false,
     inlineImages = false,
+    inlineVideos = false,
     plugins,
     keepIframeSrcFn = () => false,
     privacySetting = 'default',
@@ -324,7 +325,8 @@ function record<T = eventWithTime>(
 
   canvasManager = new CanvasManager({
     recordCanvas,
-    recordVideos: inlineImages,
+    recordLocalVideos: inlineImages,
+    recordRemoteVideos: inlineVideos,
     mutationCb: wrappedCanvasMutationEmit,
     win: window,
     blockClass,
@@ -355,6 +357,7 @@ function record<T = eventWithTime>(
       maskInputFn,
       recordCanvas,
       inlineImages,
+      inlineVideos,
       privacySetting,
       sampling,
       slimDOMOptions,
@@ -403,6 +406,7 @@ function record<T = eventWithTime>(
       dataURLOptions,
       recordCanvas,
       inlineImages,
+      inlineVideos,
       privacySetting,
       onSerialize: (n) => {
         if (isSerializedIframe(n, mirror)) {
@@ -552,6 +556,7 @@ function record<T = eventWithTime>(
           recordDOM,
           recordCanvas,
           inlineImages,
+          inlineVideos,
           userTriggeredOnInput,
           collectFonts,
           doc,

diff --git a/packages/rrweb/src/record/mutation.ts b/packages/rrweb/src/record/mutation.ts
@@ -185,6 +185,7 @@ export default class MutationBuffer {
   private keepIframeSrcFn: observerParam['keepIframeSrcFn'];
   private recordCanvas: observerParam['recordCanvas'];
   private inlineImages: observerParam['inlineImages'];
+  private inlineVideos: observerParam['inlineVideos'];
   private privacySetting: observerParam['privacySetting'];
   private slimDOMOptions: observerParam['slimDOMOptions'];
   private dataURLOptions: observerParam['dataURLOptions'];
@@ -212,6 +213,7 @@ export default class MutationBuffer {
         'keepIframeSrcFn',
         'recordCanvas',
         'inlineImages',
+        'inlineVideos',
         'privacySetting',
         'slimDOMOptions',
         'dataURLOptions',
@@ -319,6 +321,7 @@ export default class MutationBuffer {
         dataURLOptions: this.dataURLOptions,
         recordCanvas: this.recordCanvas,
         inlineImages: this.inlineImages,
+        inlineVideos: this.inlineVideos,
         privacySetting: this.privacySetting,
         onSerialize: (currentN) => {
           if (isSerializedIframe(currentN, this.mirror)) {
@@ -460,7 +463,7 @@ export default class MutationBuffer {
             !highlightOverwriteRecord &&
             value
           ) {
-              value = obfuscateText(value);
+            value = obfuscateText(value);
           }
           return {
             id: this.mirror.getId(n),
@@ -640,8 +643,8 @@ export default class MutationBuffer {
           if (tagName === 'INPUT') {
             const node = m.target as HTMLInputElement;
             if (node.type === 'password') {
-                item.attributes['value'] = '*'.repeat(node.value.length);
-                break;
+              item.attributes['value'] = '*'.repeat(node.value.length);
+              break;
             }
           }
           /* End Highlight Code */

diff --git a/packages/rrweb/src/record/observers/canvas/canvas-manager.ts b/packages/rrweb/src/record/observers/canvas/canvas-manager.ts
@@ -26,7 +26,8 @@ type pendingCanvasMutationsMap = Map<
 
 interface Options {
   recordCanvas: boolean;
-  recordVideos: boolean;
+  recordLocalVideos: boolean;
+  recordRemoteVideos: boolean;
   mutationCb: canvasMutationCallback;
   win: IWindow;
   blockClass: blockClass;
@@ -91,7 +92,8 @@ export class CanvasManager {
       blockClass,
       blockSelector,
       recordCanvas,
-      recordVideos,
+      recordLocalVideos,
+      recordRemoteVideos,
       initialSnapshotDelay,
       dataURLOptions,
     } = options;
@@ -107,6 +109,7 @@ export class CanvasManager {
 
       if (!('base64' in e.data)) {
         this.debug(null, 'canvas worker received empty message', {
+          id,
           data: e.data,
           status: e.data.status,
         });
@@ -155,7 +158,8 @@ export class CanvasManager {
     } else if (recordCanvas && typeof sampling === 'number') {
       this.debug(null, 'initializing canvas fps observer', { sampling });
       this.initCanvasFPSObserver(
-        recordVideos,
+        recordLocalVideos,
+        recordRemoteVideos,
         sampling,
         win,
         blockClass,
@@ -313,7 +317,8 @@ export class CanvasManager {
   }
 
   private initCanvasFPSObserver(
-    recordVideos: boolean,
+    recordLocalVideos: boolean,
+    recordRemoteVideos: boolean,
     fps: number,
     win: IWindow,
     blockClass: blockClass,
@@ -372,9 +377,20 @@ export class CanvasManager {
 
     const getVideos = (timestamp: DOMHighResTimeStamp): HTMLVideoElement[] => {
       const matchedVideos: HTMLVideoElement[] = [];
-      if (recordVideos) {
+      if (recordLocalVideos || recordRemoteVideos) {
         querySelectorAll(win.document, 'video').forEach((video) => {
-          if (video.src !== '' && video.src.indexOf('blob:') === -1) return;
+          if (!recordRemoteVideos) {
+            // remote video
+            if (video.src !== '' && video.src.indexOf('blob:') === -1) {
+              return;
+            }
+          }
+          if (!recordLocalVideos) {
+            // local video - webcam (no src) or memory (blob)
+            if (video.src === '' || video.src.indexOf('blob:') !== -1) {
+              return;
+            }
+          }
           if (!isBlocked(video, blockClass, blockSelector, true)) {
             matchedVideos.push(video);
             const id = this.mirror.getId(video);

diff --git a/packages/rrweb/src/record/workers/image-bitmap-data-url-worker.ts b/packages/rrweb/src/record/workers/image-bitmap-data-url-worker.ts
@@ -92,7 +92,6 @@ worker.onmessage = async function (e) {
         id,
         base64,
       });
-      return worker.postMessage({ id, status: 'unchanged' });
     }
     const msg = {
       id,
@@ -104,7 +103,7 @@ worker.onmessage = async function (e) {
       dy,
       dw,
       dh,
-    }
+    };
     debug('[highlight-worker] canvas bitmap processed', msg);
     worker.postMessage(msg);
     lastBlobMap.set(id, base64);

diff --git a/packages/rrweb/src/types.ts b/packages/rrweb/src/types.ts
@@ -71,6 +71,7 @@ export type recordOptions<T> = {
   userTriggeredOnInput?: boolean;
   collectFonts?: boolean;
   inlineImages?: boolean;
+  inlineVideos?: boolean;
   plugins?: RecordPlugin[];
   // departed, please use sampling options
   mousemoveWait?: number;
@@ -117,6 +118,7 @@ export type observerParam = {
   recordDOM: boolean;
   recordCanvas: boolean;
   inlineImages: boolean;
+  inlineVideos: boolean;
   privacySetting: PrivacySettingOption;
   userTriggeredOnInput: boolean;
   collectFonts: boolean;
@@ -155,6 +157,7 @@ export type MutationBufferParam = Pick<
   | 'keepIframeSrcFn'
   | 'recordCanvas'
   | 'inlineImages'
+  | 'inlineVideos'
   | 'privacySetting'
   | 'slimDOMOptions'
   | 'dataURLOptions'