fix #811 expose inlineImages to record

guide.zh_CN.md

@@ -132,7 +132,7 @@ setInterval(save, 10 * 1000);
 `rrweb.record(config)` 的 config 部分接受以下参数
 
 | key                  | 默认值             | 功能                                                                                                                                                                                  |
-| -------------------- | ------------------ | ------------------------------------------------------------ |
+| -------------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | emit                 | 必填               | 获取当前录制的数据                                                                                                                                                                    |
 | checkoutEveryNth     | -                  | 每 N 次事件重新制作一次全量快照<br />详见[“重新制作快照”](#重新制作快照)章节                                                                                                          |
 | checkoutEveryNms     | -                  | 每 N 毫秒重新制作一次全量快照<br />详见[“重新制作快照”](#重新制作快照)章节                                                                                                            |
@@ -151,6 +151,7 @@ setInterval(save, 10 * 1000);
 | packFn               | -                  | 数据压缩函数，详见[优化存储策略](./docs/recipes/optimize-storage.zh_CN.md)                                                                                                            |
 | sampling             | -                  | 数据抽样策略，详见[优化存储策略](./docs/recipes/optimize-storage.zh_CN.md)                                                                                                            |
 | recordCanvas         | false              | 是否记录 canvas 内容                                                                                                                                                                  |
+| inlineImages         | false              | 是否将图片内容记内联录制                                                                                                                                                              |
 | collectFonts         | false              | 是否记录页面中的字体文件                                                                                                                                                              |
 | userTriggeredOnInput | false              | [什么是 `userTriggered`](https://github.com/rrweb-io/rrweb/pull/495)                                                                                                                  |
 | plugins              | []                 | 加载插件以获得额外的录制功能. [什么是插件？](./docs/recipes/plugin.zh_CN.md)                                                                                                          |
@@ -282,7 +283,7 @@ replayer.pause(5000);
 可以通过 `new rrweb.Replayer(events, options)` 的方式向 rrweb 传递回放时的配置参数，具体配置如下：
 
 | key                 | 默认值        | 功能                                                                                                                                                                                                 |
-| ------------------- | ------------- | ------------------------------------------------------------ |
+| ------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | speed               | 1             | 回放倍速                                                                                                                                                                                             |
 | root                | document.body | 回放时使用的 HTML 元素                                                                                                                                                                               |
 | loadTimeout         | 0             | 加载异步样式表的超时时长                                                                                                                                                                             |

packages/rrweb/src/record/index.ts

@@ -59,6 +59,7 @@ function record<T = eventWithTime>(
     recordCanvas = false,
     userTriggeredOnInput = false,
     collectFonts = false,
+    inlineImages = false,
     plugins,
     keepIframeSrcFn = () => false,
   } = options;
@@ -197,6 +198,7 @@ function record<T = eventWithTime>(
       maskTextFn,
       maskInputFn,
       recordCanvas,
+      inlineImages,
       sampling,
       slimDOMOptions,
       iframeManager,
@@ -228,6 +230,7 @@ function record<T = eventWithTime>(
       maskTextFn,
       slimDOM: slimDOMOptions,
       recordCanvas,
+      inlineImages,
       onSerialize: (n) => {
         if (isIframeINode(n)) {
           iframeManager.addIframe(n);
@@ -390,6 +393,7 @@ function record<T = eventWithTime>(
           inlineStylesheet,
           sampling,
           recordCanvas,
+          inlineImages,
           userTriggeredOnInput,
           collectFonts,
           doc,

packages/rrweb/src/record/mutation.ts

@@ -172,6 +172,7 @@ export default class MutationBuffer {
   private maskTextFn: MaskTextFn | undefined;
   private maskInputFn: MaskInputFn | undefined;
   private recordCanvas: boolean;
+  private inlineImages: boolean;
   private slimDOMOptions: SlimDOMOptions;
   private doc: Document;
 
@@ -190,6 +191,7 @@ export default class MutationBuffer {
     maskTextFn: MaskTextFn | undefined,
     maskInputFn: MaskInputFn | undefined,
     recordCanvas: boolean,
+    inlineImages: boolean,
     slimDOMOptions: SlimDOMOptions,
     doc: Document,
     mirror: Mirror,
@@ -205,6 +207,7 @@ export default class MutationBuffer {
     this.maskTextFn = maskTextFn;
     this.maskInputFn = maskInputFn;
     this.recordCanvas = recordCanvas;
+    this.inlineImages = inlineImages;
     this.slimDOMOptions = slimDOMOptions;
     this.emissionCallback = cb;
     this.doc = doc;
@@ -296,6 +299,7 @@ export default class MutationBuffer {
         maskInputFn: this.maskInputFn,
         slimDOMOptions: this.slimDOMOptions,
         recordCanvas: this.recordCanvas,
+        inlineImages: this.inlineImages,
         onSerialize: (currentN) => {
           if (isIframeINode(currentN)) {
             this.iframeManager.addIframe(currentN);
@@ -504,7 +508,8 @@ export default class MutationBuffer {
             }
           }
           for (const pname of Array.from(old.style)) {
-            if (target.style.getPropertyValue(pname) === '') {  // "if not set, returns the empty string"
+            if (target.style.getPropertyValue(pname) === '') {
+              // "if not set, returns the empty string"
               styleObj[pname] = false; // delete
             }
           }

packages/rrweb/src/record/observer.ts

@@ -97,6 +97,7 @@ export function initMutationObserver(
   maskTextFn: MaskTextFn | undefined,
   maskInputFn: MaskInputFn | undefined,
   recordCanvas: boolean,
+  inlineImages: boolean,
   slimDOMOptions: SlimDOMOptions,
   mirror: Mirror,
   iframeManager: IframeManager,
@@ -117,6 +118,7 @@ export function initMutationObserver(
     maskTextFn,
     maskInputFn,
     recordCanvas,
+    inlineImages,
     slimDOMOptions,
     doc,
     mirror,
@@ -951,6 +953,7 @@ export function initObservers(
     o.maskTextFn,
     o.maskInputFn,
     o.recordCanvas,
+    o.inlineImages,
     o.slimDOMOptions,
     o.mirror,
     o.iframeManager,

packages/rrweb/src/record/shadow-dom-manager.ts

@@ -25,6 +25,7 @@ type BypassOptions = {
   maskTextFn: MaskTextFn | undefined;
   maskInputFn: MaskInputFn | undefined;
   recordCanvas: boolean;
+  inlineImages: boolean;
   sampling: SamplingStrategy;
   slimDOMOptions: SlimDOMOptions;
   iframeManager: IframeManager;
@@ -61,6 +62,7 @@ export class ShadowDomManager {
       this.bypassOptions.maskTextFn,
       this.bypassOptions.maskInputFn,
       this.bypassOptions.recordCanvas,
+      this.bypassOptions.inlineImages,
       this.bypassOptions.slimDOMOptions,
       this.mirror,
       this.bypassOptions.iframeManager,

packages/rrweb/src/types.ts

@@ -230,6 +230,7 @@ export type recordOptions<T> = {
   recordCanvas?: boolean;
   userTriggeredOnInput?: boolean;
   collectFonts?: boolean;
+  inlineImages?: boolean;
   plugins?: RecordPlugin[];
   // departed, please use sampling options
   mousemoveWait?: number;
@@ -259,6 +260,7 @@ export type observerParam = {
   fontCb: fontCallback;
   sampling: SamplingStrategy;
   recordCanvas: boolean;
+  inlineImages: boolean;
   userTriggeredOnInput: boolean;
   collectFonts: boolean;
   slimDOMOptions: SlimDOMOptions;

packages/rrweb/typings/record/mutation.d.ts

@@ -23,12 +23,13 @@ export default class MutationBuffer {
     private maskTextFn;
     private maskInputFn;
     private recordCanvas;
+    private inlineImages;
     private slimDOMOptions;
     private doc;
     private mirror;
     private iframeManager;
     private shadowDomManager;
-    init(cb: mutationCallBack, blockClass: blockClass, blockSelector: string | null, maskTextClass: maskTextClass, maskTextSelector: string | null, inlineStylesheet: boolean, maskInputOptions: MaskInputOptions, maskTextFn: MaskTextFn | undefined, maskInputFn: MaskInputFn | undefined, recordCanvas: boolean, slimDOMOptions: SlimDOMOptions, doc: Document, mirror: Mirror, iframeManager: IframeManager, shadowDomManager: ShadowDomManager): void;
+    init(cb: mutationCallBack, blockClass: blockClass, blockSelector: string | null, maskTextClass: maskTextClass, maskTextSelector: string | null, inlineStylesheet: boolean, maskInputOptions: MaskInputOptions, maskTextFn: MaskTextFn | undefined, maskInputFn: MaskInputFn | undefined, recordCanvas: boolean, inlineImages: boolean, slimDOMOptions: SlimDOMOptions, doc: Document, mirror: Mirror, iframeManager: IframeManager, shadowDomManager: ShadowDomManager): void;
     freeze(): void;
     unfreeze(): void;
     isFrozen(): boolean;

packages/rrweb/typings/record/observer.d.ts

@@ -4,7 +4,7 @@ import MutationBuffer from './mutation';
 import { IframeManager } from './iframe-manager';
 import { ShadowDomManager } from './shadow-dom-manager';
 export declare const mutationBuffers: MutationBuffer[];
-export declare function initMutationObserver(cb: mutationCallBack, doc: Document, blockClass: blockClass, blockSelector: string | null, maskTextClass: maskTextClass, maskTextSelector: string | null, inlineStylesheet: boolean, maskInputOptions: MaskInputOptions, maskTextFn: MaskTextFn | undefined, maskInputFn: MaskInputFn | undefined, recordCanvas: boolean, slimDOMOptions: SlimDOMOptions, mirror: Mirror, iframeManager: IframeManager, shadowDomManager: ShadowDomManager, rootEl: Node): MutationObserver;
+export declare function initMutationObserver(cb: mutationCallBack, doc: Document, blockClass: blockClass, blockSelector: string | null, maskTextClass: maskTextClass, maskTextSelector: string | null, inlineStylesheet: boolean, maskInputOptions: MaskInputOptions, maskTextFn: MaskTextFn | undefined, maskInputFn: MaskInputFn | undefined, recordCanvas: boolean, inlineImages: boolean, slimDOMOptions: SlimDOMOptions, mirror: Mirror, iframeManager: IframeManager, shadowDomManager: ShadowDomManager, rootEl: Node): MutationObserver;
 export declare function initScrollObserver(cb: scrollCallback, doc: Document, mirror: Mirror, blockClass: blockClass, sampling: SamplingStrategy): listenerHandler;
 export declare const INPUT_TAGS: string[];
 export declare function initObservers(o: observerParam, hooks?: hooksParam): listenerHandler;

packages/rrweb/typings/record/shadow-dom-manager.d.ts

@@ -11,6 +11,7 @@ declare type BypassOptions = {
     maskTextFn: MaskTextFn | undefined;
     maskInputFn: MaskInputFn | undefined;
     recordCanvas: boolean;
+    inlineImages: boolean;
     sampling: SamplingStrategy;
     slimDOMOptions: SlimDOMOptions;
     iframeManager: IframeManager;

packages/rrweb/typings/types.d.ts

@@ -122,6 +122,7 @@ export declare type SamplingStrategy = Partial<{
     mousemoveCallback: number;
     mouseInteraction: boolean | Record<string, boolean | undefined>;
     scroll: number;
+    media: number;
     input: 'all' | 'last';
 }>;
 export declare type RecordPlugin<TOptions = unknown> = {
@@ -150,6 +151,7 @@ export declare type recordOptions<T> = {
     recordCanvas?: boolean;
     userTriggeredOnInput?: boolean;
     collectFonts?: boolean;
+    inlineImages?: boolean;
     plugins?: RecordPlugin[];
     mousemoveWait?: number;
     keepIframeSrcFn?: KeepIframeSrcFn;
@@ -177,6 +179,7 @@ export declare type observerParam = {
     fontCb: fontCallback;
     sampling: SamplingStrategy;
     recordCanvas: boolean;
+    inlineImages: boolean;
     userTriggeredOnInput: boolean;
     collectFonts: boolean;
     slimDOMOptions: SlimDOMOptions;
@@ -349,12 +352,15 @@ export declare type inputCallback = (v: inputValue & {
 export declare const enum MediaInteractions {
     Play = 0,
     Pause = 1,
-    Seeked = 2
+    Seeked = 2,
+    VolumeChange = 3
 }
 export declare type mediaInteractionParam = {
     type: MediaInteractions;
     id: number;
     currentTime?: number;
+    volume?: number;
+    muted?: boolean;
 };
 export declare type mediaInteractionCallback = (p: mediaInteractionParam) => void;
 export declare type DocumentDimension = {