impl #796 observe media volume change (#798)

docs/recipes/optimize-storage.md

@@ -31,9 +31,11 @@ rrweb.record({
     // do not record mouse movement
     mousemove: false
     // do not record mouse interaction
-    mouseInteraction: false,
+    mouseInteraction: false
     // set the interval of scrolling event
     scroll: 150 // do not emit twice in 150ms
+    // set the interval of media interaction event
+    media: 800
     // set the timing of record input
     input: 'last' // When input mulitple characters, only record the final input
   }

docs/recipes/optimize-storage.zh_CN.md

@@ -34,6 +34,8 @@ rrweb.record({
     mouseInteraction: false,
     // 设置滚动事件的触发频率
     scroll: 150 // 每 150ms 最多触发一次
+    // set the interval of media interaction event
+    media: 800
     // 设置输入事件的录制时机
     input: 'last' // 连续输入时，只录制最终值
   }

packages/rrweb/src/record/observer.ts

@@ -684,22 +684,28 @@ function initMediaInteractionObserver(
   mediaInteractionCb: mediaInteractionCallback,
   blockClass: blockClass,
   mirror: Mirror,
+  sampling: SamplingStrategy,
 ): listenerHandler {
-  const handler = (type: MediaInteractions) => (event: Event) => {
-    const target = getEventTarget(event);
-    if (!target || isBlocked(target as Node, blockClass)) {
-      return;
-    }
-    mediaInteractionCb({
-      type,
-      id: mirror.getId(target as INode),
-      currentTime: (target as HTMLMediaElement).currentTime,
-    });
-  };
+  const handler = (type: MediaInteractions) =>
+    throttle((event: Event) => {
+      const target = getEventTarget(event);
+      if (!target || isBlocked(target as Node, blockClass)) {
+        return;
+      }
+      const { currentTime, volume, muted } = target as HTMLMediaElement;
+      mediaInteractionCb({
+        type,
+        id: mirror.getId(target as INode),
+        currentTime,
+        volume,
+        muted,
+      });
+    }, sampling.media || 500);
   const handlers = [
     on('play', handler(MediaInteractions.Play)),
     on('pause', handler(MediaInteractions.Pause)),
     on('seeked', handler(MediaInteractions.Seeked)),
+    on('volumechange', handler(MediaInteractions.VolumeChange)),
   ];
   return () => {
     handlers.forEach((h) => h());
@@ -987,6 +993,7 @@ export function initObservers(
     o.mediaInteractionCb,
     o.blockClass,
     o.mirror,
+    o.sampling,
   );
 
   const styleSheetObserver = initStyleSheetObserver(

packages/rrweb/src/replay/index.ts

@@ -1019,6 +1019,12 @@ export class Replayer {
           if (d.currentTime) {
             mediaEl.currentTime = d.currentTime;
           }
+          if (d.volume) {
+            mediaEl.volume = d.volume;
+          }
+          if (d.muted) {
+            mediaEl.muted = d.muted;
+          }
           if (d.type === MediaInteractions.Pause) {
             mediaEl.pause();
           }

packages/rrweb/src/types.ts

@@ -192,6 +192,10 @@ export type SamplingStrategy = Partial<{
    * number is the throttle threshold of recording scroll
    */
   scroll: number;
+  /**
+   * number is the throttle threshold of recording media interactions
+   */
+  media: number;
   /**
    * 'all' will record all the input events
    * 'last' will only record the last input value while input a sequence of chars
@@ -472,12 +476,15 @@ export const enum MediaInteractions {
   Play,
   Pause,
   Seeked,
+  VolumeChange,
 }
 
 export type mediaInteractionParam = {
   type: MediaInteractions;
   id: number;
   currentTime?: number;
+  volume?: number;
+  muted?: boolean;
 };
 
 export type mediaInteractionCallback = (p: mediaInteractionParam) => void;