@vidtreo/recorder 0.8.5 → 0.8.6

package/dist/index.js

@@ -694,7 +694,7 @@ var logger = {
 };
 
 // src/core/stream/source-switch-manager.ts
-var SCREEN_SHARE_TRANSITION_DELAY = 100;
+var SCREEN_SHARE_TRANSITION_DELAY = 0;
 var TRACK_READY_STATE_LIVE = "live";
 
 class SourceSwitchManager {
@@ -774,11 +774,76 @@ class SourceSwitchManager {
   }
   combineScreenShareWithOriginalAudio(screenVideoTrack) {
     const originalAudioTrack = this.originalCameraStream ? this.originalCameraStream.getAudioTracks()[0] : undefined;
+    logger.debug("[SourceSwitchManager] combineScreenShareWithOriginalAudio", {
+      hasOriginalCameraStream: !!this.originalCameraStream,
+      originalCameraStreamId: this.originalCameraStream?.id,
+      hasOriginalAudioTrack: !!originalAudioTrack,
+      originalAudioTrackId: originalAudioTrack?.id,
+      originalAudioTrackReadyState: originalAudioTrack?.readyState,
+      originalAudioTrackEnabled: originalAudioTrack?.enabled,
+      originalAudioTrackMuted: originalAudioTrack?.muted,
+      originalAudioTrackLabel: originalAudioTrack?.label,
+      isTrackLive: this.isTrackLive(originalAudioTrack),
+      screenVideoTrackId: screenVideoTrack.id,
+      screenVideoTrackReadyState: screenVideoTrack.readyState
+    });
     const combinedTracks = [screenVideoTrack];
-    if (this.isTrackLive(originalAudioTrack)) {
+    if (this.isTrackLive(originalAudioTrack) && originalAudioTrack) {
       combinedTracks.push(originalAudioTrack);
+      logger.debug("[SourceSwitchManager] Added original audio track to combined stream", {
+        audioTrackId: originalAudioTrack.id,
+        combinedTracksCount: combinedTracks.length
+      });
+    } else {
+      logger.warn("[SourceSwitchManager] Original audio track is not live, not adding to combined stream", {
+        audioTrackId: originalAudioTrack?.id,
+        audioTrackReadyState: originalAudioTrack?.readyState,
+        combinedTracksCount: combinedTracks.length
+      });
+    }
+    const combinedStream = new MediaStream(combinedTracks);
+    logger.debug("[SourceSwitchManager] Combined stream created", {
+      combinedStreamId: combinedStream.id,
+      combinedStreamVideoTracksCount: combinedStream.getVideoTracks().length,
+      combinedStreamAudioTracksCount: combinedStream.getAudioTracks().length,
+      combinedStreamAudioTrackId: combinedStream.getAudioTracks()[0]?.id,
+      combinedStreamAudioTrackReadyState: combinedStream.getAudioTracks()[0]?.readyState
+    });
+    return combinedStream;
+  }
+  handleScreenSelectionError() {
+    if (this.callbacks.onScreenSelectionEnd) {
+      this.callbacks.onScreenSelectionEnd();
+    }
+    if (this.callbacks.onTransitionEnd) {
+      this.callbacks.onTransitionEnd();
+    }
+  }
+  isPermissionDeniedError(error) {
+    const errorMessage = extractErrorMessage(error);
+    return errorMessage.includes("NotAllowedError") || errorMessage.includes("AbortError") || errorMessage.toLowerCase().includes("permission denied") || errorMessage.toLowerCase().includes("user denied");
+  }
+  async processScreenShareStream(screenShareStream, currentStream) {
+    this.screenShareStream = screenShareStream;
+    const screenVideoTrack = screenShareStream.getVideoTracks()[0];
+    if (!screenVideoTrack) {
+      this.stopStreamTracks(screenShareStream);
+      throw new Error("No video track found in screen share stream");
+    }
+    const combinedStream = this.combineScreenShareWithOriginalAudio(screenVideoTrack);
+    if (currentStream && currentStream !== this.originalCameraStream) {
+      this.stopStreamVideoTracks(currentStream);
+    }
+    const screenAudioTracks = screenShareStream.getAudioTracks();
+    for (const track of screenAudioTracks) {
+      track.stop();
+    }
+    this.currentSourceType = "screen";
+    if (this.callbacks.onSourceChange) {
+      await this.callbacks.onSourceChange(this.currentSourceType);
     }
-    return new MediaStream(combinedTracks);
+    this.setupScreenShareTrackHandler(combinedStream);
+    return combinedStream;
   }
   async switchToScreenCapture() {
     const currentStream = this.streamManager.getStream();
@@ -789,38 +854,18 @@ class SourceSwitchManager {
     if (this.callbacks.onTransitionStart) {
       this.callbacks.onTransitionStart("Select screen to share...");
     }
+    if (this.callbacks.onScreenSelectionStart) {
+      this.callbacks.onScreenSelectionStart();
+    }
     try {
       const screenShareStream = await navigator.mediaDevices.getDisplayMedia({
         video: true,
         audio: true
       });
-      this.screenShareStream = screenShareStream;
-      const screenVideoTrack = screenShareStream.getVideoTracks()[0];
-      if (!screenVideoTrack) {
-        this.stopStreamTracks(screenShareStream);
-        throw new Error("No video track found in screen share stream");
-      }
-      const combinedStream = this.combineScreenShareWithOriginalAudio(screenVideoTrack);
-      if (currentStream && currentStream !== this.originalCameraStream) {
-        this.stopStreamVideoTracks(currentStream);
-      }
-      const screenAudioTracks = screenShareStream.getAudioTracks();
-      for (const track of screenAudioTracks) {
-        track.stop();
-      }
-      this.currentSourceType = "screen";
-      if (this.callbacks.onSourceChange) {
-        await this.callbacks.onSourceChange(this.currentSourceType);
-      }
-      this.setupScreenShareTrackHandler(combinedStream);
-      return combinedStream;
+      return await this.processScreenShareStream(screenShareStream, currentStream);
     } catch (error) {
-      if (this.callbacks.onTransitionEnd) {
-        this.callbacks.onTransitionEnd();
-      }
-      const errorMessage = extractErrorMessage(error);
-      const isPermissionDenied = errorMessage.includes("NotAllowedError") || errorMessage.includes("AbortError") || errorMessage.toLowerCase().includes("permission denied") || errorMessage.toLowerCase().includes("user denied");
-      if (isPermissionDenied) {
+      this.handleScreenSelectionError();
+      if (this.isPermissionDeniedError(error)) {
         return null;
       }
       throw error;
@@ -938,7 +983,23 @@ class SourceSwitchManager {
   }
   async createCameraStreamWithOriginalAudio(cameraDeviceId) {
     const originalAudioTrack = this.originalCameraStream ? this.originalCameraStream.getAudioTracks()[0] : undefined;
+    logger.debug("[SourceSwitchManager] createCameraStreamWithOriginalAudio", {
+      hasOriginalCameraStream: !!this.originalCameraStream,
+      originalCameraStreamId: this.originalCameraStream?.id,
+      hasOriginalAudioTrack: !!originalAudioTrack,
+      originalAudioTrackId: originalAudioTrack?.id,
+      originalAudioTrackReadyState: originalAudioTrack?.readyState,
+      originalAudioTrackEnabled: originalAudioTrack?.enabled,
+      originalAudioTrackMuted: originalAudioTrack?.muted,
+      originalAudioTrackLabel: originalAudioTrack?.label,
+      isTrackLive: this.isTrackLive(originalAudioTrack),
+      cameraDeviceId
+    });
     if (!this.isTrackLive(originalAudioTrack)) {
+      logger.warn("[SourceSwitchManager] Original audio track is not live, cannot reuse", {
+        originalAudioTrackId: originalAudioTrack?.id,
+        originalAudioTrackReadyState: originalAudioTrack?.readyState
+      });
       return null;
     }
     const videoConstraints = this.buildVideoConstraints(cameraDeviceId);
@@ -946,14 +1007,45 @@ class SourceSwitchManager {
       video: Object.keys(videoConstraints).length > 0 ? videoConstraints : true,
       audio: false
     };
+    logger.debug("[SourceSwitchManager] Requesting new video stream", {
+      constraints,
+      cameraDeviceId
+    });
     const newStream = await navigator.mediaDevices.getUserMedia(constraints);
     const videoTrack = newStream.getVideoTracks()[0];
     this.validateTrack(videoTrack, "video", newStream);
+    logger.debug("[SourceSwitchManager] New video stream obtained", {
+      newStreamId: newStream.id,
+      videoTrackId: videoTrack.id,
+      videoTrackReadyState: videoTrack.readyState,
+      newStreamAudioTracksCount: newStream.getAudioTracks().length
+    });
     const combinedTracks = [videoTrack];
-    combinedTracks.push(originalAudioTrack);
+    if (originalAudioTrack) {
+      combinedTracks.push(originalAudioTrack);
+    }
+    logger.debug("[SourceSwitchManager] Creating combined stream with original audio", {
+      videoTrackId: videoTrack.id,
+      audioTrackId: originalAudioTrack?.id,
+      audioTrackReadyState: originalAudioTrack?.readyState,
+      audioTrackEnabled: originalAudioTrack?.enabled,
+      audioTrackMuted: originalAudioTrack?.muted,
+      combinedTracksCount: combinedTracks.length
+    });
     const combinedStream = new MediaStream(combinedTracks);
     this.stopLiveTracks(newStream.getAudioTracks());
+    const previousOriginalCameraStreamId = this.originalCameraStream?.id;
     this.originalCameraStream = combinedStream;
+    logger.debug("[SourceSwitchManager] Combined stream created and assigned", {
+      combinedStreamId: combinedStream.id,
+      previousOriginalCameraStreamId,
+      newOriginalCameraStreamId: this.originalCameraStream.id,
+      combinedStreamVideoTracksCount: combinedStream.getVideoTracks().length,
+      combinedStreamAudioTracksCount: combinedStream.getAudioTracks().length,
+      combinedStreamAudioTrackId: combinedStream.getAudioTracks()[0]?.id,
+      combinedStreamAudioTrackReadyState: combinedStream.getAudioTracks()[0]?.readyState,
+      audioTrackStillSame: combinedStream.getAudioTracks()[0] === originalAudioTrack
+    });
     return combinedStream;
   }
   async createCameraStreamWithNewAudio(cameraDeviceId) {
@@ -999,7 +1091,7 @@ class SourceSwitchManager {
       }
       return stream;
     }
-    if (this.originalCameraStream) {
+    if (!isRecording && this.originalCameraStream) {
       this.originalCameraStream = null;
     }
     const managerStream = this.streamManager.getStream();
@@ -1092,28 +1184,88 @@ class SourceSwitchManager {
     }
     logger.debug("[SourceSwitchManager] handleScreenShareStop invoked", {
       currentSourceType: this.currentSourceType,
-      hasScreenShareStream: !!this.screenShareStream
+      hasScreenShareStream: !!this.screenShareStream,
+      screenShareStreamId: this.screenShareStream?.id,
+      hasOriginalCameraStream: !!this.originalCameraStream,
+      originalCameraStreamId: this.originalCameraStream?.id
     });
     const screenShareStreamToStop = this.screenShareStream;
     const currentStream = this.streamManager.getStream();
+    logger.debug("[SourceSwitchManager] Current stream state before stop", {
+      currentStreamId: currentStream?.id,
+      currentStreamVideoTracksCount: currentStream?.getVideoTracks().length,
+      currentStreamAudioTracksCount: currentStream?.getAudioTracks().length,
+      currentStreamAudioTrackId: currentStream?.getAudioTracks()[0]?.id,
+      currentStreamAudioTrackReadyState: currentStream?.getAudioTracks()[0]?.readyState,
+      originalCameraStreamAudioTrackId: this.originalCameraStream?.getAudioTracks()[0]?.id,
+      originalCameraStreamAudioTrackReadyState: this.originalCameraStream?.getAudioTracks()[0]?.readyState
+    });
     if (screenShareStreamToStop) {
+      const screenShareAudioTracks = screenShareStreamToStop.getAudioTracks();
+      logger.debug("[SourceSwitchManager] Screen share stream audio tracks before stop", {
+        screenShareStreamId: screenShareStreamToStop.id,
+        screenShareAudioTracksCount: screenShareAudioTracks.length,
+        screenShareAudioTrackIds: screenShareAudioTracks.map((t) => ({
+          id: t.id,
+          readyState: t.readyState,
+          enabled: t.enabled
+        }))
+      });
       this.removeScreenShareTrackHandler(screenShareStreamToStop);
       this.stopScreenShareStreamTracks(screenShareStreamToStop);
       this.stopDisplayTracks(screenShareStreamToStop);
       this.screenShareStream = null;
       await this.waitForTracksToEnd(SCREEN_SHARE_TRANSITION_DELAY);
+      logger.debug("[SourceSwitchManager] Screen share stream stopped", {
+        screenShareAudioTracksAfterStop: screenShareAudioTracks.map((t) => ({
+          id: t.id,
+          readyState: t.readyState
+        }))
+      });
     }
     if (currentStream) {
+      const currentStreamAudioTracks = currentStream.getAudioTracks();
+      logger.debug("[SourceSwitchManager] Current stream audio tracks before video stop", {
+        currentStreamId: currentStream.id,
+        currentStreamAudioTracksCount: currentStreamAudioTracks.length,
+        currentStreamAudioTrackIds: currentStreamAudioTracks.map((t) => ({
+          id: t.id,
+          readyState: t.readyState,
+          enabled: t.enabled
+        }))
+      });
       this.stopStreamVideoTracks(currentStream);
       this.stopDisplayTracks(currentStream);
+      logger.debug("[SourceSwitchManager] Current stream audio tracks after video stop", {
+        currentStreamId: currentStream.id,
+        currentStreamAudioTracksCount: currentStream.getAudioTracks().length,
+        currentStreamAudioTrackIds: currentStream.getAudioTracks().map((t) => ({
+          id: t.id,
+          readyState: t.readyState,
+          enabled: t.enabled
+        }))
+      });
     }
+    logger.debug("[SourceSwitchManager] Original camera stream state before source change", {
+      hasOriginalCameraStream: !!this.originalCameraStream,
+      originalCameraStreamId: this.originalCameraStream?.id,
+      originalCameraStreamAudioTracksCount: this.originalCameraStream?.getAudioTracks().length,
+      originalCameraStreamAudioTrackId: this.originalCameraStream?.getAudioTracks()[0]?.id,
+      originalCameraStreamAudioTrackReadyState: this.originalCameraStream?.getAudioTracks()[0]?.readyState,
+      originalCameraStreamAudioTrackEnabled: this.originalCameraStream?.getAudioTracks()[0]?.enabled
+    });
     this.currentSourceType = "camera";
     if (this.callbacks.onSourceChange) {
       await this.callbacks.onSourceChange(this.currentSourceType);
     }
     logger.debug("[SourceSwitchManager] handleScreenShareStop completed", {
       hasScreenShareStream: !!this.screenShareStream,
-      currentSourceType: this.currentSourceType
+      currentSourceType: this.currentSourceType,
+      hasOriginalCameraStream: !!this.originalCameraStream,
+      originalCameraStreamId: this.originalCameraStream?.id,
+      originalCameraStreamAudioTracksCount: this.originalCameraStream?.getAudioTracks().length,
+      originalCameraStreamAudioTrackId: this.originalCameraStream?.getAudioTracks()[0]?.id,
+      originalCameraStreamAudioTrackReadyState: this.originalCameraStream?.getAudioTracks()[0]?.readyState
     });
   }
   async applyCameraStream(newStream, isRecording) {
@@ -1547,6 +1699,135 @@ function formatTime(totalSeconds) {
   return `${minutes.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
 }
 
+// src/core/utils/tab-visibility-tracker.ts
+class TabVisibilityTracker {
+  recordingStartTime = 0;
+  totalPausedTime = 0;
+  pauseStartTime = null;
+  intervals = [];
+  currentIntervalStart = null;
+  isTracking = false;
+  visibilityChangeHandler;
+  blurHandler;
+  focusHandler;
+  constructor() {
+    this.visibilityChangeHandler = this.handleVisibilityChange.bind(this);
+    this.blurHandler = this.handleBlur.bind(this);
+    this.focusHandler = this.handleFocus.bind(this);
+  }
+  start(recordingStartTime) {
+    if (this.isTracking) {
+      return;
+    }
+    this.recordingStartTime = recordingStartTime;
+    this.totalPausedTime = 0;
+    this.pauseStartTime = null;
+    this.intervals = [];
+    this.currentIntervalStart = null;
+    this.isTracking = true;
+    if (typeof document !== "undefined") {
+      document.addEventListener("visibilitychange", this.visibilityChangeHandler);
+    }
+    if (typeof window !== "undefined") {
+      window.addEventListener("blur", this.blurHandler);
+      window.addEventListener("focus", this.focusHandler);
+    }
+    this.checkInitialState();
+  }
+  pause() {
+    if (!this.isTracking || this.pauseStartTime !== null) {
+      return;
+    }
+    this.pauseStartTime = Date.now();
+    this.endCurrentIntervalIfActive();
+  }
+  resume() {
+    if (!this.isTracking || this.pauseStartTime === null) {
+      return;
+    }
+    const pausedDuration = Date.now() - this.pauseStartTime;
+    this.totalPausedTime += pausedDuration;
+    this.pauseStartTime = null;
+  }
+  getIntervals() {
+    this.endCurrentIntervalIfActive();
+    return this.intervals.map((interval) => ({
+      start: this.normalizeTimestamp(interval.start),
+      end: this.normalizeTimestamp(interval.end)
+    }));
+  }
+  reset() {
+    this.intervals = [];
+    this.currentIntervalStart = null;
+    this.totalPausedTime = 0;
+    this.pauseStartTime = null;
+  }
+  cleanup() {
+    this.isTracking = false;
+    this.endCurrentIntervalIfActive();
+    if (typeof document !== "undefined") {
+      document.removeEventListener("visibilitychange", this.visibilityChangeHandler);
+    }
+    if (typeof window !== "undefined") {
+      window.removeEventListener("blur", this.blurHandler);
+      window.removeEventListener("focus", this.focusHandler);
+    }
+    this.reset();
+  }
+  checkInitialState() {
+    if (typeof document === "undefined") {
+      return;
+    }
+    if (document.visibilityState === "hidden") {
+      this.startInterval();
+    }
+  }
+  handleVisibilityChange() {
+    if (typeof document === "undefined") {
+      return;
+    }
+    if (document.visibilityState === "hidden") {
+      this.startInterval();
+    } else {
+      this.endCurrentIntervalIfActive();
+    }
+  }
+  handleBlur() {
+    this.startInterval();
+  }
+  handleFocus() {
+    this.endCurrentIntervalIfActive();
+  }
+  startInterval() {
+    if (this.currentIntervalStart !== null || !this.isTracking) {
+      return;
+    }
+    if (this.pauseStartTime !== null) {
+      return;
+    }
+    this.currentIntervalStart = Date.now();
+  }
+  endCurrentIntervalIfActive() {
+    if (this.currentIntervalStart === null) {
+      return;
+    }
+    const endTime = Date.now();
+    const startTime = this.currentIntervalStart;
+    if (endTime > startTime) {
+      this.intervals.push({
+        start: startTime,
+        end: endTime
+      });
+    }
+    this.currentIntervalStart = null;
+  }
+  normalizeTimestamp(absoluteTime) {
+    const elapsed = absoluteTime - this.recordingStartTime;
+    const normalized = (elapsed - this.totalPausedTime) / 1000;
+    return Math.max(0, normalized);
+  }
+}
+
 // src/core/utils/validation.ts
 function requireNonNull(value, message) {
   if (value === null || value === undefined) {
@@ -1596,6 +1877,10 @@ class StreamRecordingState {
   totalPausedTime = 0;
   streamProcessor = null;
   bufferSizeUpdateInterval = null;
+  tabVisibilityTracker = null;
+  visibilityChangeHandler = null;
+  blurHandler = null;
+  focusHandler = null;
   streamManager;
   constructor(streamManager) {
     this.streamManager = streamManager;
@@ -1615,7 +1900,7 @@ class StreamRecordingState {
     }
     return this.streamManager.getAudioStreamForAnalysis();
   }
-  async startRecording(processor, config) {
+  async startRecording(processor, config, enableTabVisibilityOverlay, tabVisibilityOverlayText) {
     const mediaStream = this.streamManager.getStream();
     logger.debug("[StreamRecordingState] startRecording called", {
       hasMediaStream: !!mediaStream,
@@ -1646,10 +1931,29 @@ class StreamRecordingState {
       const formatted = formatFileSize(size);
       this.streamManager.emit("recordingbufferupdate", { size, formatted });
     }, TIMER_INTERVAL);
+    this.resetRecordingState();
+    const overlayConfig = enableTabVisibilityOverlay && tabVisibilityOverlayText ? {
+      enabled: true,
+      text: tabVisibilityOverlayText,
+      recordingStartTime: this.recordingStartTime
+    } : undefined;
+    logger.debug("[StreamRecordingState] Overlay config", {
+      enableTabVisibilityOverlay,
+      hasOverlayText: !!tabVisibilityOverlayText,
+      overlayText: tabVisibilityOverlayText,
+      overlayConfig
+    });
     logger.debug("[StreamRecordingState] Starting processing");
-    await processor.startProcessing(mediaStream, config);
+    await processor.startProcessing(mediaStream, config, overlayConfig);
     logger.info("[StreamRecordingState] Processing started and worker ready");
-    this.resetRecordingState();
+    if (enableTabVisibilityOverlay) {
+      logger.debug("[StreamRecordingState] Setting up tab visibility tracking", {
+        recordingStartTime: this.recordingStartTime
+      });
+      this.tabVisibilityTracker = new TabVisibilityTracker;
+      this.tabVisibilityTracker.start(this.recordingStartTime);
+      this.setupVisibilityUpdates(processor);
+    }
     this.streamManager.setState("recording");
     this.streamManager.emit("recordingstart", { recorder: null });
     this.startRecordingTimer();
@@ -1666,6 +1970,19 @@ class StreamRecordingState {
     this.clearRecordingTimer();
     this.clearBufferSizeInterval();
     this.resetPauseState();
+    this.cleanupVisibilityUpdates();
+    let tabVisibilityIntervals = [];
+    if (this.tabVisibilityTracker) {
+      tabVisibilityIntervals = this.tabVisibilityTracker.getIntervals();
+      logger.debug("[StreamRecordingState] Tab visibility intervals collected", {
+        intervalsCount: tabVisibilityIntervals.length,
+        intervals: tabVisibilityIntervals
+      });
+      this.tabVisibilityTracker.cleanup();
+      this.tabVisibilityTracker = null;
+    } else {
+      logger.debug("[StreamRecordingState] No tab visibility tracker was active");
+    }
     logger.debug("[StreamRecordingState] Finalizing stream processor");
     const result = await this.streamProcessor.finalize();
     logger.info("[StreamRecordingState] Stream processor finalized", {
@@ -1679,13 +1996,19 @@ class StreamRecordingState {
     });
     this.streamProcessor = null;
     logger.debug("[StreamRecordingState] StreamProcessor cleared");
-    return result.blob;
+    return {
+      blob: result.blob,
+      tabVisibilityIntervals
+    };
   }
   pauseRecording() {
     this.clearRecordingTimer();
     if (this.pauseStartTime === null) {
       this.pauseStartTime = Date.now();
     }
+    if (this.tabVisibilityTracker) {
+      this.tabVisibilityTracker.pause();
+    }
     if (this.streamProcessor && this.isRecording()) {
       this.streamProcessor.pause();
     }
@@ -1696,6 +2019,9 @@ class StreamRecordingState {
       this.totalPausedTime += pausedDuration;
       this.pauseStartTime = null;
     }
+    if (this.tabVisibilityTracker) {
+      this.tabVisibilityTracker.resume();
+    }
     this.startRecordingTimer();
     if (this.streamProcessor && this.isRecording()) {
       this.streamProcessor.resume();
@@ -1778,7 +2104,7 @@ class StreamRecordingState {
     }
   }
   resetRecordingState() {
-    this.recordingStartTime = Date.now();
+    this.recordingStartTime = performance.now();
     this.totalPausedTime = 0;
     this.pauseStartTime = null;
   }
@@ -1786,11 +2112,72 @@ class StreamRecordingState {
     this.totalPausedTime = 0;
     this.pauseStartTime = null;
   }
+  setupVisibilityUpdates(processor) {
+    if (typeof document === "undefined" || typeof window === "undefined") {
+      logger.warn("[StreamRecordingState] Cannot setup visibility updates - document/window not available");
+      return;
+    }
+    this.visibilityChangeHandler = () => {
+      if (typeof document === "undefined") {
+        return;
+      }
+      const isHidden = document.visibilityState === "hidden";
+      const timestamp = performance.now();
+      logger.debug("[StreamRecordingState] Visibility change", {
+        isHidden,
+        timestamp,
+        visibilityState: document.visibilityState
+      });
+      processor.updateTabVisibility(isHidden, timestamp);
+    };
+    this.blurHandler = () => {
+      const timestamp = performance.now();
+      logger.debug("[StreamRecordingState] Window blur", { timestamp });
+      processor.updateTabVisibility(true, timestamp);
+    };
+    this.focusHandler = () => {
+      const timestamp = performance.now();
+      logger.debug("[StreamRecordingState] Window focus", { timestamp });
+      processor.updateTabVisibility(false, timestamp);
+    };
+    document.addEventListener("visibilitychange", this.visibilityChangeHandler);
+    window.addEventListener("blur", this.blurHandler);
+    window.addEventListener("focus", this.focusHandler);
+    const initialHidden = document.visibilityState === "hidden";
+    if (initialHidden) {
+      const timestamp = performance.now();
+      logger.debug("[StreamRecordingState] Initial state is hidden", {
+        timestamp
+      });
+      processor.updateTabVisibility(true, timestamp);
+    } else {
+      logger.debug("[StreamRecordingState] Initial state is visible");
+    }
+  }
+  cleanupVisibilityUpdates() {
+    if (this.visibilityChangeHandler && typeof document !== "undefined") {
+      document.removeEventListener("visibilitychange", this.visibilityChangeHandler);
+      this.visibilityChangeHandler = null;
+    }
+    if (this.blurHandler && typeof window !== "undefined") {
+      window.removeEventListener("blur", this.blurHandler);
+      this.blurHandler = null;
+    }
+    if (this.focusHandler && typeof window !== "undefined") {
+      window.removeEventListener("focus", this.focusHandler);
+      this.focusHandler = null;
+    }
+  }
   destroy() {
     if (this.streamProcessor) {
       this.streamProcessor.cancel().catch(() => {});
       this.streamProcessor = null;
     }
+    this.cleanupVisibilityUpdates();
+    if (this.tabVisibilityTracker) {
+      this.tabVisibilityTracker.cleanup();
+      this.tabVisibilityTracker = null;
+    }
     this.clearRecordingTimer();
     this.clearBufferSizeInterval();
   }
@@ -1855,8 +2242,8 @@ class CameraStreamManager {
   switchAudioDevice(deviceId) {
     return this.streamManager.switchAudioDevice(deviceId);
   }
-  async startRecording(processor, config) {
-    return await this.recordingState.startRecording(processor, config);
+  async startRecording(processor, config, enableTabVisibilityOverlay, tabVisibilityOverlayText) {
+    return await this.recordingState.startRecording(processor, config, enableTabVisibilityOverlay, tabVisibilityOverlayText);
   }
   async stopRecording() {
     return await this.recordingState.stopRecording();
@@ -9195,6 +9582,14 @@ class Output {
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
+// src/core/utils/error-handler.ts
+function extractErrorMessage(error) {
+  if (error instanceof Error) {
+    return error.message;
+  }
+  return String(error);
+}
+
 // src/core/utils/logger.ts
 function isDebugEnabled() {
   const globalAny = globalThis;
@@ -9290,8 +9685,35 @@ var logger = {
   }
 };
 
+// src/core/utils/validation.ts
+function requireNonNull(value, message) {
+  if (value === null || value === undefined) {
+    throw new Error(message);
+  }
+  return value;
+}
+function requireDefined(value, message) {
+  if (value === undefined) {
+    throw new Error(message);
+  }
+  return value;
+}
+function requireInitialized(value, componentName) {
+  if (value === null || value === undefined) {
+    throw new Error(\`\${componentName} is not initialized\`);
+  }
+  return value;
+}
+
 // src/core/processor/worker/recorder-worker.ts
 var CHUNK_SIZE = 16 * 1024 * 1024;
+var OVERLAY_BACKGROUND_OPACITY = 0.6;
+var OVERLAY_PADDING = 16;
+var OVERLAY_TEXT_COLOR = "#ffffff";
+var OVERLAY_FONT_SIZE = 16;
+var OVERLAY_FONT_FAMILY = "Arial, sans-serif";
+var OVERLAY_MIN_WIDTH = 200;
+var OVERLAY_MIN_HEIGHT = 50;
 
 class RecorderWorker {
   output = null;
@@ -9314,8 +9736,18 @@ class RecorderWorker {
   bufferUpdateInterval = null;
   pausedDuration = 0;
   pauseStartedAt = null;
+  overlayConfig = null;
+  overlayCanvas = null;
+  compositionCanvas = null;
+  compositionCtx = null;
+  hiddenIntervals = [];
+  currentHiddenIntervalStart = null;
+  recordingStartTime = 0;
+  pendingVisibilityUpdates = [];
+  isScreenCapture = false;
+  driftOffset = 0;
   constructor() {
-    self.addEventListener("message", this.handleMessage.bind(this));
+    self.addEventListener("message", this.handleMessage);
   }
   formatFileSize(bytes2) {
     if (bytes2 === 0) {
@@ -9327,59 +9759,78 @@ class RecorderWorker {
     const size = Math.round(bytes2 / base ** index * 100) / 100;
     return \`\${size} \${units[index]}\`;
   }
-  handleMessage(event) {
-    const message = event.data;
-    logger.debug("[RecorderWorker] Received message:", {
-      type: message.type,
-      hasVideoStream: message.type === "start" ? !!message.videoStream : false,
-      hasAudioStream: message.type === "start" ? !!message.audioStream : false
+  shouldIgnoreMessage() {
+    return this.isStopping || this.isFinalized;
+  }
+  handleAsyncOperation(operation, context) {
+    operation.catch((error) => {
+      logger.error(\`[RecorderWorker] Error in \${context}:\`, error);
+      this.sendError(error);
     });
-    switch (message.type) {
-      case "start":
-        if (this.isStopping || this.isFinalized) {
-          logger.debug("[RecorderWorker] start ignored (stopping/finalized)");
-          return;
-        }
-        logger.debug("[RecorderWorker] Starting recording", {
-          hasVideoStream: !!message.videoStream,
-          hasAudioStream: !!message.audioStream
-        });
-        this.handleStart(message.videoStream, message.audioStream, message.config).catch((error) => {
-          logger.error("[RecorderWorker] Error in handleStart:", error);
-          this.sendError(error);
-        });
-        break;
-      case "pause":
-        this.handlePause();
-        break;
-      case "resume":
-        this.handleResume();
-        break;
-      case "stop":
-        if (this.isStopping || this.isFinalized) {
-          logger.debug("[RecorderWorker] stop ignored (stopping/finalized)");
-          return;
-        }
-        this.handleStop().catch((error) => {
-          this.sendError(error);
-        });
-        break;
-      case "toggleMute":
-        this.handleToggleMute();
-        break;
-      case "switchSource":
-        this.handleSwitchSource(message.videoStream).catch((error) => {
-          this.sendError(error);
-        });
-        break;
-      case "updateFps":
-        this.handleUpdateFps(message.fps);
-        break;
-      default:
-        this.sendError(new Error(\`Unknown message type: \${message.type}\`));
-    }
   }
-  async handleStart(videoStream, audioStream, config) {
+  handleMessage = (event) => {
+    const message = event.data;
+    logger.debug("[RecorderWorker] Received message:", { type: message.type });
+    if (message.type === "start") {
+      if (this.shouldIgnoreMessage()) {
+        logger.debug("[RecorderWorker] start ignored (stopping/finalized)");
+        return;
+      }
+      this.handleAsyncOperation(this.handleStart(message.videoStream, message.audioStream, message.config, message.overlayConfig), "handleStart");
+      return;
+    }
+    if (message.type === "pause") {
+      this.handlePause();
+      return;
+    }
+    if (message.type === "resume") {
+      this.handleResume();
+      return;
+    }
+    if (message.type === "stop") {
+      if (this.shouldIgnoreMessage()) {
+        logger.debug("[RecorderWorker] stop ignored (stopping/finalized)");
+        return;
+      }
+      this.handleAsyncOperation(this.handleStop(), "handleStop");
+      return;
+    }
+    if (message.type === "toggleMute") {
+      this.handleToggleMute();
+      return;
+    }
+    if (message.type === "switchSource") {
+      this.handleAsyncOperation(this.handleSwitchSource(message.videoStream), "handleSwitchSource");
+      return;
+    }
+    if (message.type === "updateFps") {
+      this.handleUpdateFps(message.fps);
+      return;
+    }
+    if (message.type === "updateVisibility") {
+      this.handleUpdateVisibility(message.isHidden, message.timestamp);
+      return;
+    }
+    if (message.type === "updateSourceType") {
+      this.handleUpdateSourceType(message.isScreenCapture);
+      return;
+    }
+    this.sendError(new Error(\`Unknown message type: \${message.type}\`));
+  };
+  async handleStart(videoStream, audioStream, config, overlayConfig) {
+    requireDefined(config, "Transcode config is required");
+    if (config.width <= 0 || config.height <= 0) {
+      throw new Error("Video dimensions must be greater than zero");
+    }
+    if (config.fps <= 0) {
+      throw new Error("Frame rate must be greater than zero");
+    }
+    if (config.bitrate <= 0) {
+      throw new Error("Bitrate must be greater than zero");
+    }
+    if (config.keyFrameInterval <= 0) {
+      throw new Error("Key frame interval must be greater than zero");
+    }
     logger.debug("[RecorderWorker] handleStart called", {
       hasVideoStream: !!videoStream,
       hasAudioStream: !!audioStream,
@@ -9388,7 +9839,9 @@ class RecorderWorker {
         height: config.height,
         fps: config.fps,
         bitrate: config.bitrate
-      }
+      },
+      hasOverlayConfig: !!overlayConfig,
+      overlayConfig
     });
     this.isStopping = false;
     this.isFinalized = false;
@@ -9406,6 +9859,19 @@ class RecorderWorker {
     this.frameCount = 0;
     this.pausedDuration = 0;
     this.pauseStartedAt = null;
+    this.overlayConfig = overlayConfig ? { enabled: overlayConfig.enabled, text: overlayConfig.text } : null;
+    this.overlayCanvas = null;
+    this.hiddenIntervals = [];
+    this.currentHiddenIntervalStart = null;
+    this.recordingStartTime = overlayConfig?.recordingStartTime !== undefined ? overlayConfig.recordingStartTime / 1000 : performance.now() / 1000;
+    this.pendingVisibilityUpdates = [];
+    const logData = {
+      hasOverlayConfig: !!this.overlayConfig,
+      overlayEnabled: this.overlayConfig?.enabled,
+      overlayText: this.overlayConfig?.text,
+      recordingStartTime: this.recordingStartTime
+    };
+    logger.debug("[RecorderWorker] Overlay config initialized", logData);
     const writable = new WritableStream({
       write: (chunk) => {
         this.sendChunk(chunk.data, chunk.position);
@@ -9434,6 +9900,9 @@ class RecorderWorker {
       this.setupVideoProcessing(videoStream);
     }
     if (audioStream && config.audioBitrate && config.audioCodec) {
+      if (config.audioBitrate <= 0) {
+        throw new Error("Audio bitrate must be greater than zero");
+      }
       this.audioSource = new AudioSampleSource({
         codec: config.audioCodec,
         bitrate: config.audioBitrate
@@ -9484,50 +9953,260 @@ class RecorderWorker {
     if (pausedResult.done) {
       return false;
     }
-    pausedResult.value?.close();
+    if (pausedResult.value) {
+      pausedResult.value.close();
+    }
     return true;
   }
   calculateVideoFrameTimestamp(videoFrame) {
-    const rawTs = typeof videoFrame.timestamp === "number" ? videoFrame.timestamp / 1e6 : performance.now() / 1000;
+    requireDefined(this.frameRate, "Frame rate must be set");
+    if (this.frameRate <= 0) {
+      throw new Error("Frame rate must be greater than zero");
+    }
+    const rawTs = typeof videoFrame.timestamp === "number" && videoFrame.timestamp !== null ? videoFrame.timestamp / 1e6 : performance.now() / 1000;
     if (this.baseVideoTimestamp === null) {
       this.baseVideoTimestamp = rawTs;
+      const logData = {
+        baseVideoTimestamp: this.baseVideoTimestamp,
+        recordingStartTime: this.recordingStartTime,
+        difference: this.baseVideoTimestamp - this.recordingStartTime,
+        pendingUpdates: this.pendingVisibilityUpdates.length
+      };
+      logger.debug("[RecorderWorker] baseVideoTimestamp set", logData);
+      for (const update of this.pendingVisibilityUpdates) {
+        this.processVisibilityUpdate(update.isHidden, update.timestamp);
+      }
+      this.pendingVisibilityUpdates = [];
+    }
+    requireNonNull(this.baseVideoTimestamp, "Base video timestamp must be set");
+    if (this.frameCount === 0 && this.lastVideoTimestamp > 0) {
+      const originalBase = this.baseVideoTimestamp;
+      const offset = rawTs - originalBase;
+      this.baseVideoTimestamp = rawTs - this.lastVideoTimestamp;
+      const frameTimestamp2 = this.lastVideoTimestamp;
+      logger.debug("[RecorderWorker] First frame after source switch", {
+        rawTs,
+        originalBase,
+        offset,
+        adjustedBaseVideoTimestamp: this.baseVideoTimestamp,
+        continuationTimestamp: this.lastVideoTimestamp,
+        frameTimestamp: frameTimestamp2,
+        isScreenCapture: this.isScreenCapture
+      });
+      return frameTimestamp2;
     }
-    const normalizedTs = rawTs - (this.baseVideoTimestamp ?? rawTs) - this.pausedDuration;
-    const prevTs = this.lastVideoTimestamp || 0;
+    const normalizedTs = rawTs - this.baseVideoTimestamp - this.pausedDuration;
+    const prevTs = this.lastVideoTimestamp > 0 ? this.lastVideoTimestamp : 0;
     const frameTimestamp = normalizedTs >= prevTs ? normalizedTs : prevTs + 1 / this.frameRate;
+    if (frameTimestamp < 0) {
+      logger.warn("[RecorderWorker] Negative frame timestamp detected, clamping to zero", { frameTimestamp, normalizedTs, prevTs });
+      return 0;
+    }
     if (this.lastVideoTimestamp === 0) {
       this.lastVideoTimestamp = frameTimestamp;
     }
+    logger.debug("[RecorderWorker] Frame timestamp calculation", {
+      rawTs,
+      baseVideoTimestamp: this.baseVideoTimestamp,
+      normalizedTs,
+      prevTs,
+      frameTimestamp,
+      lastVideoTimestamp: this.lastVideoTimestamp,
+      isScreenCapture: this.isScreenCapture,
+      frameCount: this.frameCount
+    });
     return frameTimestamp;
   }
-  async processVideoFrame(videoFrame) {
-    if (!this.videoSource) {
+  createOverlayCanvas(text) {
+    requireDefined(text, "Overlay text is required");
+    const canvas = new OffscreenCanvas(1, 1);
+    const ctx = requireNonNull(canvas.getContext("2d"), "Failed to get OffscreenCanvas context");
+    ctx.font = \`\${OVERLAY_FONT_SIZE}px \${OVERLAY_FONT_FAMILY}\`;
+    const textMetrics = ctx.measureText(text);
+    const textWidth = textMetrics.width;
+    const textHeight = OVERLAY_FONT_SIZE;
+    const overlayWidth = Math.max(OVERLAY_MIN_WIDTH, textWidth + OVERLAY_PADDING * 2);
+    const overlayHeight = Math.max(OVERLAY_MIN_HEIGHT, textHeight + OVERLAY_PADDING * 2);
+    canvas.width = overlayWidth;
+    canvas.height = overlayHeight;
+    const r = 20;
+    const g = 20;
+    const b = 20;
+    const borderRadius = 50;
+    ctx.fillStyle = \`rgba(\${r}, \${g}, \${b}, \${OVERLAY_BACKGROUND_OPACITY})\`;
+    ctx.beginPath();
+    ctx.roundRect(0, 0, overlayWidth, overlayHeight, borderRadius);
+    ctx.fill();
+    ctx.fillStyle = OVERLAY_TEXT_COLOR;
+    ctx.font = \`\${OVERLAY_FONT_SIZE}px \${OVERLAY_FONT_FAMILY}\`;
+    ctx.textBaseline = "middle";
+    ctx.textAlign = "center";
+    const textX = overlayWidth / 2;
+    const textY = overlayHeight / 2;
+    ctx.fillText(text, textX, textY);
+    return canvas;
+  }
+  getOverlayPosition(overlayWidth, videoWidth) {
+    const padding = OVERLAY_PADDING;
+    return {
+      x: videoWidth - overlayWidth - padding,
+      y: padding
+    };
+  }
+  shouldApplyOverlay(timestamp) {
+    if (!this.overlayConfig?.enabled) {
+      return false;
+    }
+    if (this.isScreenCapture) {
+      return false;
+    }
+    const completedIntervalMatch = this.hiddenIntervals.some((interval) => timestamp >= interval.start && timestamp <= interval.end);
+    const currentIntervalMatch = this.currentHiddenIntervalStart !== null && timestamp >= this.currentHiddenIntervalStart;
+    const shouldApply = completedIntervalMatch || currentIntervalMatch;
+    if (this.frameCount % 90 === 0) {
+      logger.debug("[RecorderWorker] Overlay check", {
+        timestamp,
+        shouldApply,
+        frameCount: this.frameCount,
+        intervalsCount: this.hiddenIntervals.length
+      });
+    }
+    return shouldApply;
+  }
+  handleUpdateVisibility(isHidden, timestamp) {
+    if (this.baseVideoTimestamp === null) {
+      this.pendingVisibilityUpdates.push({ isHidden, timestamp });
       return;
     }
+    this.processVisibilityUpdate(isHidden, timestamp);
+  }
+  processVisibilityUpdate(isHidden, timestamp) {
+    const timestampSeconds = timestamp / 1000;
+    const normalizedTimestamp = timestampSeconds - this.recordingStartTime - this.pausedDuration;
+    if (isHidden) {
+      if (this.currentHiddenIntervalStart === null) {
+        this.currentHiddenIntervalStart = Math.max(0, normalizedTimestamp);
+        logger.debug("[RecorderWorker] Started hidden interval", {
+          start: this.currentHiddenIntervalStart
+        });
+      }
+    } else if (this.currentHiddenIntervalStart !== null) {
+      const endTimestamp = Math.max(0, normalizedTimestamp);
+      if (endTimestamp > this.currentHiddenIntervalStart) {
+        const interval = {
+          start: this.currentHiddenIntervalStart,
+          end: endTimestamp
+        };
+        this.hiddenIntervals.push(interval);
+        logger.debug("[RecorderWorker] Completed hidden interval", {
+          interval,
+          duration: endTimestamp - this.currentHiddenIntervalStart,
+          totalIntervals: this.hiddenIntervals.length
+        });
+      } else {
+        logger.warn("[RecorderWorker] Invalid interval (end <= start), discarding");
+      }
+      this.currentHiddenIntervalStart = null;
+    }
+  }
+  async processVideoFrame(videoFrame) {
+    const videoSource = requireInitialized(this.videoSource, "Video source");
+    const config = requireInitialized(this.config, "Transcode config");
     const frameTimestamp = this.calculateVideoFrameTimestamp(videoFrame);
+    requireDefined(this.frameRate, "Frame rate must be set");
+    if (this.frameRate <= 0) {
+      throw new Error("Frame rate must be greater than zero");
+    }
     const frameDuration = 1 / this.frameRate;
-    const sample = new VideoSample(videoFrame, {
-      timestamp: frameTimestamp,
+    let frameToProcess = videoFrame;
+    let imageBitmap = null;
+    if (this.shouldApplyOverlay(frameTimestamp)) {
+      const width = videoFrame.displayWidth;
+      const height = videoFrame.displayHeight;
+      if (width <= 0 || height <= 0) {
+        logger.warn("[RecorderWorker] Invalid video frame dimensions, skipping overlay", { width, height });
+      } else if (this.overlayConfig) {
+        if (!this.overlayCanvas) {
+          this.overlayCanvas = this.createOverlayCanvas(this.overlayConfig.text);
+          logger.debug("[RecorderWorker] Overlay canvas created", {
+            overlayWidth: this.overlayCanvas.width,
+            overlayHeight: this.overlayCanvas.height
+          });
+        }
+        if (this.overlayCanvas) {
+          if (!(this.compositionCanvas && this.compositionCtx) || this.compositionCanvas.width !== width || this.compositionCanvas.height !== height) {
+            this.compositionCanvas = new OffscreenCanvas(width, height);
+            this.compositionCtx = requireNonNull(this.compositionCanvas.getContext("2d"), "Failed to get composition canvas context");
+          }
+          requireNonNull(this.compositionCtx, "Composition context must be available");
+          this.compositionCtx.clearRect(0, 0, width, height);
+          this.compositionCtx.drawImage(videoFrame, 0, 0, width, height);
+          const position = this.getOverlayPosition(this.overlayCanvas.width, width);
+          this.compositionCtx.drawImage(this.overlayCanvas, position.x, position.y);
+          imageBitmap = this.compositionCanvas.transferToImageBitmap();
+          const frameInit = {};
+          if (typeof videoFrame.timestamp === "number" && videoFrame.timestamp !== null) {
+            frameInit.timestamp = videoFrame.timestamp;
+          }
+          if (typeof videoFrame.duration === "number" && videoFrame.duration !== null) {
+            frameInit.duration = videoFrame.duration;
+          }
+          frameToProcess = new VideoFrame(imageBitmap, frameInit);
+        }
+      }
+    }
+    const keyFrameInterval = config.keyFrameInterval > 0 ? config.keyFrameInterval : 5;
+    const isKeyFrame = this.frameCount % keyFrameInterval === 0;
+    const maxLead = 0.05;
+    const maxLag = 0.1;
+    const targetAudio = this.lastAudioTimestamp;
+    let adjustedTimestamp = frameTimestamp + this.driftOffset;
+    if (adjustedTimestamp - targetAudio > maxLead) {
+      adjustedTimestamp = targetAudio + maxLead;
+    } else if (targetAudio - adjustedTimestamp > maxLag) {
+      adjustedTimestamp = targetAudio - maxLag;
+    }
+    const monotonicTimestamp = this.lastVideoTimestamp + frameDuration;
+    const finalTimestamp = adjustedTimestamp >= monotonicTimestamp ? adjustedTimestamp : monotonicTimestamp;
+    this.driftOffset *= 0.5;
+    const sample = new VideoSample(frameToProcess, {
+      timestamp: finalTimestamp,
       duration: frameDuration
     });
-    const isKeyFrame = this.frameCount % (this.config?.keyFrameInterval || 5) === 0;
-    try {
-      await this.videoSource.add(sample, isKeyFrame ? { keyFrame: true } : undefined);
-      this.frameCount += 1;
-      this.lastVideoTimestamp = frameTimestamp;
-    } catch (error) {
-      const errorMessage = error instanceof Error ? error.message : String(error);
+    const addError = await videoSource.add(sample, isKeyFrame ? { keyFrame: true } : undefined).then(() => null).catch((error) => {
+      const errorMessage = extractErrorMessage(error);
       this.sendError(new Error(\`Failed to add video frame: \${errorMessage}\`));
-    } finally {
-      sample.close();
-      videoFrame.close();
+      return error;
+    });
+    sample.close();
+    if (!addError) {
+      this.frameCount += 1;
+      this.lastVideoTimestamp = finalTimestamp;
+      if (this.frameCount % 90 === 0 && this.audioProcessingActive) {
+        const avDrift = this.lastAudioTimestamp - this.lastVideoTimestamp;
+        logger.debug("[RecorderWorker] AV drift metrics", {
+          frameCount: this.frameCount,
+          lastAudioTimestamp: this.lastAudioTimestamp,
+          lastVideoTimestamp: this.lastVideoTimestamp,
+          avDrift,
+          isScreenCapture: this.isScreenCapture
+        });
+      }
     }
+    if (imageBitmap) {
+      imageBitmap.close();
+      imageBitmap = null;
+    }
+    if (frameToProcess !== videoFrame) {
+      frameToProcess.close();
+    }
+    videoFrame.close();
   }
   async processVideoFrames() {
     if (!(this.videoProcessor && this.videoSource)) {
       return;
     }
-    while (this.videoProcessingActive) {
+    while (this.videoProcessingActive && !this.isStopping) {
       if (this.isPaused) {
         const shouldContinue = await this.handlePausedVideoFrame();
         if (!shouldContinue) {
@@ -9543,15 +10222,30 @@ class RecorderWorker {
       if (!videoFrame) {
         continue;
       }
-      await this.processVideoFrame(videoFrame);
+      await this.processVideoFrame(videoFrame).catch((error) => {
+        const errorMessage = extractErrorMessage(error);
+        logger.error("[RecorderWorker] Error processing video frame", errorMessage);
+        videoFrame.close();
+      });
     }
   }
   setupAudioProcessing(audioStream) {
     if (!this.audioSource) {
+      logger.warn("[RecorderWorker] setupAudioProcessing called but audioSource is null");
       return;
     }
+    logger.debug("[RecorderWorker] setupAudioProcessing", {
+      hasAudioSource: !!this.audioSource,
+      hasAudioStream: !!audioStream,
+      audioProcessingActive: this.audioProcessingActive,
+      lastAudioTimestamp: this.lastAudioTimestamp
+    });
     this.audioProcessor = audioStream.getReader();
     this.audioProcessingActive = true;
+    logger.debug("[RecorderWorker] Audio processing started", {
+      hasAudioProcessor: !!this.audioProcessor,
+      audioProcessingActive: this.audioProcessingActive
+    });
     this.processAudioData();
   }
   handlePausedAudioData(audioData) {
@@ -9559,16 +10253,25 @@ class RecorderWorker {
   }
   createAudioBuffer(audioData) {
     const numberOfFrames = audioData.numberOfFrames;
+    if (numberOfFrames <= 0) {
+      throw new Error("Number of frames must be greater than zero");
+    }
     const numberOfChannels = audioData.numberOfChannels;
+    if (numberOfChannels <= 0) {
+      throw new Error("Number of channels must be greater than zero");
+    }
     const audioBuffer = new Float32Array(numberOfFrames * numberOfChannels);
     audioData.copyTo(audioBuffer, { planeIndex: 0 });
     return audioBuffer;
   }
   createAudioSample(audioData, audioBuffer) {
     const sampleRate = audioData.sampleRate;
+    if (sampleRate <= 0) {
+      throw new Error("Sample rate must be greater than zero");
+    }
     const numberOfChannels = audioData.numberOfChannels;
-    if (this.lastAudioTimestamp === 0) {
-      this.lastAudioTimestamp = 0;
+    if (numberOfChannels <= 0) {
+      throw new Error("Number of channels must be greater than zero");
     }
     const shouldWriteSilence = this.isMuted;
     return new AudioSample({
@@ -9580,37 +10283,73 @@ class RecorderWorker {
     });
   }
   async processAudioSample(audioData, audioSample) {
-    if (!this.audioSource) {
-      return;
-    }
+    const audioSource = requireInitialized(this.audioSource, "Audio source");
     const sampleRate = audioData.sampleRate;
+    if (sampleRate <= 0) {
+      throw new Error("Sample rate must be greater than zero");
+    }
     const numberOfFrames = audioData.numberOfFrames;
     const duration = numberOfFrames / sampleRate;
-    try {
-      await this.audioSource.add(audioSample);
-      this.lastAudioTimestamp += duration;
-    } catch (error) {
-      const errorMessage = error instanceof Error ? error.message : String(error);
+    await audioSource.add(audioSample).catch((error) => {
+      const errorMessage = extractErrorMessage(error);
       this.sendError(new Error(\`Failed to add audio sample: \${errorMessage}\`));
-    } finally {
-      audioSample.close();
-      audioData.close();
-    }
+    });
+    logger.debug("[RecorderWorker] Audio sample processed", {
+      lastAudioTimestamp: this.lastAudioTimestamp,
+      duration,
+      newLastAudioTimestamp: this.lastAudioTimestamp + duration,
+      sampleRate: audioData.sampleRate,
+      numberOfFrames: audioData.numberOfFrames
+    });
+    this.lastAudioTimestamp += duration;
+    audioSample.close();
+    audioData.close();
   }
   async processAudioData() {
     if (!(this.audioProcessor && this.audioSource)) {
+      logger.warn("[RecorderWorker] processAudioData called but processor or source is null", {
+        hasAudioProcessor: !!this.audioProcessor,
+        hasAudioSource: !!this.audioSource
+      });
       return;
     }
+    logger.debug("[RecorderWorker] processAudioData loop started", {
+      hasAudioProcessor: !!this.audioProcessor,
+      hasAudioSource: !!this.audioSource,
+      audioProcessingActive: this.audioProcessingActive,
+      isPaused: this.isPaused,
+      isMuted: this.isMuted,
+      lastAudioTimestamp: this.lastAudioTimestamp
+    });
+    let audioSampleCount = 0;
     while (this.audioProcessingActive) {
       const result = await this.audioProcessor.read();
       if (result.done) {
+        logger.debug("[RecorderWorker] Audio processor stream ended", {
+          audioSampleCount,
+          lastAudioTimestamp: this.lastAudioTimestamp,
+          audioProcessingActive: this.audioProcessingActive
+        });
         this.audioProcessingActive = false;
         break;
       }
       const audioData = result.value;
       if (!audioData) {
+        logger.warn("[RecorderWorker] Received null audioData from processor");
         continue;
       }
+      audioSampleCount += 1;
+      if (audioSampleCount % 100 === 0) {
+        logger.debug("[RecorderWorker] Processing audio sample", {
+          sampleCount: audioSampleCount,
+          numberOfFrames: audioData.numberOfFrames,
+          sampleRate: audioData.sampleRate,
+          numberOfChannels: audioData.numberOfChannels,
+          lastAudioTimestamp: this.lastAudioTimestamp,
+          isPaused: this.isPaused,
+          isMuted: this.isMuted
+        });
+      }
       if (this.isPaused) {
         this.handlePausedAudioData(audioData);
         continue;
@@ -9619,6 +10358,11 @@ class RecorderWorker {
       const audioSample = this.createAudioSample(audioData, audioBuffer);
       await this.processAudioSample(audioData, audioSample);
     }
+    logger.debug("[RecorderWorker] processAudioData loop ended", {
+      audioSampleCount,
+      lastAudioTimestamp: this.lastAudioTimestamp,
+      audioProcessingActive: this.audioProcessingActive
+    });
   }
   handlePause() {
     if (this.isPaused) {
@@ -9658,11 +10402,9 @@ class RecorderWorker {
       this.audioProcessor = null;
     }
     if (this.output) {
-      try {
-        await this.output.finalize();
-      } catch (error) {
+      await this.output.finalize().catch((error) => {
         logger.warn("[RecorderWorker] finalize failed (ignored, already finalized?)", error);
-      }
+      });
     }
     await this.cleanup();
     this.sendStateChange("stopped");
@@ -9672,6 +10414,9 @@ class RecorderWorker {
     this.isMuted = !this.isMuted;
   }
   handleUpdateFps(fps) {
+    if (fps <= 0) {
+      throw new Error("Frame rate must be greater than zero");
+    }
     logger.debug("[RecorderWorker] Updating FPS", {
       fps,
       previousFps: this.frameRate
@@ -9681,16 +10426,51 @@ class RecorderWorker {
       this.config.fps = fps;
     }
   }
+  handleUpdateSourceType(isScreenCapture) {
+    logger.debug("[RecorderWorker] Updating source type", {
+      isScreenCapture,
+      previousIsScreenCapture: this.isScreenCapture
+    });
+    this.isScreenCapture = isScreenCapture;
+  }
   async handleSwitchSource(videoStream) {
+    requireDefined(videoStream, "Video stream is required");
+    requireDefined(this.frameRate, "Frame rate must be set");
+    if (this.frameRate <= 0) {
+      throw new Error("Frame rate must be greater than zero");
+    }
     if (this.videoProcessor) {
       this.videoProcessingActive = false;
       await this.videoProcessor.cancel();
+      let drainResult = await this.videoProcessor.read().catch(() => ({ done: true }));
+      while (!drainResult.done) {
+        drainResult.value?.close();
+        drainResult = await this.videoProcessor.read().catch(() => ({ done: true }));
+      }
       this.videoProcessor = null;
     }
-    const continuationTimestamp = this.lastVideoTimestamp > 0 ? this.lastVideoTimestamp + 1 / this.frameRate : 0;
+    requireNonNull(this.baseVideoTimestamp, "Base video timestamp must be set for source switch");
+    const minFrameDuration = 1 / this.frameRate;
+    const rawDrift = this.lastAudioTimestamp - this.lastVideoTimestamp;
+    const maxDriftCorrection = 0.1;
+    this.driftOffset = Math.max(-maxDriftCorrection, Math.min(maxDriftCorrection, rawDrift));
+    const continuationTimestamp = Math.max(this.lastAudioTimestamp, this.lastVideoTimestamp) + minFrameDuration;
+    const previousVideoTimestamp = this.lastVideoTimestamp;
     this.lastVideoTimestamp = continuationTimestamp;
     this.frameCount = 0;
-    this.baseVideoTimestamp = null;
+    logger.debug("[RecorderWorker] handleSwitchSource - preserving baseVideoTimestamp", {
+      continuationTimestamp,
+      lastVideoTimestamp: this.lastVideoTimestamp,
+      frameRate: this.frameRate,
+      isScreenCapture: this.isScreenCapture,
+      baseVideoTimestamp: this.baseVideoTimestamp,
+      recordingStartTime: this.recordingStartTime,
+      lastAudioTimestamp: this.lastAudioTimestamp,
+      previousVideoTimestamp,
+      minFrameDuration,
+      rawDrift,
+      driftOffset: this.driftOffset
+    });
     this.setupVideoProcessing(videoStream);
   }
   async cleanup() {
@@ -9719,11 +10499,9 @@ class RecorderWorker {
     }
     if (this.output) {
       if (!this.isFinalized) {
-        try {
-          await this.output.cancel();
-        } catch (error) {
+        await this.output.cancel().catch((error) => {
           logger.warn("[RecorderWorker] cancel failed (ignored, possibly finalized)", error);
-        }
+        });
         this.isFinalized = true;
       }
       this.output = null;
@@ -9735,13 +10513,20 @@ class RecorderWorker {
     this.totalSize = 0;
     this.pausedDuration = 0;
     this.pauseStartedAt = null;
+    this.overlayCanvas = null;
+    this.overlayConfig = null;
+    this.hiddenIntervals = [];
+    this.currentHiddenIntervalStart = null;
+    this.recordingStartTime = 0;
+    this.pendingVisibilityUpdates = [];
+    this.isScreenCapture = false;
   }
   sendReady() {
     const response = { type: "ready" };
     self.postMessage(response);
   }
   sendError(error) {
-    const errorMessage = error instanceof Error ? error.message : String(error);
+    const errorMessage = extractErrorMessage(error);
     const response = {
       type: "error",
       error: errorMessage
@@ -9808,6 +10593,7 @@ class WorkerProcessor {
   isMuted = false;
   currentVideoTrack = null;
   isPaused = false;
+  overlayConfig = null;
   constructor() {
     this.setupWorker();
   }
@@ -9883,7 +10669,7 @@ class WorkerProcessor {
       this.onError(new Error(error.message || "Unknown worker error"));
     }
   }
-  async startProcessing(stream, config) {
+  async startProcessing(stream, config, overlayConfig) {
     if (!this.worker) {
       throw new Error("Worker not initialized");
     }
@@ -9895,10 +10681,11 @@ class WorkerProcessor {
     this.isPaused = false;
     this.chunks = [];
     this.totalSize = 0;
+    this.overlayConfig = overlayConfig || null;
     const format = config.format || "mp4";
     const audioCodec = config.audioCodec || getDefaultAudioCodecForFormat(format);
     const isScreenCapture = isScreenCaptureStream(stream);
-    const targetFps = isScreenCapture ? 15 : config.fps;
+    const targetFps = config.fps;
     logger.debug("[WorkerProcessor] Starting processing", {
       isScreenCapture,
       targetFps,
@@ -9950,7 +10737,8 @@ class WorkerProcessor {
       type: "start",
       videoStream,
       audioStream,
-      config: workerConfig
+      config: workerConfig,
+      overlayConfig: this.overlayConfig || undefined
     };
     const transferables = [];
     if (videoStream) {
@@ -10021,7 +10809,7 @@ class WorkerProcessor {
       return Promise.resolve();
     }
     const isScreenCapture = isScreenCaptureStream(newStream);
-    const targetFps = isScreenCapture ? 15 : 30;
+    const targetFps = 30;
     logger.debug("[WorkerProcessor] Source type detected", {
       isScreenCapture,
       targetFps
@@ -10031,6 +10819,11 @@ class WorkerProcessor {
       fps: targetFps
     };
     this.worker.postMessage(fpsUpdateMessage);
+    const sourceTypeMessage = {
+      type: "updateSourceType",
+      isScreenCapture
+    };
+    this.worker.postMessage(sourceTypeMessage);
     const originalTrack = videoTracks[0];
     this.stopCurrentVideoTrack();
     const videoTrack = this.cloneVideoTrack(originalTrack);
@@ -10126,6 +10919,43 @@ class WorkerProcessor {
   getMutedState() {
     return this.isMuted;
   }
+  updateTabVisibility(isHidden, timestamp) {
+    if (!(this.isWorkerActive() && this.worker)) {
+      logger.warn("[WorkerProcessor] Cannot update visibility - worker not active", {
+        isActive: this.isActive,
+        hasWorker: !!this.worker
+      });
+      return;
+    }
+    logger.debug("[WorkerProcessor] Sending visibility update to worker", {
+      isHidden,
+      timestamp,
+      timestampSeconds: timestamp / 1000
+    });
+    const message = {
+      type: "updateVisibility",
+      isHidden,
+      timestamp
+    };
+    this.worker.postMessage(message);
+  }
+  updateSourceType(isScreenCapture) {
+    if (!(this.isWorkerActive() && this.worker)) {
+      logger.warn("[WorkerProcessor] Cannot update source type - worker not active", {
+        isActive: this.isActive,
+        hasWorker: !!this.worker
+      });
+      return;
+    }
+    logger.debug("[WorkerProcessor] Sending source type update to worker", {
+      isScreenCapture
+    });
+    const sourceTypeMessage = {
+      type: "updateSourceType",
+      isScreenCapture
+    };
+    this.worker.postMessage(sourceTypeMessage);
+  }
   isPausedState() {
     return this.isPaused;
   }
@@ -10220,7 +11050,7 @@ class WorkerProcessor {
     this.totalSize = 0;
   }
   static isSupported() {
-    return typeof Worker !== "undefined" && typeof MediaStreamTrackProcessor !== "undefined" && typeof VideoFrame !== "undefined" && typeof AudioData !== "undefined";
+    return typeof Worker !== "undefined" && typeof MediaStreamTrackProcessor !== "undefined" && typeof VideoFrame !== "undefined" && typeof AudioData !== "undefined" && typeof OffscreenCanvas !== "undefined";
   }
 }
 
@@ -10241,7 +11071,7 @@ class StreamProcessor {
       throw new Error(`Failed to initialize worker: ${errorMessage}. Web Workers are required for video processing.`);
     }
   }
-  async startProcessing(stream, config) {
+  async startProcessing(stream, config, overlayConfig) {
     this.workerProcessor.setOnBufferUpdate((size, formatted) => {
       logger.debug("[StreamProcessor] Buffer update:", { size, formatted });
     });
@@ -10249,7 +11079,13 @@ class StreamProcessor {
       logger.error("[StreamProcessor] Worker error:", error);
     });
     this.currentVideoStream = stream;
-    await this.workerProcessor.startProcessing(stream, config);
+    await this.workerProcessor.startProcessing(stream, config, overlayConfig);
+  }
+  updateTabVisibility(isHidden, timestamp) {
+    this.workerProcessor.updateTabVisibility(isHidden, timestamp);
+  }
+  updateSourceType(isScreenCapture) {
+    this.workerProcessor.updateSourceType(isScreenCapture);
   }
   pause() {
     this.workerProcessor.pause();
@@ -10329,6 +11165,8 @@ class RecordingManager {
   callbacks;
   streamProcessor = null;
   originalCameraStream = null;
+  enableTabVisibilityOverlay = false;
+  tabVisibilityOverlayText;
   constructor(streamManager, callbacks) {
     this.streamManager = streamManager;
     this.callbacks = callbacks;
@@ -10339,6 +11177,10 @@ class RecordingManager {
   setMaxRecordingTime(maxTime) {
     this.maxRecordingTime = maxTime;
   }
+  setTabVisibilityOverlayConfig(enabled, text) {
+    this.enableTabVisibilityOverlay = enabled;
+    this.tabVisibilityOverlayText = text;
+  }
   getRecordingState() {
     return this.recordingState;
   }
@@ -10351,6 +11193,12 @@ class RecordingManager {
   getStreamProcessor() {
     return this.streamProcessor;
   }
+  updateSourceType(isScreenCapture) {
+    if (this.recordingState !== RECORDING_STATE_RECORDING || !this.streamProcessor) {
+      return;
+    }
+    this.streamProcessor.updateSourceType(isScreenCapture);
+  }
   setOriginalCameraStream(stream) {
     this.originalCameraStream = stream;
   }
@@ -10426,7 +11274,7 @@ class RecordingManager {
       return;
     }
     logger.debug("[RecordingManager] Starting recording with stream manager");
-    const recordingError = await this.streamManager.startRecording(this.streamProcessor, configResult.config).then(() => {
+    const recordingError = await this.streamManager.startRecording(this.streamProcessor, configResult.config, this.enableTabVisibilityOverlay, this.tabVisibilityOverlayText).then(() => {
       logger.info("[RecordingManager] Recording started successfully");
       return null;
     }).catch((error) => {
@@ -10459,14 +11307,15 @@ class RecordingManager {
       this.resetPauseState();
       this.callbacks.onStopAudioTracking();
       logger.debug("[RecordingManager] Stopping recording in stream manager");
-      const blob = await this.streamManager.stopRecording();
-      logger.info("[RecordingManager] Recording stopped, blob size:", blob.size);
+      const stopResult = await this.streamManager.stopRecording();
+      const finalBlob = stopResult.blob;
+      logger.info("[RecordingManager] Recording stopped, blob size:", finalBlob.size);
       this.recordingState = RECORDING_STATE_IDLE;
       this.callbacks.onStateChange(this.recordingState);
       this.recordingSeconds = 0;
       this.streamProcessor = null;
-      this.callbacks.onRecordingComplete(blob);
-      return blob;
+      this.callbacks.onRecordingComplete(finalBlob);
+      return finalBlob;
     } catch (error) {
       this.handleError(error);
       this.recordingState = RECORDING_STATE_IDLE;
@@ -10583,6 +11432,8 @@ class RecorderController {
   callbacks;
   uploadQueueManager = null;
   isInitialized = false;
+  enableTabVisibilityOverlay = false;
+  tabVisibilityOverlayText;
   constructor(callbacks = {}) {
     this.callbacks = callbacks;
     this.streamManager = new CameraStreamManager;
@@ -10630,6 +11481,13 @@ class RecorderController {
     if (config.maxRecordingTime !== undefined) {
       this.recordingManager.setMaxRecordingTime(config.maxRecordingTime);
     }
+    if (config.enableTabVisibilityOverlay !== undefined) {
+      this.enableTabVisibilityOverlay = config.enableTabVisibilityOverlay;
+    }
+    if (config.tabVisibilityOverlayText !== undefined) {
+      this.tabVisibilityOverlayText = config.tabVisibilityOverlayText;
+    }
+    this.recordingManager.setTabVisibilityOverlayConfig(this.enableTabVisibilityOverlay, this.tabVisibilityOverlayText);
     const onStorageCleanupError = this.callbacks.onStorageCleanupError ?? NOOP_STORAGE_CLEANUP_ERROR;
     await this.storageManager.initialize(onStorageCleanupError);
     const storageService = this.storageManager.getStorageService();
@@ -10673,6 +11531,12 @@ class RecorderController {
     });
     return blob;
   }
+  getTabVisibilityOverlayConfig() {
+    return {
+      enabled: this.enableTabVisibilityOverlay,
+      text: this.tabVisibilityOverlayText
+    };
+  }
   pauseRecording() {
     this.recordingManager.pauseRecording();
   }
@@ -10798,6 +11662,16 @@ class RecorderController {
       onError: sourceSwitch?.onError,
       onTransitionStart: sourceSwitch?.onTransitionStart,
       onTransitionEnd: sourceSwitch?.onTransitionEnd,
+      onScreenSelectionStart: () => {
+        if (this.isRecording()) {
+          this.recordingManager.updateSourceType(true);
+        }
+      },
+      onScreenSelectionEnd: () => {
+        if (this.isRecording()) {
+          this.recordingManager.updateSourceType(false);
+        }
+      },
       getSelectedCameraDeviceId: () => this.deviceManager.getSelectedCameraDeviceId(),
       getSelectedMicDeviceId: () => this.deviceManager.getSelectedMicDeviceId()
     };
@@ -11065,7 +11939,9 @@ class VidtreoRecorder {
       enableSourceSwitching: this.config.enableSourceSwitching,
       enableMute: this.config.enableMute,
       enablePause: this.config.enablePause,
-      enableDeviceChange: this.config.enableDeviceChange
+      enableDeviceChange: this.config.enableDeviceChange,
+      enableTabVisibilityOverlay: this.config.enableTabVisibilityOverlay,
+      tabVisibilityOverlayText: this.config.tabVisibilityOverlayText
     };
     await this.controller.initialize(recorderConfig);
     this.isInitialized = true;