support inlining remove video elements using the canvas manager

highlight · Nov 26, 2024 · 2c1bae2 · 2c1bae2
1 parent 2701b9d
commit 2c1bae2
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 7 deletions.
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,

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;
@@ -155,7 +157,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 +316,8 @@ export class CanvasManager {
   }
 
   private initCanvasFPSObserver(
-    recordVideos: boolean,
+    recordLocalVideos: boolean,
+    recordRemoteVideos: boolean,
     fps: number,
     win: IWindow,
     blockClass: blockClass,
@@ -372,9 +376,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/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;