From 0727b61de73dd83dffc5c2576c0af016afd6376d Mon Sep 17 00:00:00 2001
From: Prayas Lashkari <prayas.lashkari98@gmail.com>
Date: Sun, 15 Mar 2026 02:07:39 -0400
Subject: [PATCH 01/14] feat: add restart recording functionality in
 LaunchWindow and useScreenRecorder

---
 src/components/launch/LaunchWindow.tsx | 24 +++++++++++++++++++++++-
 src/hooks/useScreenRecorder.ts         | 15 +++++++++++++++
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/src/components/launch/LaunchWindow.tsx b/src/components/launch/LaunchWindow.tsx
index b456dd64..ef3c3b3a 100644
--- a/src/components/launch/LaunchWindow.tsx
+++ b/src/components/launch/LaunchWindow.tsx
@@ -4,7 +4,15 @@ import { BsRecordCircle } from "react-icons/bs";
 import { FaRegStopCircle } from "react-icons/fa";
 import { FaFolderOpen } from "react-icons/fa6";
 import { FiMinus, FiX } from "react-icons/fi";
-import { MdMic, MdMicOff, MdMonitor, MdVideoFile, MdVolumeOff, MdVolumeUp } from "react-icons/md";
+import {
+	MdMic,
+	MdMicOff,
+	MdMonitor,
+	MdRestartAlt,
+	MdVideoFile,
+	MdVolumeOff,
+	MdVolumeUp,
+} from "react-icons/md";
 import { RxDragHandleDots2 } from "react-icons/rx";
 import { useAudioLevelMeter } from "../../hooks/useAudioLevelMeter";
 import { useMicrophoneDevices } from "../../hooks/useMicrophoneDevices";
@@ -24,6 +32,7 @@ const ICON_CONFIG = {
 	micOn: { icon: MdMic, size: ICON_SIZE },
 	micOff: { icon: MdMicOff, size: ICON_SIZE },
 	stop: { icon: FaRegStopCircle, size: ICON_SIZE },
+	restart: { icon: MdRestartAlt, size: ICON_SIZE },
 	record: { icon: BsRecordCircle, size: ICON_SIZE },
 	videoFile: { icon: MdVideoFile, size: ICON_SIZE },
 	folder: { icon: FaFolderOpen, size: ICON_SIZE },
@@ -51,6 +60,7 @@ export function LaunchWindow() {
 	const {
 		recording,
 		toggleRecording,
+		restartRecording,
 		microphoneEnabled,
 		setMicrophoneEnabled,
 		microphoneDeviceId,
@@ -256,6 +266,18 @@ export function LaunchWindow() {
 						)}
 					</button>
 
+					{/* Restart recording */}
+					{recording && (
+						<Tooltip content="Restart recording">
+							<button
+								className={`${hudIconBtnClasses} ${styles.electronNoDrag}`}
+								onClick={restartRecording}
+							>
+								{getIcon("restart", "text-white/60")}
+							</button>
+						</Tooltip>
+					)}
+
 					{/* Open video file */}
 					<Tooltip content="Open video file">
 						<button
diff --git a/src/hooks/useScreenRecorder.ts b/src/hooks/useScreenRecorder.ts
index 2ac2e3b0..dbe91528 100644
--- a/src/hooks/useScreenRecorder.ts
+++ b/src/hooks/useScreenRecorder.ts
@@ -41,6 +41,7 @@ const MIC_GAIN_BOOST = 1.4;
 type UseScreenRecorderReturn = {
 	recording: boolean;
 	toggleRecording: () => void;
+	restartRecording: () => void;
 	microphoneEnabled: boolean;
 	setMicrophoneEnabled: (enabled: boolean) => void;
 	microphoneDeviceId: string | undefined;
@@ -61,6 +62,7 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 	const mixingContext = useRef<AudioContext | null>(null);
 	const chunks = useRef<Blob[]>([]);
 	const startTime = useRef<number>(0);
+	const discardRecording = useRef(false);
 
 	const selectMimeType = () => {
 		const preferred = [
@@ -301,6 +303,11 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 			};
 			recorder.onstop = async () => {
 				stream.current = null;
+				if (discardRecording.current) {
+					discardRecording.current = false;
+					chunks.current = [];
+					return;
+				}
 				if (chunks.current.length === 0) return;
 				const duration = Date.now() - startTime.current;
 				const recordedChunks = chunks.current;
@@ -370,9 +377,17 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 		recording ? stopRecording.current() : startRecording();
 	};
 
+	const restartRecording = () => {
+		if (!recording) return;
+		discardRecording.current = true;
+		stopRecording.current();
+		startRecording();
+	};
+
 	return {
 		recording,
 		toggleRecording,
+		restartRecording,
 		microphoneEnabled,
 		setMicrophoneEnabled,
 		microphoneDeviceId,

From 119c3acb18eb1c3deda4748f1564e1c7914ce55a Mon Sep 17 00:00:00 2001
From: Prayas Lashkari <prayas.lashkari98@gmail.com>
Date: Tue, 17 Mar 2026 01:57:55 -0400
Subject: [PATCH 02/14] feat: implement async restart recording functionality
 to ensure proper session handling

---
 src/hooks/useScreenRecorder.ts | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/hooks/useScreenRecorder.ts b/src/hooks/useScreenRecorder.ts
index dbe91528..a69da598 100644
--- a/src/hooks/useScreenRecorder.ts
+++ b/src/hooks/useScreenRecorder.ts
@@ -377,11 +377,23 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 		recording ? stopRecording.current() : startRecording();
 	};
 
-	const restartRecording = () => {
+	const restartRecording = async () => {
 		if (!recording) return;
 		discardRecording.current = true;
+
+		// Wait for the old recorder's onstop to fully complete before starting
+		// a new session, so the discard logic doesn't race with new chunks.
+		const waitForStop = new Promise<void>((resolve) => {
+			if (mediaRecorder.current) {
+				mediaRecorder.current.addEventListener("stop", () => resolve(), { once: true });
+			} else {
+				resolve();
+			}
+		});
+
 		stopRecording.current();
-		startRecording();
+		await waitForStop;
+		await startRecording();
 	};
 
 	return {

From 9a5d94a1c80a8ffbac32b90d61215b7d9c6d9277 Mon Sep 17 00:00:00 2001
From: Prayas Lashkari <prayas.lashkari98@gmail.com>
Date: Tue, 17 Mar 2026 02:00:02 -0400
Subject: [PATCH 03/14] refactor: update VideoEditor layout and add config.json
 for setup and teardown

---
 src/components/video-editor/VideoEditor.tsx | 376 ++++++++++----------
 1 file changed, 184 insertions(+), 192 deletions(-)

diff --git a/src/components/video-editor/VideoEditor.tsx b/src/components/video-editor/VideoEditor.tsx
index b3bdb8da..685c4680 100644
--- a/src/components/video-editor/VideoEditor.tsx
+++ b/src/components/video-editor/VideoEditor.tsx
@@ -1222,201 +1222,193 @@ export default function VideoEditor() {
 
 			<div className="flex-1 p-5 gap-4 flex min-h-0 relative">
 				{/* Left Column - Video & Timeline */}
-				<div className="flex-[7] flex flex-col gap-3 min-w-0 h-full">
-					<PanelGroup direction="vertical" className="gap-3">
-						{/* Top section: video preview and controls */}
-						<Panel defaultSize={70} minSize={40}>
-							<div className="w-full h-full flex flex-col items-center justify-center bg-black/40 rounded-2xl border border-white/5 shadow-2xl overflow-hidden">
-								{/* Video preview */}
-								<div
-									className="w-full flex justify-center items-center"
-									style={{ flex: "1 1 auto", margin: "6px 0 0" }}
-								>
-									<div
-										className="relative"
-										style={{
-											width: "auto",
-											height: "100%",
-											aspectRatio:
-												aspectRatio === "native"
-													? getNativeAspectRatioValue(
-															videoPlaybackRef.current?.video?.videoWidth || 1920,
-															videoPlaybackRef.current?.video?.videoHeight || 1080,
-															cropRegion,
-														)
-													: getAspectRatioValue(aspectRatio),
-											maxWidth: "100%",
-											margin: "0 auto",
-											boxSizing: "border-box",
-										}}
-									>
-										<VideoPlayback
-											key={videoPath || "no-video"}
-											aspectRatio={aspectRatio}
-											ref={videoPlaybackRef}
-											videoPath={videoPath || ""}
-											onDurationChange={setDuration}
-											onTimeUpdate={setCurrentTime}
-											currentTime={currentTime}
-											onPlayStateChange={setIsPlaying}
-											onError={setError}
-											wallpaper={wallpaper}
-											zoomRegions={zoomRegions}
-											selectedZoomId={selectedZoomId}
-											onSelectZoom={handleSelectZoom}
-											onZoomFocusChange={handleZoomFocusChange}
-											onZoomFocusDragEnd={commitState}
-											isPlaying={isPlaying}
-											showShadow={shadowIntensity > 0}
-											shadowIntensity={shadowIntensity}
-											showBlur={showBlur}
-											motionBlurAmount={motionBlurAmount}
-											borderRadius={borderRadius}
-											padding={padding}
-											cropRegion={cropRegion}
-											trimRegions={trimRegions}
-											speedRegions={speedRegions}
-											annotationRegions={annotationRegions}
-											selectedAnnotationId={selectedAnnotationId}
-											onSelectAnnotation={handleSelectAnnotation}
-											onAnnotationPositionChange={handleAnnotationPositionChange}
-											onAnnotationSizeChange={handleAnnotationSizeChange}
-										/>
+				<PanelGroup direction="horizontal" className="gap-3">
+					<Panel>
+						<PanelGroup direction="vertical" className="gap-3">
+							{/* Top section: video preview and controls */}
+							<Panel defaultSize={70} maxSize={70} minSize={40}>
+								<div className="w-full h-full flex flex-col items-center justify-center bg-black/40 rounded-2xl border border-white/5 shadow-2xl overflow-hidden">
+									{/* Video preview */}
+									<div className="w-full flex justify-center items-center flex-auto mt-1.5">
+										<div
+											className="relative flex justify-center items-center w-auto h-full max-w-full box-border"
+											style={{
+												aspectRatio:
+													aspectRatio === "native"
+														? getNativeAspectRatioValue(
+																videoPlaybackRef.current?.video?.videoWidth || 1920,
+																videoPlaybackRef.current?.video?.videoHeight || 1080,
+																cropRegion,
+															)
+														: getAspectRatioValue(aspectRatio),
+											}}
+										>
+											<VideoPlayback
+												key={videoPath || "no-video"}
+												aspectRatio={aspectRatio}
+												ref={videoPlaybackRef}
+												videoPath={videoPath || ""}
+												onDurationChange={setDuration}
+												onTimeUpdate={setCurrentTime}
+												currentTime={currentTime}
+												onPlayStateChange={setIsPlaying}
+												onError={setError}
+												wallpaper={wallpaper}
+												zoomRegions={zoomRegions}
+												selectedZoomId={selectedZoomId}
+												onSelectZoom={handleSelectZoom}
+												onZoomFocusChange={handleZoomFocusChange}
+												onZoomFocusDragEnd={commitState}
+												isPlaying={isPlaying}
+												showShadow={shadowIntensity > 0}
+												shadowIntensity={shadowIntensity}
+												showBlur={showBlur}
+												motionBlurAmount={motionBlurAmount}
+												borderRadius={borderRadius}
+												padding={padding}
+												cropRegion={cropRegion}
+												trimRegions={trimRegions}
+												speedRegions={speedRegions}
+												annotationRegions={annotationRegions}
+												selectedAnnotationId={selectedAnnotationId}
+												onSelectAnnotation={handleSelectAnnotation}
+												onAnnotationPositionChange={handleAnnotationPositionChange}
+												onAnnotationSizeChange={handleAnnotationSizeChange}
+											/>
+										</div>
 									</div>
-								</div>
-								{/* Playback controls */}
-								<div
-									className="w-full flex justify-center items-center"
-									style={{
-										height: "48px",
-										flexShrink: 0,
-										padding: "6px 12px",
-										margin: "6px 0 6px 0",
-									}}
-								>
-									<div style={{ width: "100%", maxWidth: "700px" }}>
-										<PlaybackControls
-											isPlaying={isPlaying}
-											currentTime={currentTime}
-											duration={duration}
-											onTogglePlayPause={togglePlayPause}
-											onSeek={handleSeek}
-										/>
+									{/* Playback controls */}
+									<div className="w-full flex justify-center items-center h-12 flex-shrink-0 px-3 py-1.5 my-1.5">
+										<div className="w-full max-w-[700px]">
+											<PlaybackControls
+												isPlaying={isPlaying}
+												currentTime={currentTime}
+												duration={duration}
+												onTogglePlayPause={togglePlayPause}
+												onSeek={handleSeek}
+											/>
+										</div>
 									</div>
 								</div>
-							</div>
-						</Panel>
-
-						<PanelResizeHandle className="h-3 bg-[#09090b]/80 hover:bg-[#09090b] transition-colors rounded-full mx-4 flex items-center justify-center">
-							<div className="w-8 h-1 bg-white/20 rounded-full"></div>
-						</PanelResizeHandle>
-
-						{/* Timeline section */}
-						<Panel defaultSize={30} minSize={20}>
-							<div className="h-full bg-[#09090b] rounded-2xl border border-white/5 shadow-lg overflow-hidden flex flex-col">
-								<TimelineEditor
-									videoDuration={duration}
-									currentTime={currentTime}
-									onSeek={handleSeek}
-									cursorTelemetry={cursorTelemetry}
-									zoomRegions={zoomRegions}
-									onZoomAdded={handleZoomAdded}
-									onZoomSuggested={handleZoomSuggested}
-									onZoomSpanChange={handleZoomSpanChange}
-									onZoomDelete={handleZoomDelete}
-									selectedZoomId={selectedZoomId}
-									onSelectZoom={handleSelectZoom}
-									trimRegions={trimRegions}
-									onTrimAdded={handleTrimAdded}
-									onTrimSpanChange={handleTrimSpanChange}
-									onTrimDelete={handleTrimDelete}
-									selectedTrimId={selectedTrimId}
-									onSelectTrim={handleSelectTrim}
-									speedRegions={speedRegions}
-									onSpeedAdded={handleSpeedAdded}
-									onSpeedSpanChange={handleSpeedSpanChange}
-									onSpeedDelete={handleSpeedDelete}
-									selectedSpeedId={selectedSpeedId}
-									onSelectSpeed={handleSelectSpeed}
-									annotationRegions={annotationRegions}
-									onAnnotationAdded={handleAnnotationAdded}
-									onAnnotationSpanChange={handleAnnotationSpanChange}
-									onAnnotationDelete={handleAnnotationDelete}
-									selectedAnnotationId={selectedAnnotationId}
-									onSelectAnnotation={handleSelectAnnotation}
-									aspectRatio={aspectRatio}
-									onAspectRatioChange={(ar) => pushState({ aspectRatio: ar })}
-								/>
-							</div>
-						</Panel>
-					</PanelGroup>
-				</div>
-
-				{/* Right section: settings panel */}
-				<SettingsPanel
-					selected={wallpaper}
-					onWallpaperChange={(w) => pushState({ wallpaper: w })}
-					selectedZoomDepth={
-						selectedZoomId ? zoomRegions.find((z) => z.id === selectedZoomId)?.depth : null
-					}
-					onZoomDepthChange={(depth) => selectedZoomId && handleZoomDepthChange(depth)}
-					selectedZoomId={selectedZoomId}
-					onZoomDelete={handleZoomDelete}
-					selectedTrimId={selectedTrimId}
-					onTrimDelete={handleTrimDelete}
-					shadowIntensity={shadowIntensity}
-					onShadowChange={(v) => updateState({ shadowIntensity: v })}
-					onShadowCommit={commitState}
-					showBlur={showBlur}
-					onBlurChange={(v) => pushState({ showBlur: v })}
-					motionBlurAmount={motionBlurAmount}
-					onMotionBlurChange={(v) => updateState({ motionBlurAmount: v })}
-					onMotionBlurCommit={commitState}
-					borderRadius={borderRadius}
-					onBorderRadiusChange={(v) => updateState({ borderRadius: v })}
-					onBorderRadiusCommit={commitState}
-					padding={padding}
-					onPaddingChange={(v) => updateState({ padding: v })}
-					onPaddingCommit={commitState}
-					cropRegion={cropRegion}
-					onCropChange={(r) => pushState({ cropRegion: r })}
-					aspectRatio={aspectRatio}
-					videoElement={videoPlaybackRef.current?.video || null}
-					exportQuality={exportQuality}
-					onExportQualityChange={setExportQuality}
-					exportFormat={exportFormat}
-					onExportFormatChange={setExportFormat}
-					gifFrameRate={gifFrameRate}
-					onGifFrameRateChange={setGifFrameRate}
-					gifLoop={gifLoop}
-					onGifLoopChange={setGifLoop}
-					gifSizePreset={gifSizePreset}
-					onGifSizePresetChange={setGifSizePreset}
-					gifOutputDimensions={calculateOutputDimensions(
-						videoPlaybackRef.current?.video?.videoWidth || 1920,
-						videoPlaybackRef.current?.video?.videoHeight || 1080,
-						gifSizePreset,
-						GIF_SIZE_PRESETS,
-					)}
-					onExport={handleOpenExportDialog}
-					selectedAnnotationId={selectedAnnotationId}
-					annotationRegions={annotationRegions}
-					onAnnotationContentChange={handleAnnotationContentChange}
-					onAnnotationTypeChange={handleAnnotationTypeChange}
-					onAnnotationStyleChange={handleAnnotationStyleChange}
-					onAnnotationFigureDataChange={handleAnnotationFigureDataChange}
-					onAnnotationDelete={handleAnnotationDelete}
-					onSaveProject={handleSaveProject}
-					onLoadProject={handleLoadProject}
-					selectedSpeedId={selectedSpeedId}
-					selectedSpeedValue={
-						selectedSpeedId
-							? (speedRegions.find((r) => r.id === selectedSpeedId)?.speed ?? null)
-							: null
-					}
-					onSpeedChange={handleSpeedChange}
-					onSpeedDelete={handleSpeedDelete}
-				/>
+							</Panel>
+
+							<PanelResizeHandle className="bg-[#09090b]/80 hover:bg-[#09090b] transition-colors rounded-full flex items-center justify-center">
+								<div className="w-8 h-1 bg-white/20 rounded-full"></div>
+							</PanelResizeHandle>
+
+							{/* Timeline section */}
+							<Panel defaultSize={30} maxSize={60} minSize={30}>
+								<div className="h-full bg-[#09090b] rounded-2xl border border-white/5 shadow-lg overflow-hidden flex flex-col">
+									<TimelineEditor
+										videoDuration={duration}
+										currentTime={currentTime}
+										onSeek={handleSeek}
+										cursorTelemetry={cursorTelemetry}
+										zoomRegions={zoomRegions}
+										onZoomAdded={handleZoomAdded}
+										onZoomSuggested={handleZoomSuggested}
+										onZoomSpanChange={handleZoomSpanChange}
+										onZoomDelete={handleZoomDelete}
+										selectedZoomId={selectedZoomId}
+										onSelectZoom={handleSelectZoom}
+										trimRegions={trimRegions}
+										onTrimAdded={handleTrimAdded}
+										onTrimSpanChange={handleTrimSpanChange}
+										onTrimDelete={handleTrimDelete}
+										selectedTrimId={selectedTrimId}
+										onSelectTrim={handleSelectTrim}
+										speedRegions={speedRegions}
+										onSpeedAdded={handleSpeedAdded}
+										onSpeedSpanChange={handleSpeedSpanChange}
+										onSpeedDelete={handleSpeedDelete}
+										selectedSpeedId={selectedSpeedId}
+										onSelectSpeed={handleSelectSpeed}
+										annotationRegions={annotationRegions}
+										onAnnotationAdded={handleAnnotationAdded}
+										onAnnotationSpanChange={handleAnnotationSpanChange}
+										onAnnotationDelete={handleAnnotationDelete}
+										selectedAnnotationId={selectedAnnotationId}
+										onSelectAnnotation={handleSelectAnnotation}
+										aspectRatio={aspectRatio}
+										onAspectRatioChange={(ar) => pushState({ aspectRatio: ar })}
+									/>
+								</div>
+							</Panel>
+						</PanelGroup>
+					</Panel>
+
+					<PanelResizeHandle className="h-full bg-[#09090b]/80 hover:bg-[#09090b] transition-colors rounded-full flex items-center justify-center">
+						<div className="w-1 h-8 bg-white/20 rounded-full"></div>
+					</PanelResizeHandle>
+
+					{/* Right section: settings panel */}
+					<Panel defaultSize={30} minSize={25} maxSize={50}>
+						<SettingsPanel
+							selected={wallpaper}
+							onWallpaperChange={(w) => pushState({ wallpaper: w })}
+							selectedZoomDepth={
+								selectedZoomId ? zoomRegions.find((z) => z.id === selectedZoomId)?.depth : null
+							}
+							onZoomDepthChange={(depth) => selectedZoomId && handleZoomDepthChange(depth)}
+							selectedZoomId={selectedZoomId}
+							onZoomDelete={handleZoomDelete}
+							selectedTrimId={selectedTrimId}
+							onTrimDelete={handleTrimDelete}
+							shadowIntensity={shadowIntensity}
+							onShadowChange={(v) => updateState({ shadowIntensity: v })}
+							onShadowCommit={commitState}
+							showBlur={showBlur}
+							onBlurChange={(v) => pushState({ showBlur: v })}
+							motionBlurAmount={motionBlurAmount}
+							onMotionBlurChange={(v) => updateState({ motionBlurAmount: v })}
+							onMotionBlurCommit={commitState}
+							borderRadius={borderRadius}
+							onBorderRadiusChange={(v) => updateState({ borderRadius: v })}
+							onBorderRadiusCommit={commitState}
+							padding={padding}
+							onPaddingChange={(v) => updateState({ padding: v })}
+							onPaddingCommit={commitState}
+							cropRegion={cropRegion}
+							onCropChange={(r) => pushState({ cropRegion: r })}
+							aspectRatio={aspectRatio}
+							videoElement={videoPlaybackRef.current?.video || null}
+							exportQuality={exportQuality}
+							onExportQualityChange={setExportQuality}
+							exportFormat={exportFormat}
+							onExportFormatChange={setExportFormat}
+							gifFrameRate={gifFrameRate}
+							onGifFrameRateChange={setGifFrameRate}
+							gifLoop={gifLoop}
+							onGifLoopChange={setGifLoop}
+							gifSizePreset={gifSizePreset}
+							onGifSizePresetChange={setGifSizePreset}
+							gifOutputDimensions={calculateOutputDimensions(
+								videoPlaybackRef.current?.video?.videoWidth || 1920,
+								videoPlaybackRef.current?.video?.videoHeight || 1080,
+								gifSizePreset,
+								GIF_SIZE_PRESETS,
+							)}
+							onExport={handleOpenExportDialog}
+							selectedAnnotationId={selectedAnnotationId}
+							annotationRegions={annotationRegions}
+							onAnnotationContentChange={handleAnnotationContentChange}
+							onAnnotationTypeChange={handleAnnotationTypeChange}
+							onAnnotationStyleChange={handleAnnotationStyleChange}
+							onAnnotationFigureDataChange={handleAnnotationFigureDataChange}
+							onAnnotationDelete={handleAnnotationDelete}
+							onSaveProject={handleSaveProject}
+							onLoadProject={handleLoadProject}
+							selectedSpeedId={selectedSpeedId}
+							selectedSpeedValue={
+								selectedSpeedId
+									? (speedRegions.find((r) => r.id === selectedSpeedId)?.speed ?? null)
+									: null
+							}
+							onSpeedChange={handleSpeedChange}
+							onSpeedDelete={handleSpeedDelete}
+						/>
+					</Panel>
+				</PanelGroup>
 			</div>
 
 			<Toaster theme="dark" className="pointer-events-auto" />

From 2fb5b3b5749a2235ff3e9baf996eaff9bb14d102 Mon Sep 17 00:00:00 2001
From: Marcus Schiesser <mail@marcusschiesser.de>
Date: Tue, 17 Mar 2026 19:09:34 +0800
Subject: [PATCH 04/14] Add webcam recording overlay support

---
 electron-builder.json5                        |  13 +-
 electron/electron-env.d.ts                    |  34 +-
 electron/ipc/handlers.ts                      | 161 ++++++++--
 electron/preload.ts                           |  10 +
 src/components/launch/LaunchWindow.tsx        |  25 +-
 src/components/video-editor/VideoEditor.tsx   |  84 ++++-
 src/components/video-editor/VideoPlayback.tsx | 118 ++++++-
 .../video-editor/projectPersistence.test.ts   |  57 ++++
 .../video-editor/projectPersistence.ts        |  28 +-
 src/hooks/useScreenRecorder.ts                | 302 +++++++++++-------
 src/lib/exporter/asyncVideoFrameQueue.ts      |  77 +++++
 src/lib/exporter/frameRenderer.ts             |  43 ++-
 src/lib/exporter/gifExporter.ts               |  52 ++-
 src/lib/exporter/videoExporter.ts             |  51 ++-
 src/lib/recordingSession.ts                   |  69 ++++
 src/lib/webcamOverlay.test.ts                 |  33 ++
 src/lib/webcamOverlay.ts                      |  45 +++
 src/vite-env.d.ts                             |  22 +-
 18 files changed, 1043 insertions(+), 181 deletions(-)
 create mode 100644 src/components/video-editor/projectPersistence.test.ts
 create mode 100644 src/lib/exporter/asyncVideoFrameQueue.ts
 create mode 100644 src/lib/recordingSession.ts
 create mode 100644 src/lib/webcamOverlay.test.ts
 create mode 100644 src/lib/webcamOverlay.ts

diff --git a/electron-builder.json5 b/electron-builder.json5
index 18127a99..a8f1dc13 100644
--- a/electron-builder.json5
+++ b/electron-builder.json5
@@ -37,12 +37,13 @@
     ],
     "icon": "icons/icons/mac/icon.icns",
     "artifactName": "${productName}-Mac-${arch}-${version}-Installer.${ext}",
-    "extendInfo": {
-      "NSAudioCaptureUsageDescription": "OpenScreen needs audio capture permission to record system audio.",
-      "NSMicrophoneUsageDescription": "OpenScreen needs microphone access to record voice audio.",
-      "NSCameraUseContinuityCameraDeviceType": true,
-      "com.apple.security.device.audio-input": true
-    }
+    "extendInfo": {
+      "NSAudioCaptureUsageDescription": "OpenScreen needs audio capture permission to record system audio.",
+      "NSMicrophoneUsageDescription": "OpenScreen needs microphone access to record voice audio.",
+      "NSCameraUsageDescription": "OpenScreen needs camera access to record webcam video.",
+      "NSCameraUseContinuityCameraDeviceType": true,
+      "com.apple.security.device.audio-input": true
+    }
   },
   "linux": {
     "target": [
diff --git a/electron/electron-env.d.ts b/electron/electron-env.d.ts
index f66af16a..17fd20fc 100644
--- a/electron/electron-env.d.ts
+++ b/electron/electron-env.d.ts
@@ -33,8 +33,28 @@ interface Window {
 		storeRecordedVideo: (
 			videoData: ArrayBuffer,
 			fileName: string,
-		) => Promise<{ success: boolean; path?: string; message?: string }>;
-		getRecordedVideoPath: () => Promise<{ success: boolean; path?: string; message?: string }>;
+		) => Promise<{
+			success: boolean;
+			path?: string;
+			session?: import("../src/lib/recordingSession").RecordingSession;
+			message?: string;
+			error?: string;
+		}>;
+		storeRecordedSession: (
+			payload: import("../src/lib/recordingSession").StoreRecordedSessionInput,
+		) => Promise<{
+			success: boolean;
+			path?: string;
+			session?: import("../src/lib/recordingSession").RecordingSession;
+			message?: string;
+			error?: string;
+		}>;
+		getRecordedVideoPath: () => Promise<{
+			success: boolean;
+			path?: string;
+			message?: string;
+			error?: string;
+		}>;
 		setRecordingState: (recording: boolean) => Promise<void>;
 		getCursorTelemetry: (videoPath?: string) => Promise<{
 			success: boolean;
@@ -50,7 +70,17 @@ interface Window {
 		) => Promise<{ success: boolean; path?: string; message?: string; canceled?: boolean }>;
 		openVideoFilePicker: () => Promise<{ success: boolean; path?: string; canceled?: boolean }>;
 		setCurrentVideoPath: (path: string) => Promise<{ success: boolean }>;
+		setCurrentRecordingSession: (
+			session: import("../src/lib/recordingSession").RecordingSession | null,
+		) => Promise<{
+			success: boolean;
+			session?: import("../src/lib/recordingSession").RecordingSession;
+		}>;
 		getCurrentVideoPath: () => Promise<{ success: boolean; path?: string }>;
+		getCurrentRecordingSession: () => Promise<{
+			success: boolean;
+			session?: import("../src/lib/recordingSession").RecordingSession;
+		}>;
 		readBinaryFile: (filePath: string) => Promise<{
 			success: boolean;
 			data?: ArrayBuffer;
diff --git a/electron/ipc/handlers.ts b/electron/ipc/handlers.ts
index 5665cd77..2a6c406a 100644
--- a/electron/ipc/handlers.ts
+++ b/electron/ipc/handlers.ts
@@ -2,10 +2,17 @@ import fs from "node:fs/promises";
 import path from "node:path";
 import { fileURLToPath, pathToFileURL } from "node:url";
 import { app, BrowserWindow, desktopCapturer, dialog, ipcMain, screen, shell } from "electron";
+import {
+	normalizeProjectMedia,
+	normalizeRecordingSession,
+	type RecordingSession,
+	type StoreRecordedSessionInput,
+} from "../../src/lib/recordingSession";
 import { RECORDINGS_DIR } from "../main";
 
 const PROJECT_FILE_EXTENSION = "openscreen";
 const SHORTCUTS_FILE = path.join(app.getPath("userData"), "shortcuts.json");
+const RECORDING_SESSION_SUFFIX = ".session.json";
 
 type SelectedSource = {
 	name: string;
@@ -14,6 +21,7 @@ type SelectedSource = {
 
 let selectedSource: SelectedSource | null = null;
 let currentProjectPath: string | null = null;
+let currentRecordingSession: RecordingSession | null = null;
 
 function normalizePath(filePath: string) {
 	return path.resolve(filePath);
@@ -47,6 +55,54 @@ function isTrustedProjectPath(filePath?: string | null) {
 	return normalizePath(filePath) === normalizePath(currentProjectPath);
 }
 
+function setCurrentRecordingSessionState(session: RecordingSession | null) {
+	currentRecordingSession = session;
+}
+
+async function storeRecordedSessionFiles(payload: StoreRecordedSessionInput) {
+	const createdAt =
+		typeof payload.createdAt === "number" && Number.isFinite(payload.createdAt)
+			? payload.createdAt
+			: Date.now();
+	const screenVideoPath = path.join(RECORDINGS_DIR, payload.screen.fileName);
+	await fs.writeFile(screenVideoPath, Buffer.from(payload.screen.videoData));
+
+	let webcamVideoPath: string | undefined;
+	if (payload.webcam) {
+		webcamVideoPath = path.join(RECORDINGS_DIR, payload.webcam.fileName);
+		await fs.writeFile(webcamVideoPath, Buffer.from(payload.webcam.videoData));
+	}
+
+	const session: RecordingSession = webcamVideoPath
+		? { screenVideoPath, webcamVideoPath, createdAt }
+		: { screenVideoPath, createdAt };
+	setCurrentRecordingSessionState(session);
+	currentProjectPath = null;
+
+	const telemetryPath = `${screenVideoPath}.cursor.json`;
+	if (pendingCursorSamples.length > 0) {
+		await fs.writeFile(
+			telemetryPath,
+			JSON.stringify({ version: CURSOR_TELEMETRY_VERSION, samples: pendingCursorSamples }, null, 2),
+			"utf-8",
+		);
+	}
+	pendingCursorSamples = [];
+
+	const sessionManifestPath = path.join(
+		RECORDINGS_DIR,
+		`${path.parse(payload.screen.fileName).name}${RECORDING_SESSION_SUFFIX}`,
+	);
+	await fs.writeFile(sessionManifestPath, JSON.stringify(session, null, 2), "utf-8");
+
+	return {
+		success: true,
+		path: screenVideoPath,
+		session,
+		message: "Recording session stored successfully",
+	};
+}
+
 const CURSOR_TELEMETRY_VERSION = 1;
 const CURSOR_SAMPLE_INTERVAL_MS = 100;
 const MAX_CURSOR_SAMPLES = 60 * 60 * 10; // 1 hour @ 10Hz
@@ -146,36 +202,30 @@ export function registerIpcHandlers(
 		createEditorWindow();
 	});
 
-	ipcMain.handle("store-recorded-video", async (_, videoData: ArrayBuffer, fileName: string) => {
+	ipcMain.handle("store-recorded-session", async (_, payload: StoreRecordedSessionInput) => {
 		try {
-			const videoPath = path.join(RECORDINGS_DIR, fileName);
-			await fs.writeFile(videoPath, Buffer.from(videoData));
-			currentProjectPath = null;
-
-			const telemetryPath = `${videoPath}.cursor.json`;
-			if (pendingCursorSamples.length > 0) {
-				await fs.writeFile(
-					telemetryPath,
-					JSON.stringify(
-						{ version: CURSOR_TELEMETRY_VERSION, samples: pendingCursorSamples },
-						null,
-						2,
-					),
-					"utf-8",
-				);
-			}
-			pendingCursorSamples = [];
-
+			return await storeRecordedSessionFiles(payload);
+		} catch (error) {
+			console.error("Failed to store recording session:", error);
 			return {
-				success: true,
-				path: videoPath,
-				message: "Video stored successfully",
+				success: false,
+				message: "Failed to store recording session",
+				error: String(error),
 			};
+		}
+	});
+
+	ipcMain.handle("store-recorded-video", async (_, videoData: ArrayBuffer, fileName: string) => {
+		try {
+			return await storeRecordedSessionFiles({
+				screen: { videoData, fileName },
+				createdAt: Date.now(),
+			});
 		} catch (error) {
-			console.error("Failed to store video:", error);
+			console.error("Failed to store recorded video:", error);
 			return {
 				success: false,
-				message: "Failed to store video",
+				message: "Failed to store recorded video",
 				error: String(error),
 			};
 		}
@@ -183,8 +233,14 @@ export function registerIpcHandlers(
 
 	ipcMain.handle("get-recorded-video-path", async () => {
 		try {
+			if (currentRecordingSession?.screenVideoPath) {
+				return { success: true, path: currentRecordingSession.screenVideoPath };
+			}
+
 			const files = await fs.readdir(RECORDINGS_DIR);
-			const videoFiles = files.filter((file) => file.endsWith(".webm"));
+			const videoFiles = files.filter(
+				(file) => file.endsWith(".webm") && !file.endsWith("-webcam.webm"),
+			);
 
 			if (videoFiles.length === 0) {
 				return { success: false, message: "No recorded video found" };
@@ -244,7 +300,9 @@ export function registerIpcHandlers(
 	});
 
 	ipcMain.handle("get-cursor-telemetry", async (_, videoPath?: string) => {
-		const targetVideoPath = normalizeVideoSourcePath(videoPath ?? currentVideoPath);
+		const targetVideoPath = normalizeVideoSourcePath(
+			videoPath ?? currentRecordingSession?.screenVideoPath,
+		);
 		if (!targetVideoPath) {
 			return { success: true, samples: [] };
 		}
@@ -416,7 +474,6 @@ export function registerIpcHandlers(
 		}
 	});
 
-	let currentVideoPath: string | null = null;
 	ipcMain.handle(
 		"save-project-file",
 		async (_, projectData: unknown, suggestedName?: string, existingProjectPath?: string) => {
@@ -502,8 +559,17 @@ export function registerIpcHandlers(
 			const content = await fs.readFile(filePath, "utf-8");
 			const project = JSON.parse(content);
 			currentProjectPath = filePath;
-			if (project && typeof project === "object" && typeof project.videoPath === "string") {
-				currentVideoPath = normalizeVideoSourcePath(project.videoPath) ?? project.videoPath;
+			if (project && typeof project === "object") {
+				const rawProject = project as { media?: unknown; videoPath?: unknown };
+				const media =
+					normalizeProjectMedia(rawProject.media) ??
+					(typeof rawProject.videoPath === "string"
+						? {
+								screenVideoPath:
+									normalizeVideoSourcePath(rawProject.videoPath) ?? rawProject.videoPath,
+							}
+						: null);
+				setCurrentRecordingSessionState(media ? { ...media, createdAt: Date.now() } : null);
 			}
 
 			return {
@@ -529,8 +595,17 @@ export function registerIpcHandlers(
 
 			const content = await fs.readFile(currentProjectPath, "utf-8");
 			const project = JSON.parse(content);
-			if (project && typeof project === "object" && typeof project.videoPath === "string") {
-				currentVideoPath = normalizeVideoSourcePath(project.videoPath) ?? project.videoPath;
+			if (project && typeof project === "object") {
+				const rawProject = project as { media?: unknown; videoPath?: unknown };
+				const media =
+					normalizeProjectMedia(rawProject.media) ??
+					(typeof rawProject.videoPath === "string"
+						? {
+								screenVideoPath:
+									normalizeVideoSourcePath(rawProject.videoPath) ?? rawProject.videoPath,
+							}
+						: null);
+				setCurrentRecordingSessionState(media ? { ...media, createdAt: Date.now() } : null);
 			}
 			return {
 				success: true,
@@ -546,18 +621,36 @@ export function registerIpcHandlers(
 			};
 		}
 	});
+	ipcMain.handle("set-current-recording-session", (_, session: RecordingSession | null) => {
+		const normalized = normalizeRecordingSession(session);
+		setCurrentRecordingSessionState(normalized);
+		currentProjectPath = null;
+		return { success: true, session: normalized ?? undefined };
+	});
+
+	ipcMain.handle("get-current-recording-session", () => {
+		return currentRecordingSession
+			? { success: true, session: currentRecordingSession }
+			: { success: false };
+	});
+
 	ipcMain.handle("set-current-video-path", (_, path: string) => {
-		currentVideoPath = normalizeVideoSourcePath(path) ?? path;
+		setCurrentRecordingSessionState({
+			screenVideoPath: normalizeVideoSourcePath(path) ?? path,
+			createdAt: Date.now(),
+		});
 		currentProjectPath = null;
 		return { success: true };
 	});
 
 	ipcMain.handle("get-current-video-path", () => {
-		return currentVideoPath ? { success: true, path: currentVideoPath } : { success: false };
+		return currentRecordingSession?.screenVideoPath
+			? { success: true, path: currentRecordingSession.screenVideoPath }
+			: { success: false };
 	});
 
 	ipcMain.handle("clear-current-video-path", () => {
-		currentVideoPath = null;
+		setCurrentRecordingSessionState(null);
 		return { success: true };
 	});
 
diff --git a/electron/preload.ts b/electron/preload.ts
index acdec4fc..b9183772 100644
--- a/electron/preload.ts
+++ b/electron/preload.ts
@@ -1,4 +1,5 @@
 import { contextBridge, ipcRenderer } from "electron";
+import type { RecordingSession, StoreRecordedSessionInput } from "../src/lib/recordingSession";
 
 contextBridge.exposeInMainWorld("electronAPI", {
 	hudOverlayHide: () => {
@@ -30,6 +31,9 @@ contextBridge.exposeInMainWorld("electronAPI", {
 	storeRecordedVideo: (videoData: ArrayBuffer, fileName: string) => {
 		return ipcRenderer.invoke("store-recorded-video", videoData, fileName);
 	},
+	storeRecordedSession: (payload: StoreRecordedSessionInput) => {
+		return ipcRenderer.invoke("store-recorded-session", payload);
+	},
 
 	getRecordedVideoPath: () => {
 		return ipcRenderer.invoke("get-recorded-video-path");
@@ -57,9 +61,15 @@ contextBridge.exposeInMainWorld("electronAPI", {
 	setCurrentVideoPath: (path: string) => {
 		return ipcRenderer.invoke("set-current-video-path", path);
 	},
+	setCurrentRecordingSession: (session: RecordingSession | null) => {
+		return ipcRenderer.invoke("set-current-recording-session", session);
+	},
 	getCurrentVideoPath: () => {
 		return ipcRenderer.invoke("get-current-video-path");
 	},
+	getCurrentRecordingSession: () => {
+		return ipcRenderer.invoke("get-current-recording-session");
+	},
 	readBinaryFile: (filePath: string) => {
 		return ipcRenderer.invoke("read-binary-file", filePath);
 	},
diff --git a/src/components/launch/LaunchWindow.tsx b/src/components/launch/LaunchWindow.tsx
index b456dd64..bca5d4a2 100644
--- a/src/components/launch/LaunchWindow.tsx
+++ b/src/components/launch/LaunchWindow.tsx
@@ -4,7 +4,16 @@ import { BsRecordCircle } from "react-icons/bs";
 import { FaRegStopCircle } from "react-icons/fa";
 import { FaFolderOpen } from "react-icons/fa6";
 import { FiMinus, FiX } from "react-icons/fi";
-import { MdMic, MdMicOff, MdMonitor, MdVideoFile, MdVolumeOff, MdVolumeUp } from "react-icons/md";
+import {
+	MdMic,
+	MdMicOff,
+	MdMonitor,
+	MdVideocam,
+	MdVideocamOff,
+	MdVideoFile,
+	MdVolumeOff,
+	MdVolumeUp,
+} from "react-icons/md";
 import { RxDragHandleDots2 } from "react-icons/rx";
 import { useAudioLevelMeter } from "../../hooks/useAudioLevelMeter";
 import { useMicrophoneDevices } from "../../hooks/useMicrophoneDevices";
@@ -23,6 +32,8 @@ const ICON_CONFIG = {
 	volumeOff: { icon: MdVolumeOff, size: ICON_SIZE },
 	micOn: { icon: MdMic, size: ICON_SIZE },
 	micOff: { icon: MdMicOff, size: ICON_SIZE },
+	webcamOn: { icon: MdVideocam, size: ICON_SIZE },
+	webcamOff: { icon: MdVideocamOff, size: ICON_SIZE },
 	stop: { icon: FaRegStopCircle, size: ICON_SIZE },
 	record: { icon: BsRecordCircle, size: ICON_SIZE },
 	videoFile: { icon: MdVideoFile, size: ICON_SIZE },
@@ -57,6 +68,8 @@ export function LaunchWindow() {
 		setMicrophoneDeviceId,
 		systemAudioEnabled,
 		setSystemAudioEnabled,
+		webcamEnabled,
+		setWebcamEnabled,
 	} = useScreenRecorder();
 	const [recordingStart, setRecordingStart] = useState<number | null>(null);
 	const [elapsed, setElapsed] = useState(0);
@@ -233,6 +246,16 @@ export function LaunchWindow() {
 								? getIcon("micOn", "text-green-400")
 								: getIcon("micOff", "text-white/40")}
 						</button>
+						<button
+							className={`${hudIconBtnClasses} ${webcamEnabled ? "drop-shadow-[0_0_4px_rgba(74,222,128,0.4)]" : ""}`}
+							onClick={() => !recording && setWebcamEnabled(!webcamEnabled)}
+							disabled={recording}
+							title={webcamEnabled ? "Disable webcam" : "Enable webcam"}
+						>
+							{webcamEnabled
+								? getIcon("webcamOn", "text-green-400")
+								: getIcon("webcamOff", "text-white/40")}
+						</button>
 					</div>
 
 					{/* Record/Stop group */}
diff --git a/src/components/video-editor/VideoEditor.tsx b/src/components/video-editor/VideoEditor.tsx
index b3bdb8da..a3509854 100644
--- a/src/components/video-editor/VideoEditor.tsx
+++ b/src/components/video-editor/VideoEditor.tsx
@@ -17,6 +17,7 @@ import {
 	type GifSizePreset,
 	VideoExporter,
 } from "@/lib/exporter";
+import type { ProjectMedia } from "@/lib/recordingSession";
 import { matchesShortcut } from "@/lib/shortcuts";
 import { getAspectRatioValue, getNativeAspectRatioValue } from "@/utils/aspectRatioUtils";
 import { ExportDialog } from "./ExportDialog";
@@ -26,6 +27,7 @@ import {
 	deriveNextId,
 	fromFileUrl,
 	normalizeProjectEditor,
+	resolveProjectMedia,
 	toFileUrl,
 	validateProjectData,
 } from "./projectPersistence";
@@ -79,6 +81,8 @@ export default function VideoEditor() {
 	// ── Non-undoable state
 	const [videoPath, setVideoPath] = useState<string | null>(null);
 	const [videoSourcePath, setVideoSourcePath] = useState<string | null>(null);
+	const [webcamVideoPath, setWebcamVideoPath] = useState<string | null>(null);
+	const [webcamVideoSourcePath, setWebcamVideoSourcePath] = useState<string | null>(null);
 	const [currentProjectPath, setCurrentProjectPath] = useState<string | null>(null);
 	const [loading, setLoading] = useState(true);
 	const [error, setError] = useState<string | null>(null);
@@ -111,6 +115,19 @@ export default function VideoEditor() {
 	const nextAnnotationZIndexRef = useRef(1);
 	const exporterRef = useRef<VideoExporter | null>(null);
 
+	const currentProjectMedia = useMemo<ProjectMedia | null>(() => {
+		const screenVideoPath = videoSourcePath ?? (videoPath ? fromFileUrl(videoPath) : null);
+		if (!screenVideoPath) {
+			return null;
+		}
+
+		const webcamSourcePath =
+			webcamVideoSourcePath ?? (webcamVideoPath ? fromFileUrl(webcamVideoPath) : null);
+		return webcamSourcePath
+			? { screenVideoPath, webcamVideoPath: webcamSourcePath }
+			: { screenVideoPath };
+	}, [videoPath, videoSourcePath, webcamVideoPath, webcamVideoSourcePath]);
+
 	const applyLoadedProject = useCallback(
 		async (candidate: unknown, path?: string | null) => {
 			if (!validateProjectData(candidate)) {
@@ -118,7 +135,12 @@ export default function VideoEditor() {
 			}
 
 			const project = candidate;
-			const sourcePath = fromFileUrl(project.videoPath);
+			const media = resolveProjectMedia(project);
+			if (!media) {
+				return false;
+			}
+			const sourcePath = fromFileUrl(media.screenVideoPath);
+			const webcamSourcePath = media.webcamVideoPath ? fromFileUrl(media.webcamVideoPath) : null;
 			const normalizedEditor = normalizeProjectEditor(project.editor);
 
 			try {
@@ -133,6 +155,8 @@ export default function VideoEditor() {
 			setError(null);
 			setVideoSourcePath(sourcePath);
 			setVideoPath(toFileUrl(sourcePath));
+			setWebcamVideoSourcePath(webcamSourcePath);
+			setWebcamVideoPath(webcamSourcePath ? toFileUrl(webcamSourcePath) : null);
 			setCurrentProjectPath(path ?? null);
 
 			pushState({
@@ -182,19 +206,27 @@ export default function VideoEditor() {
 					0,
 				) + 1;
 
-			setLastSavedSnapshot(JSON.stringify(createProjectData(sourcePath, normalizedEditor)));
+			setLastSavedSnapshot(
+				JSON.stringify(
+					createProjectData(
+						webcamSourcePath
+							? { screenVideoPath: sourcePath, webcamVideoPath: webcamSourcePath }
+							: { screenVideoPath: sourcePath },
+						normalizedEditor,
+					),
+				),
+			);
 			return true;
 		},
 		[pushState],
 	);
 
 	const currentProjectSnapshot = useMemo(() => {
-		const sourcePath = videoSourcePath ?? (videoPath ? fromFileUrl(videoPath) : null);
-		if (!sourcePath) {
+		if (!currentProjectMedia) {
 			return null;
 		}
 		return JSON.stringify(
-			createProjectData(sourcePath, {
+			createProjectData(currentProjectMedia, {
 				wallpaper,
 				shadowIntensity,
 				showBlur,
@@ -215,8 +247,7 @@ export default function VideoEditor() {
 			}),
 		);
 	}, [
-		videoPath,
-		videoSourcePath,
+		currentProjectMedia,
 		wallpaper,
 		shadowIntensity,
 		showBlur,
@@ -257,11 +288,29 @@ export default function VideoEditor() {
 					}
 				}
 
+				const currentSessionResult = await window.electronAPI.getCurrentRecordingSession();
+				if (currentSessionResult.success && currentSessionResult.session) {
+					const session = currentSessionResult.session;
+					const sourcePath = fromFileUrl(session.screenVideoPath);
+					const webcamSourcePath = session.webcamVideoPath
+						? fromFileUrl(session.webcamVideoPath)
+						: null;
+					setVideoSourcePath(sourcePath);
+					setVideoPath(toFileUrl(sourcePath));
+					setWebcamVideoSourcePath(webcamSourcePath);
+					setWebcamVideoPath(webcamSourcePath ? toFileUrl(webcamSourcePath) : null);
+					setCurrentProjectPath(null);
+					setLastSavedSnapshot(null);
+					return;
+				}
+
 				const result = await window.electronAPI.getCurrentVideoPath();
 				if (result.success && result.path) {
 					const sourcePath = fromFileUrl(result.path);
 					setVideoSourcePath(sourcePath);
 					setVideoPath(toFileUrl(sourcePath));
+					setWebcamVideoSourcePath(null);
+					setWebcamVideoPath(null);
 					setCurrentProjectPath(null);
 					setLastSavedSnapshot(null);
 				} else {
@@ -284,13 +333,12 @@ export default function VideoEditor() {
 				return false;
 			}
 
-			const sourcePath = videoSourcePath ?? fromFileUrl(videoPath);
-			if (!sourcePath) {
+			if (!currentProjectMedia) {
 				toast.error("Unable to determine source video path");
 				return false;
 			}
 
-			const projectData = createProjectData(sourcePath, {
+			const projectData = createProjectData(currentProjectMedia, {
 				wallpaper,
 				shadowIntensity,
 				showBlur,
@@ -311,7 +359,7 @@ export default function VideoEditor() {
 			});
 
 			const fileNameBase =
-				sourcePath
+				currentProjectMedia.screenVideoPath
 					.split(/[\\/]/)
 					.pop()
 					?.replace(/\.[^.]+$/, "") || `project-${Date.now()}`;
@@ -341,8 +389,7 @@ export default function VideoEditor() {
 			return true;
 		},
 		[
-			videoPath,
-			videoSourcePath,
+			currentProjectMedia,
 			currentProjectPath,
 			wallpaper,
 			shadowIntensity,
@@ -361,6 +408,7 @@ export default function VideoEditor() {
 			gifFrameRate,
 			gifLoop,
 			gifSizePreset,
+			videoPath,
 		],
 	);
 
@@ -420,7 +468,7 @@ export default function VideoEditor() {
 		let mounted = true;
 
 		async function loadCursorTelemetry() {
-			const sourcePath = videoSourcePath ?? (videoPath ? fromFileUrl(videoPath) : null);
+			const sourcePath = currentProjectMedia?.screenVideoPath ?? null;
 
 			if (!sourcePath) {
 				if (mounted) {
@@ -447,7 +495,7 @@ export default function VideoEditor() {
 		return () => {
 			mounted = false;
 		};
-	}, [videoPath, videoSourcePath]);
+	}, [currentProjectMedia]);
 
 	function togglePlayPause() {
 		const playback = videoPlaybackRef.current;
@@ -921,6 +969,7 @@ export default function VideoEditor() {
 					// GIF Export
 					const gifExporter = new GifExporter({
 						videoUrl: videoPath,
+						webcamVideoUrl: webcamVideoPath || undefined,
 						width: settings.gifConfig.width,
 						height: settings.gifConfig.height,
 						frameRate: settings.gifConfig.frameRate,
@@ -1048,6 +1097,7 @@ export default function VideoEditor() {
 
 					const exporter = new VideoExporter({
 						videoUrl: videoPath,
+						webcamVideoUrl: webcamVideoPath || undefined,
 						width: exportWidth,
 						height: exportHeight,
 						frameRate: 60,
@@ -1115,6 +1165,7 @@ export default function VideoEditor() {
 		},
 		[
 			videoPath,
+			webcamVideoPath,
 			wallpaper,
 			zoomRegions,
 			trimRegions,
@@ -1251,10 +1302,11 @@ export default function VideoEditor() {
 										}}
 									>
 										<VideoPlayback
-											key={videoPath || "no-video"}
+											key={`${videoPath || "no-video"}:${webcamVideoPath || "no-webcam"}`}
 											aspectRatio={aspectRatio}
 											ref={videoPlaybackRef}
 											videoPath={videoPath || ""}
+											webcamVideoPath={webcamVideoPath || undefined}
 											onDurationChange={setDuration}
 											onTimeUpdate={setCurrentTime}
 											currentTime={currentTime}
diff --git a/src/components/video-editor/VideoPlayback.tsx b/src/components/video-editor/VideoPlayback.tsx
index 877173d9..d939b47d 100644
--- a/src/components/video-editor/VideoPlayback.tsx
+++ b/src/components/video-editor/VideoPlayback.tsx
@@ -19,6 +19,7 @@ import {
 	useState,
 } from "react";
 import { getAssetPath } from "@/lib/assetPath";
+import { computeWebcamOverlayLayout, type WebcamOverlayLayout } from "@/lib/webcamOverlay";
 import {
 	type AspectRatio,
 	formatAspectRatioForCSS,
@@ -55,6 +56,7 @@ import {
 
 interface VideoPlaybackProps {
 	videoPath: string;
+	webcamVideoPath?: string;
 	onDurationChange: (duration: number) => void;
 	onTimeUpdate: (time: number) => void;
 	currentTime: number;
@@ -98,6 +100,7 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 	(
 		{
 			videoPath,
+			webcamVideoPath,
 			onDurationChange,
 			onTimeUpdate,
 			currentTime,
@@ -129,7 +132,9 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 		ref,
 	) => {
 		const videoRef = useRef<HTMLVideoElement | null>(null);
+		const webcamVideoRef = useRef<HTMLVideoElement | null>(null);
 		const containerRef = useRef<HTMLDivElement | null>(null);
+		const stageRef = useRef<HTMLDivElement | null>(null);
 		const appRef = useRef<Application | null>(null);
 		const videoSpriteRef = useRef<Sprite | null>(null);
 		const videoContainerRef = useRef<Container | null>(null);
@@ -139,6 +144,11 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 		const [videoReady, setVideoReady] = useState(false);
 		const overlayRef = useRef<HTMLDivElement | null>(null);
 		const focusIndicatorRef = useRef<HTMLDivElement | null>(null);
+		const [webcamLayout, setWebcamLayout] = useState<WebcamOverlayLayout | null>(null);
+		const [webcamDimensions, setWebcamDimensions] = useState<{
+			width: number;
+			height: number;
+		} | null>(null);
 		const currentTimeRef = useRef(0);
 		const zoomRegionsRef = useRef<ZoomRegion[]>([]);
 		const selectedZoomIdRef = useRef<string | null>(null);
@@ -901,6 +911,90 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 
 		const [resolvedWallpaper, setResolvedWallpaper] = useState<string | null>(null);
 
+		useEffect(() => {
+			const webcamVideo = webcamVideoRef.current;
+			if (!webcamVideo || !webcamVideoPath) {
+				setWebcamDimensions(null);
+				return;
+			}
+
+			const handleLoadedMetadata = () => {
+				if (webcamVideo.videoWidth > 0 && webcamVideo.videoHeight > 0) {
+					setWebcamDimensions({
+						width: webcamVideo.videoWidth,
+						height: webcamVideo.videoHeight,
+					});
+				}
+			};
+
+			webcamVideo.addEventListener("loadedmetadata", handleLoadedMetadata);
+			handleLoadedMetadata();
+			return () => {
+				webcamVideo.removeEventListener("loadedmetadata", handleLoadedMetadata);
+			};
+		}, [webcamVideoPath]);
+
+		useEffect(() => {
+			const stage = stageRef.current;
+			if (!stage || !webcamDimensions) {
+				setWebcamLayout(null);
+				return;
+			}
+
+			const updateLayout = () => {
+				const layout = computeWebcamOverlayLayout({
+					stageWidth: stage.clientWidth,
+					stageHeight: stage.clientHeight,
+					videoWidth: webcamDimensions.width,
+					videoHeight: webcamDimensions.height,
+				});
+				setWebcamLayout(layout);
+			};
+
+			updateLayout();
+
+			if (typeof ResizeObserver === "undefined") {
+				return;
+			}
+
+			const observer = new ResizeObserver(updateLayout);
+			observer.observe(stage);
+			return () => observer.disconnect();
+		}, [webcamDimensions]);
+
+		useEffect(() => {
+			const webcamVideo = webcamVideoRef.current;
+			if (!webcamVideo || !webcamVideoPath) {
+				return;
+			}
+
+			if (!isPlaying) {
+				webcamVideo.pause();
+				if (Math.abs(webcamVideo.currentTime - currentTime) > 0.05) {
+					webcamVideo.currentTime = currentTime;
+				}
+				return;
+			}
+
+			if (Math.abs(webcamVideo.currentTime - currentTime) > 0.15) {
+				webcamVideo.currentTime = currentTime;
+			}
+
+			webcamVideo.play().catch(() => {
+				// Ignore webcam autoplay restoration failures.
+			});
+		}, [currentTime, isPlaying, webcamVideoPath]);
+
+		useEffect(() => {
+			const webcamVideo = webcamVideoRef.current;
+			if (!webcamVideo || !webcamVideoPath) {
+				return;
+			}
+
+			webcamVideo.pause();
+			webcamVideo.currentTime = 0;
+		}, [webcamVideoPath]);
+
 		useEffect(() => {
 			let mounted = true;
 			(async () => {
@@ -975,6 +1069,7 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 
 		return (
 			<div
+				ref={stageRef}
 				className="relative rounded-sm overflow-hidden"
 				style={{
 					width: "100%",
@@ -1008,12 +1103,33 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 								: "none",
 					}}
 				/>
+				{webcamVideoPath && (
+					<video
+						ref={webcamVideoRef}
+						src={webcamVideoPath}
+						className="absolute object-cover pointer-events-none"
+						style={{
+							left: webcamLayout?.x ?? 0,
+							top: webcamLayout?.y ?? 0,
+							width: webcamLayout?.width ?? 0,
+							height: webcamLayout?.height ?? 0,
+							borderRadius: webcamLayout?.borderRadius ?? 0,
+							boxShadow: "0 12px 36px rgba(0,0,0,0.35), 0 4px 12px rgba(0,0,0,0.22)",
+							zIndex: 20,
+							opacity: webcamLayout ? 1 : 0,
+							backgroundColor: "#000",
+						}}
+						muted
+						preload="metadata"
+						playsInline
+					/>
+				)}
 				{/* Only render overlay after PIXI and video are fully initialized */}
 				{pixiReady && videoReady && (
 					<div
 						ref={overlayRef}
 						className="absolute inset-0 select-none"
-						style={{ pointerEvents: "none" }}
+						style={{ pointerEvents: "none", zIndex: 30 }}
 						onPointerDown={handleOverlayPointerDown}
 						onPointerMove={handleOverlayPointerMove}
 						onPointerUp={handleOverlayPointerUp}
diff --git a/src/components/video-editor/projectPersistence.test.ts b/src/components/video-editor/projectPersistence.test.ts
new file mode 100644
index 00000000..239bd883
--- /dev/null
+++ b/src/components/video-editor/projectPersistence.test.ts
@@ -0,0 +1,57 @@
+import { describe, expect, it } from "vitest";
+import {
+	createProjectData,
+	PROJECT_VERSION,
+	resolveProjectMedia,
+	validateProjectData,
+} from "./projectPersistence";
+
+describe("projectPersistence media compatibility", () => {
+	it("accepts legacy projects with a single videoPath", () => {
+		const project = {
+			version: 1,
+			videoPath: "/tmp/screen.webm",
+			editor: {},
+		};
+
+		expect(validateProjectData(project)).toBe(true);
+		expect(resolveProjectMedia(project)).toEqual({
+			screenVideoPath: "/tmp/screen.webm",
+		});
+	});
+
+	it("creates version 2 projects with explicit media", () => {
+		const project = createProjectData(
+			{
+				screenVideoPath: "/tmp/screen.webm",
+				webcamVideoPath: "/tmp/webcam.webm",
+			},
+			{
+				wallpaper: "/wallpapers/wallpaper1.jpg",
+				shadowIntensity: 0,
+				showBlur: false,
+				motionBlurAmount: 0,
+				borderRadius: 0,
+				padding: 50,
+				cropRegion: { x: 0, y: 0, width: 1, height: 1 },
+				zoomRegions: [],
+				trimRegions: [],
+				speedRegions: [],
+				annotationRegions: [],
+				aspectRatio: "16:9",
+				exportQuality: "good",
+				exportFormat: "mp4",
+				gifFrameRate: 15,
+				gifLoop: true,
+				gifSizePreset: "medium",
+			},
+		);
+
+		expect(project.version).toBe(PROJECT_VERSION);
+		expect(project.media).toEqual({
+			screenVideoPath: "/tmp/screen.webm",
+			webcamVideoPath: "/tmp/webcam.webm",
+		});
+		expect(validateProjectData(project)).toBe(true);
+	});
+});
diff --git a/src/components/video-editor/projectPersistence.ts b/src/components/video-editor/projectPersistence.ts
index feecabee..5bb144df 100644
--- a/src/components/video-editor/projectPersistence.ts
+++ b/src/components/video-editor/projectPersistence.ts
@@ -1,4 +1,6 @@
 import type { ExportFormat, ExportQuality, GifFrameRate, GifSizePreset } from "@/lib/exporter";
+import type { ProjectMedia } from "@/lib/recordingSession";
+import { normalizeProjectMedia } from "@/lib/recordingSession";
 import { ASPECT_RATIOS, type AspectRatio } from "@/utils/aspectRatioUtils";
 import {
 	type AnnotationRegion,
@@ -22,7 +24,7 @@ export const WALLPAPER_PATHS = Array.from(
 	(_, i) => `/wallpapers/wallpaper${i + 1}.jpg`,
 );
 
-export const PROJECT_VERSION = 1;
+export const PROJECT_VERSION = 2;
 
 export interface ProjectEditorState {
 	wallpaper: string;
@@ -46,8 +48,9 @@ export interface ProjectEditorState {
 
 export interface EditorProjectData {
 	version: number;
-	videoPath: string;
+	media?: ProjectMedia;
 	editor: ProjectEditorState;
+	videoPath?: string;
 }
 
 function isFiniteNumber(value: unknown): value is number {
@@ -139,11 +142,26 @@ export function validateProjectData(candidate: unknown): candidate is EditorProj
 	if (!candidate || typeof candidate !== "object") return false;
 	const project = candidate as Partial<EditorProjectData>;
 	if (typeof project.version !== "number") return false;
-	if (typeof project.videoPath !== "string" || !project.videoPath) return false;
+	if (!resolveProjectMedia(project)) return false;
 	if (!project.editor || typeof project.editor !== "object") return false;
 	return true;
 }
 
+export function resolveProjectMedia(
+	candidate: Partial<EditorProjectData> | { media?: unknown; videoPath?: unknown },
+): ProjectMedia | null {
+	const media = normalizeProjectMedia(candidate.media);
+	if (media) {
+		return media;
+	}
+
+	if (typeof candidate.videoPath === "string" && candidate.videoPath.trim()) {
+		return { screenVideoPath: candidate.videoPath };
+	}
+
+	return null;
+}
+
 export function normalizeProjectEditor(editor: Partial<ProjectEditorState>): ProjectEditorState {
 	const validAspectRatios = new Set<AspectRatio>(ASPECT_RATIOS);
 
@@ -346,12 +364,12 @@ export function normalizeProjectEditor(editor: Partial<ProjectEditorState>): Pro
 }
 
 export function createProjectData(
-	videoPath: string,
+	media: ProjectMedia,
 	editor: ProjectEditorState,
 ): EditorProjectData {
 	return {
 		version: PROJECT_VERSION,
-		videoPath,
+		media,
 		editor,
 	};
 }
diff --git a/src/hooks/useScreenRecorder.ts b/src/hooks/useScreenRecorder.ts
index 2ac2e3b0..c186f241 100644
--- a/src/hooks/useScreenRecorder.ts
+++ b/src/hooks/useScreenRecorder.ts
@@ -1,8 +1,7 @@
 import { fixWebmDuration } from "@fix-webm-duration/fix";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 
-// Target visually lossless 4K @ 60fps; fall back gracefully when hardware cannot keep up
 const TARGET_FRAME_RATE = 60;
 const MIN_FRAME_RATE = 30;
 const TARGET_WIDTH = 3840;
@@ -12,18 +11,15 @@ const QHD_WIDTH = 2560;
 const QHD_HEIGHT = 1440;
 const QHD_PIXELS = QHD_WIDTH * QHD_HEIGHT;
 
-// Bitrates (bits per second) per resolution tier
 const BITRATE_4K = 45_000_000;
 const BITRATE_QHD = 28_000_000;
 const BITRATE_BASE = 18_000_000;
 const HIGH_FRAME_RATE_THRESHOLD = 60;
 const HIGH_FRAME_RATE_BOOST = 1.7;
 
-// Fallback track settings when the driver reports nothing
 const DEFAULT_WIDTH = 1920;
 const DEFAULT_HEIGHT = 1080;
 
-// Codec alignment: VP9/AV1 require dimensions divisible by 2
 const CODEC_ALIGNMENT = 2;
 
 const RECORDER_TIMESLICE_MS = 1000;
@@ -31,12 +27,15 @@ const BITS_PER_MEGABIT = 1_000_000;
 const CHROME_MEDIA_SOURCE = "desktop";
 const RECORDING_FILE_PREFIX = "recording-";
 const VIDEO_FILE_EXTENSION = ".webm";
+const WEBCAM_FILE_SUFFIX = "-webcam";
 
 const AUDIO_BITRATE_VOICE = 128_000;
 const AUDIO_BITRATE_SYSTEM = 192_000;
 
-// Boost mic slightly when mixing with system audio so voice isn't drowned out
 const MIC_GAIN_BOOST = 1.4;
+const WEBCAM_TARGET_WIDTH = 1280;
+const WEBCAM_TARGET_HEIGHT = 720;
+const WEBCAM_TARGET_FRAME_RATE = 30;
 
 type UseScreenRecorderReturn = {
 	recording: boolean;
@@ -47,20 +46,52 @@ type UseScreenRecorderReturn = {
 	setMicrophoneDeviceId: (deviceId: string | undefined) => void;
 	systemAudioEnabled: boolean;
 	setSystemAudioEnabled: (enabled: boolean) => void;
+	webcamEnabled: boolean;
+	setWebcamEnabled: (enabled: boolean) => void;
 };
 
+type RecorderHandle = {
+	recorder: MediaRecorder;
+	recordedBlobPromise: Promise<Blob>;
+};
+
+function createRecorderHandle(stream: MediaStream, options: MediaRecorderOptions): RecorderHandle {
+	const recorder = new MediaRecorder(stream, options);
+	const chunks: Blob[] = [];
+	const mimeType = options.mimeType || "video/webm";
+	const recordedBlobPromise = new Promise<Blob>((resolve, reject) => {
+		recorder.ondataavailable = (event: BlobEvent) => {
+			if (event.data && event.data.size > 0) {
+				chunks.push(event.data);
+			}
+		};
+		recorder.onerror = () => {
+			reject(new Error("Recording failed"));
+		};
+		recorder.onstop = () => {
+			resolve(new Blob(chunks, { type: mimeType }));
+		};
+	});
+
+	recorder.start(RECORDER_TIMESLICE_MS);
+	return { recorder, recordedBlobPromise };
+}
+
 export function useScreenRecorder(): UseScreenRecorderReturn {
 	const [recording, setRecording] = useState(false);
 	const [microphoneEnabled, setMicrophoneEnabled] = useState(false);
 	const [microphoneDeviceId, setMicrophoneDeviceId] = useState<string | undefined>(undefined);
 	const [systemAudioEnabled, setSystemAudioEnabled] = useState(false);
-	const mediaRecorder = useRef<MediaRecorder | null>(null);
+	const [webcamEnabled, setWebcamEnabled] = useState(false);
+	const screenRecorder = useRef<RecorderHandle | null>(null);
+	const webcamRecorder = useRef<RecorderHandle | null>(null);
 	const stream = useRef<MediaStream | null>(null);
 	const screenStream = useRef<MediaStream | null>(null);
 	const microphoneStream = useRef<MediaStream | null>(null);
+	const webcamStream = useRef<MediaStream | null>(null);
 	const mixingContext = useRef<AudioContext | null>(null);
-	const chunks = useRef<Blob[]>([]);
 	const startTime = useRef<number>(0);
+	const recordingId = useRef<number>(0);
 
 	const selectMimeType = () => {
 		const preferred = [
@@ -90,30 +121,109 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 		return Math.round(BITRATE_BASE * highFrameRateBoost);
 	};
 
+	const teardownMedia = useCallback(() => {
+		if (stream.current) {
+			stream.current.getTracks().forEach((track) => track.stop());
+			stream.current = null;
+		}
+		if (screenStream.current) {
+			screenStream.current.getTracks().forEach((track) => track.stop());
+			screenStream.current = null;
+		}
+		if (microphoneStream.current) {
+			microphoneStream.current.getTracks().forEach((track) => track.stop());
+			microphoneStream.current = null;
+		}
+		if (webcamStream.current) {
+			webcamStream.current.getTracks().forEach((track) => track.stop());
+			webcamStream.current = null;
+		}
+		if (mixingContext.current) {
+			mixingContext.current.close().catch(() => {
+				// Ignore close errors during recorder teardown.
+			});
+			mixingContext.current = null;
+		}
+	}, []);
+
 	const stopRecording = useRef(() => {
-		if (mediaRecorder.current?.state === "recording") {
-			if (stream.current) {
-				stream.current.getTracks().forEach((track) => track.stop());
-			}
-			if (screenStream.current) {
-				screenStream.current.getTracks().forEach((track) => track.stop());
-				screenStream.current = null;
-			}
-			if (microphoneStream.current) {
-				microphoneStream.current.getTracks().forEach((track) => track.stop());
-				microphoneStream.current = null;
+		const activeScreenRecorder = screenRecorder.current;
+		if (activeScreenRecorder?.recorder.state !== "recording") {
+			return;
+		}
+
+		const activeWebcamRecorder = webcamRecorder.current;
+		const duration = Date.now() - startTime.current;
+		const activeRecordingId = recordingId.current;
+
+		screenRecorder.current = null;
+		webcamRecorder.current = null;
+
+		try {
+			activeScreenRecorder.recorder.stop();
+		} catch {
+			// Recorder may already be stopping.
+		}
+		if (activeWebcamRecorder) {
+			try {
+				activeWebcamRecorder.recorder.stop();
+			} catch {
+				// Recorder may already be stopping.
 			}
-			if (mixingContext.current) {
-				mixingContext.current.close().catch(() => {
-					// Ignore close errors during recorder teardown.
+		}
+
+		teardownMedia();
+		setRecording(false);
+		window.electronAPI?.setRecordingState(false);
+
+		void (async () => {
+			try {
+				const screenBlob = await activeScreenRecorder.recordedBlobPromise;
+				if (screenBlob.size === 0) {
+					return;
+				}
+
+				const fixedScreenBlob = await fixWebmDuration(screenBlob, duration);
+				let fixedWebcamBlob: Blob | null = null;
+				if (activeWebcamRecorder) {
+					const webcamBlob = await activeWebcamRecorder.recordedBlobPromise.catch(() => null);
+					if (webcamBlob && webcamBlob.size > 0) {
+						fixedWebcamBlob = await fixWebmDuration(webcamBlob, duration);
+					}
+				}
+
+				const screenFileName = `${RECORDING_FILE_PREFIX}${activeRecordingId}${VIDEO_FILE_EXTENSION}`;
+				const webcamFileName = `${RECORDING_FILE_PREFIX}${activeRecordingId}${WEBCAM_FILE_SUFFIX}${VIDEO_FILE_EXTENSION}`;
+				const result = await window.electronAPI.storeRecordedSession({
+					screen: {
+						videoData: await fixedScreenBlob.arrayBuffer(),
+						fileName: screenFileName,
+					},
+					webcam: fixedWebcamBlob
+						? {
+								videoData: await fixedWebcamBlob.arrayBuffer(),
+								fileName: webcamFileName,
+							}
+						: undefined,
+					createdAt: activeRecordingId,
 				});
-				mixingContext.current = null;
-			}
-			mediaRecorder.current.stop();
-			setRecording(false);
 
-			window.electronAPI?.setRecordingState(false);
-		}
+				if (!result.success) {
+					console.error("Failed to store recording session:", result.message);
+					return;
+				}
+
+				if (result.session) {
+					await window.electronAPI.setCurrentRecordingSession(result.session);
+				} else if (result.path) {
+					await window.electronAPI.setCurrentVideoPath(result.path);
+				}
+
+				await window.electronAPI.switchToEditor();
+			} catch (error) {
+				console.error("Error saving recording:", error);
+			}
+		})();
 	});
 
 	useEffect(() => {
@@ -128,29 +238,25 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 		return () => {
 			if (cleanup) cleanup();
 
-			if (mediaRecorder.current?.state === "recording") {
-				mediaRecorder.current.stop();
-			}
-			if (stream.current) {
-				stream.current.getTracks().forEach((track) => track.stop());
-				stream.current = null;
-			}
-			if (screenStream.current) {
-				screenStream.current.getTracks().forEach((track) => track.stop());
-				screenStream.current = null;
-			}
-			if (microphoneStream.current) {
-				microphoneStream.current.getTracks().forEach((track) => track.stop());
-				microphoneStream.current = null;
+			if (screenRecorder.current?.recorder.state === "recording") {
+				try {
+					screenRecorder.current.recorder.stop();
+				} catch {
+					// Ignore recorder teardown errors during cleanup.
+				}
 			}
-			if (mixingContext.current) {
-				mixingContext.current.close().catch(() => {
-					// Ignore close errors during cleanup.
-				});
-				mixingContext.current = null;
+			if (webcamRecorder.current?.recorder.state === "recording") {
+				try {
+					webcamRecorder.current.recorder.stop();
+				} catch {
+					// Ignore recorder teardown errors during cleanup.
+				}
 			}
+			screenRecorder.current = null;
+			webcamRecorder.current = null;
+			teardownMedia();
 		};
-	}, []);
+	}, [teardownMedia]);
 
 	const startRecording = async () => {
 		try {
@@ -200,7 +306,6 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 			}
 			screenStream.current = screenMediaStream;
 
-			// If microphone is enabled, request mic stream
 			if (microphoneEnabled) {
 				try {
 					microphoneStream.current = await navigator.mediaDevices.getUserMedia({
@@ -225,7 +330,22 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 				}
 			}
 
-			// Combine streams
+			if (webcamEnabled) {
+				try {
+					webcamStream.current = await navigator.mediaDevices.getUserMedia({
+						audio: false,
+						video: {
+							width: { ideal: WEBCAM_TARGET_WIDTH },
+							height: { ideal: WEBCAM_TARGET_HEIGHT },
+							frameRate: { ideal: WEBCAM_TARGET_FRAME_RATE, max: WEBCAM_TARGET_FRAME_RATE },
+						},
+					});
+				} catch (cameraError) {
+					console.warn("Failed to get webcam access:", cameraError);
+					toast.error("Camera access denied. Recording will continue without webcam.");
+				}
+			}
+
 			stream.current = new MediaStream();
 			const videoTrack = screenMediaStream.getVideoTracks()[0];
 			if (!videoTrack) {
@@ -237,7 +357,6 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 			const micAudioTrack = microphoneStream.current?.getAudioTracks()[0];
 
 			if (systemAudioTrack && micAudioTrack) {
-				// Mix system audio + mic using Web Audio API
 				const ctx = new AudioContext();
 				mixingContext.current = ctx;
 				const systemSource = ctx.createMediaStreamSource(new MediaStream([systemAudioTrack]));
@@ -253,6 +372,7 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 			} else if (micAudioTrack) {
 				stream.current.addTrack(micAudioTrack);
 			}
+
 			try {
 				await videoTrack.applyConstraints({
 					frameRate: { ideal: TARGET_FRAME_RATE, max: TARGET_FRAME_RATE },
@@ -272,7 +392,6 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 				frameRate = TARGET_FRAME_RATE,
 			} = videoTrack.getSettings();
 
-			// Ensure dimensions are divisible by 2 for VP9/AV1 codec compatibility
 			width = Math.floor(width / CODEC_ALIGNMENT) * CODEC_ALIGNMENT;
 			height = Math.floor(height / CODEC_ALIGNMENT) * CODEC_ALIGNMENT;
 
@@ -286,54 +405,30 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 			);
 
 			const hasAudio = stream.current.getAudioTracks().length > 0;
-
-			chunks.current = [];
-			const recorder = new MediaRecorder(stream.current, {
+			screenRecorder.current = createRecorderHandle(stream.current, {
 				mimeType,
 				videoBitsPerSecond,
 				...(hasAudio
 					? { audioBitsPerSecond: systemAudioTrack ? AUDIO_BITRATE_SYSTEM : AUDIO_BITRATE_VOICE }
 					: {}),
 			});
-			mediaRecorder.current = recorder;
-			recorder.ondataavailable = (e) => {
-				if (e.data && e.data.size > 0) chunks.current.push(e.data);
-			};
-			recorder.onstop = async () => {
-				stream.current = null;
-				if (chunks.current.length === 0) return;
-				const duration = Date.now() - startTime.current;
-				const recordedChunks = chunks.current;
-				const buggyBlob = new Blob(recordedChunks, { type: mimeType });
-				// Clear chunks early to free memory immediately after blob creation
-				chunks.current = [];
-				const timestamp = Date.now();
-				const videoFileName = `${RECORDING_FILE_PREFIX}${timestamp}${VIDEO_FILE_EXTENSION}`;
-
-				try {
-					const videoBlob = await fixWebmDuration(buggyBlob, duration);
-					const arrayBuffer = await videoBlob.arrayBuffer();
-					const videoResult = await window.electronAPI.storeRecordedVideo(
-						arrayBuffer,
-						videoFileName,
-					);
-					if (!videoResult.success) {
-						console.error("Failed to store video:", videoResult.message);
-						return;
-					}
+			screenRecorder.current.recorder.addEventListener(
+				"error",
+				() => {
+					setRecording(false);
+				},
+				{ once: true },
+			);
 
-					if (videoResult.path) {
-						await window.electronAPI.setCurrentVideoPath(videoResult.path);
-					}
+			if (webcamStream.current) {
+				webcamRecorder.current = createRecorderHandle(webcamStream.current, {
+					mimeType,
+					videoBitsPerSecond: Math.min(videoBitsPerSecond, BITRATE_BASE),
+				});
+			}
 
-					await window.electronAPI.switchToEditor();
-				} catch (error) {
-					console.error("Error saving recording:", error);
-				}
-			};
-			recorder.onerror = () => setRecording(false);
-			recorder.start(RECORDER_TIMESLICE_MS);
-			startTime.current = Date.now();
+			recordingId.current = Date.now();
+			startTime.current = recordingId.current;
 			setRecording(true);
 			window.electronAPI?.setRecordingState(true);
 		} catch (error) {
@@ -345,24 +440,9 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 				toast.error(errorMsg);
 			}
 			setRecording(false);
-			if (stream.current) {
-				stream.current.getTracks().forEach((track) => track.stop());
-				stream.current = null;
-			}
-			if (screenStream.current) {
-				screenStream.current.getTracks().forEach((track) => track.stop());
-				screenStream.current = null;
-			}
-			if (microphoneStream.current) {
-				microphoneStream.current.getTracks().forEach((track) => track.stop());
-				microphoneStream.current = null;
-			}
-			if (mixingContext.current) {
-				mixingContext.current.close().catch(() => {
-					// Ignore close errors during error recovery.
-				});
-				mixingContext.current = null;
-			}
+			screenRecorder.current = null;
+			webcamRecorder.current = null;
+			teardownMedia();
 		}
 	};
 
@@ -379,5 +459,7 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 		setMicrophoneDeviceId,
 		systemAudioEnabled,
 		setSystemAudioEnabled,
+		webcamEnabled,
+		setWebcamEnabled,
 	};
 }
diff --git a/src/lib/exporter/asyncVideoFrameQueue.ts b/src/lib/exporter/asyncVideoFrameQueue.ts
new file mode 100644
index 00000000..4cab1918
--- /dev/null
+++ b/src/lib/exporter/asyncVideoFrameQueue.ts
@@ -0,0 +1,77 @@
+type PendingConsumer = {
+	resolve: (frame: VideoFrame | null) => void;
+	reject: (error: Error) => void;
+};
+
+export class AsyncVideoFrameQueue {
+	private frames: VideoFrame[] = [];
+	private consumers: PendingConsumer[] = [];
+	private error: Error | null = null;
+	private closed = false;
+
+	get length() {
+		return this.frames.length;
+	}
+
+	enqueue(frame: VideoFrame) {
+		if (this.closed) {
+			frame.close();
+			return;
+		}
+
+		const consumer = this.consumers.shift();
+		if (consumer) {
+			consumer.resolve(frame);
+			return;
+		}
+
+		this.frames.push(frame);
+	}
+
+	fail(error: Error) {
+		this.error = error;
+		this.closed = true;
+		const consumers = this.consumers.splice(0);
+		for (const consumer of consumers) {
+			consumer.reject(error);
+		}
+		for (const frame of this.frames) {
+			frame.close();
+		}
+		this.frames = [];
+	}
+
+	close() {
+		this.closed = true;
+		const consumers = this.consumers.splice(0);
+		for (const consumer of consumers) {
+			consumer.resolve(null);
+		}
+	}
+
+	async dequeue(): Promise<VideoFrame | null> {
+		if (this.error) {
+			throw this.error;
+		}
+
+		if (this.frames.length > 0) {
+			return this.frames.shift() ?? null;
+		}
+
+		if (this.closed) {
+			return null;
+		}
+
+		return await new Promise<VideoFrame | null>((resolve, reject) => {
+			this.consumers.push({ resolve, reject });
+		});
+	}
+
+	destroy() {
+		this.close();
+		for (const frame of this.frames) {
+			frame.close();
+		}
+		this.frames = [];
+	}
+}
diff --git a/src/lib/exporter/frameRenderer.ts b/src/lib/exporter/frameRenderer.ts
index 4ac04044..c6de0c55 100644
--- a/src/lib/exporter/frameRenderer.ts
+++ b/src/lib/exporter/frameRenderer.ts
@@ -30,6 +30,7 @@ import {
 	createMotionBlurState,
 	type MotionBlurState,
 } from "@/components/video-editor/videoPlayback/zoomTransform";
+import { computeWebcamOverlayLayout } from "@/lib/webcamOverlay";
 import { renderAnnotations } from "./annotationRenderer";
 
 interface FrameRenderConfig {
@@ -46,6 +47,8 @@ interface FrameRenderConfig {
 	cropRegion: CropRegion;
 	videoWidth: number;
 	videoHeight: number;
+	webcamWidth?: number;
+	webcamHeight?: number;
 	annotationRegions?: AnnotationRegion[];
 	speedRegions?: SpeedRegion[];
 	previewWidth?: number;
@@ -301,7 +304,11 @@ export class FrameRenderer {
 		this.backgroundSprite = bgCanvas;
 	}
 
-	async renderFrame(videoFrame: VideoFrame, timestamp: number): Promise<void> {
+	async renderFrame(
+		videoFrame: VideoFrame,
+		timestamp: number,
+		webcamFrame?: VideoFrame | null,
+	): Promise<void> {
 		if (!this.app || !this.videoContainer || !this.cameraContainer) {
 			throw new Error("Renderer not initialized");
 		}
@@ -360,7 +367,7 @@ export class FrameRenderer {
 		this.app.renderer.render(this.app.stage);
 
 		// Composite with shadows to final output canvas
-		this.compositeWithShadows();
+		this.compositeWithShadows(webcamFrame);
 
 		// Render annotations on top if present
 		if (
@@ -565,7 +572,7 @@ export class FrameRenderer {
 		);
 	}
 
-	private compositeWithShadows(): void {
+	private compositeWithShadows(webcamFrame?: VideoFrame | null): void {
 		if (!this.compositeCanvas || !this.compositeCtx || !this.app) return;
 
 		const videoCanvas = this.app.canvas as HTMLCanvasElement;
@@ -620,6 +627,36 @@ export class FrameRenderer {
 		} else {
 			ctx.drawImage(videoCanvas, 0, 0, w, h);
 		}
+
+		if (webcamFrame && this.config.webcamWidth && this.config.webcamHeight) {
+			const layout = computeWebcamOverlayLayout({
+				stageWidth: w,
+				stageHeight: h,
+				videoWidth: this.config.webcamWidth,
+				videoHeight: this.config.webcamHeight,
+			});
+
+			if (layout) {
+				ctx.save();
+				ctx.beginPath();
+				ctx.roundRect(layout.x, layout.y, layout.width, layout.height, layout.borderRadius);
+				ctx.closePath();
+				ctx.shadowColor = "rgba(0,0,0,0.35)";
+				ctx.shadowBlur = 24;
+				ctx.shadowOffsetY = 10;
+				ctx.fillStyle = "#000000";
+				ctx.fill();
+				ctx.clip();
+				ctx.drawImage(
+					webcamFrame as unknown as CanvasImageSource,
+					layout.x,
+					layout.y,
+					layout.width,
+					layout.height,
+				);
+				ctx.restore();
+			}
+		}
 	}
 
 	getCanvas(): HTMLCanvasElement {
diff --git a/src/lib/exporter/gifExporter.ts b/src/lib/exporter/gifExporter.ts
index 8cf2478a..531477da 100644
--- a/src/lib/exporter/gifExporter.ts
+++ b/src/lib/exporter/gifExporter.ts
@@ -6,6 +6,7 @@ import type {
 	TrimRegion,
 	ZoomRegion,
 } from "@/components/video-editor/types";
+import { AsyncVideoFrameQueue } from "./asyncVideoFrameQueue";
 import { FrameRenderer } from "./frameRenderer";
 import { StreamingVideoDecoder } from "./streamingDecoder";
 import type {
@@ -20,6 +21,7 @@ const GIF_WORKER_URL = new URL("gif.js/dist/gif.worker.js", import.meta.url).toS
 
 interface GifExporterConfig {
 	videoUrl: string;
+	webcamVideoUrl?: string;
 	width: number;
 	height: number;
 	frameRate: GifFrameRate;
@@ -80,6 +82,7 @@ export function calculateOutputDimensions(
 export class GifExporter {
 	private config: GifExporterConfig;
 	private streamingDecoder: StreamingVideoDecoder | null = null;
+	private webcamDecoder: StreamingVideoDecoder | null = null;
 	private renderer: FrameRenderer | null = null;
 	private gif: GIF | null = null;
 	private cancelled = false;
@@ -96,6 +99,11 @@ export class GifExporter {
 			// Initialize streaming decoder and load video metadata
 			this.streamingDecoder = new StreamingVideoDecoder();
 			const videoInfo = await this.streamingDecoder.loadMetadata(this.config.videoUrl);
+			let webcamInfo: Awaited<ReturnType<StreamingVideoDecoder["loadMetadata"]>> | null = null;
+			if (this.config.webcamVideoUrl) {
+				this.webcamDecoder = new StreamingVideoDecoder();
+				webcamInfo = await this.webcamDecoder.loadMetadata(this.config.webcamVideoUrl);
+			}
 
 			// Initialize frame renderer
 			this.renderer = new FrameRenderer({
@@ -112,6 +120,8 @@ export class GifExporter {
 				cropRegion: this.config.cropRegion,
 				videoWidth: videoInfo.width,
 				videoHeight: videoInfo.height,
+				webcamWidth: webcamInfo?.width,
+				webcamHeight: webcamInfo?.height,
 				annotationRegions: this.config.annotationRegions,
 				speedRegions: this.config.speedRegions,
 				previewWidth: this.config.previewWidth,
@@ -155,6 +165,29 @@ export class GifExporter {
 			console.log("[GifExporter] Using streaming decode (web-demuxer + VideoDecoder)");
 
 			let frameIndex = 0;
+			const webcamFrameQueue = this.config.webcamVideoUrl ? new AsyncVideoFrameQueue() : null;
+			const webcamDecodePromise =
+				this.webcamDecoder && webcamFrameQueue
+					? this.webcamDecoder
+							.decodeAll(
+								this.config.frameRate,
+								this.config.trimRegions,
+								this.config.speedRegions,
+								async (webcamFrame) => {
+									while (webcamFrameQueue.length >= 12 && !this.cancelled) {
+										await new Promise((resolve) => setTimeout(resolve, 2));
+									}
+									webcamFrameQueue.enqueue(webcamFrame);
+								},
+							)
+							.then(() => {
+								webcamFrameQueue.close();
+							})
+							.catch((error) => {
+								webcamFrameQueue.fail(error instanceof Error ? error : new Error(String(error)));
+								throw error;
+							})
+					: null;
 
 			// Stream decode and process frames — no seeking!
 			await this.streamingDecoder.decodeAll(
@@ -167,10 +200,13 @@ export class GifExporter {
 						return;
 					}
 
+					const webcamFrame = webcamFrameQueue ? await webcamFrameQueue.dequeue() : null;
+
 					// Render the frame with all effects using source timestamp
 					const sourceTimestampUs = sourceTimestampMs * 1000; // Convert to microseconds
-					await this.renderer!.renderFrame(videoFrame, sourceTimestampUs);
+					await this.renderer!.renderFrame(videoFrame, sourceTimestampUs, webcamFrame);
 					videoFrame.close();
+					webcamFrame?.close();
 
 					// Get the rendered canvas and add to GIF
 					const canvas = this.renderer!.getCanvas();
@@ -196,6 +232,8 @@ export class GifExporter {
 				return { success: false, error: "Export cancelled" };
 			}
 
+			await webcamDecodePromise;
+
 			// Update progress to show we're now in the finalizing phase
 			if (this.config.onProgress) {
 				this.config.onProgress({
@@ -248,6 +286,9 @@ export class GifExporter {
 		if (this.streamingDecoder) {
 			this.streamingDecoder.cancel();
 		}
+		if (this.webcamDecoder) {
+			this.webcamDecoder.cancel();
+		}
 		if (this.gif) {
 			this.gif.abort();
 		}
@@ -264,6 +305,15 @@ export class GifExporter {
 			this.streamingDecoder = null;
 		}
 
+		if (this.webcamDecoder) {
+			try {
+				this.webcamDecoder.destroy();
+			} catch (e) {
+				console.warn("Error destroying webcam decoder:", e);
+			}
+			this.webcamDecoder = null;
+		}
+
 		if (this.renderer) {
 			try {
 				this.renderer.destroy();
diff --git a/src/lib/exporter/videoExporter.ts b/src/lib/exporter/videoExporter.ts
index 2560841a..eb09ab9f 100644
--- a/src/lib/exporter/videoExporter.ts
+++ b/src/lib/exporter/videoExporter.ts
@@ -5,6 +5,7 @@ import type {
 	TrimRegion,
 	ZoomRegion,
 } from "@/components/video-editor/types";
+import { AsyncVideoFrameQueue } from "./asyncVideoFrameQueue";
 import { AudioProcessor } from "./audioEncoder";
 import { FrameRenderer } from "./frameRenderer";
 import { VideoMuxer } from "./muxer";
@@ -13,6 +14,7 @@ import type { ExportConfig, ExportProgress, ExportResult } from "./types";
 
 interface VideoExporterConfig extends ExportConfig {
 	videoUrl: string;
+	webcamVideoUrl?: string;
 	wallpaper: string;
 	zoomRegions: ZoomRegion[];
 	trimRegions?: TrimRegion[];
@@ -38,6 +40,7 @@ export class VideoExporter {
 	private encoder: VideoEncoder | null = null;
 	private muxer: VideoMuxer | null = null;
 	private audioProcessor: AudioProcessor | null = null;
+	private webcamDecoder: StreamingVideoDecoder | null = null;
 	private cancelled = false;
 	private encodeQueue = 0;
 	// Increased queue size for better throughput with hardware encoding
@@ -60,6 +63,11 @@ export class VideoExporter {
 			// Initialize streaming decoder and load video metadata
 			this.streamingDecoder = new StreamingVideoDecoder();
 			const videoInfo = await this.streamingDecoder.loadMetadata(this.config.videoUrl);
+			let webcamInfo: Awaited<ReturnType<StreamingVideoDecoder["loadMetadata"]>> | null = null;
+			if (this.config.webcamVideoUrl) {
+				this.webcamDecoder = new StreamingVideoDecoder();
+				webcamInfo = await this.webcamDecoder.loadMetadata(this.config.webcamVideoUrl);
+			}
 
 			// Initialize frame renderer
 			this.renderer = new FrameRenderer({
@@ -76,6 +84,8 @@ export class VideoExporter {
 				cropRegion: this.config.cropRegion,
 				videoWidth: videoInfo.width,
 				videoHeight: videoInfo.height,
+				webcamWidth: webcamInfo?.width,
+				webcamHeight: webcamInfo?.height,
 				annotationRegions: this.config.annotationRegions,
 				speedRegions: this.config.speedRegions,
 				previewWidth: this.config.previewWidth,
@@ -106,6 +116,29 @@ export class VideoExporter {
 
 			const frameDuration = 1_000_000 / this.config.frameRate; // in microseconds
 			let frameIndex = 0;
+			const webcamFrameQueue = this.config.webcamVideoUrl ? new AsyncVideoFrameQueue() : null;
+			const webcamDecodePromise =
+				this.webcamDecoder && webcamFrameQueue
+					? this.webcamDecoder
+							.decodeAll(
+								this.config.frameRate,
+								this.config.trimRegions,
+								this.config.speedRegions,
+								async (webcamFrame) => {
+									while (webcamFrameQueue.length >= 12 && !this.cancelled) {
+										await new Promise((resolve) => setTimeout(resolve, 2));
+									}
+									webcamFrameQueue.enqueue(webcamFrame);
+								},
+							)
+							.then(() => {
+								webcamFrameQueue.close();
+							})
+							.catch((error) => {
+								webcamFrameQueue.fail(error instanceof Error ? error : new Error(String(error)));
+								throw error;
+							})
+					: null;
 
 			// Stream decode and process frames — no seeking!
 			await this.streamingDecoder.decodeAll(
@@ -119,11 +152,13 @@ export class VideoExporter {
 					}
 
 					const timestamp = frameIndex * frameDuration;
+					const webcamFrame = webcamFrameQueue ? await webcamFrameQueue.dequeue() : null;
 
 					// Render the frame with all effects using source timestamp
 					const sourceTimestampUs = sourceTimestampMs * 1000; // Convert to microseconds
-					await this.renderer!.renderFrame(videoFrame, sourceTimestampUs);
+					await this.renderer!.renderFrame(videoFrame, sourceTimestampUs, webcamFrame);
 					videoFrame.close();
+					webcamFrame?.close();
 
 					const canvas = this.renderer!.getCanvas();
 
@@ -176,6 +211,8 @@ export class VideoExporter {
 				return { success: false, error: "Export cancelled" };
 			}
 
+			await webcamDecodePromise;
+
 			// Finalize encoding
 			if (this.encoder && this.encoder.state === "configured") {
 				await this.encoder.flush();
@@ -332,6 +369,9 @@ export class VideoExporter {
 		if (this.streamingDecoder) {
 			this.streamingDecoder.cancel();
 		}
+		if (this.webcamDecoder) {
+			this.webcamDecoder.cancel();
+		}
 		if (this.audioProcessor) {
 			this.audioProcessor.cancel();
 		}
@@ -359,6 +399,15 @@ export class VideoExporter {
 			this.streamingDecoder = null;
 		}
 
+		if (this.webcamDecoder) {
+			try {
+				this.webcamDecoder.destroy();
+			} catch (e) {
+				console.warn("Error destroying webcam decoder:", e);
+			}
+			this.webcamDecoder = null;
+		}
+
 		if (this.renderer) {
 			try {
 				this.renderer.destroy();
diff --git a/src/lib/recordingSession.ts b/src/lib/recordingSession.ts
new file mode 100644
index 00000000..17cf7c1f
--- /dev/null
+++ b/src/lib/recordingSession.ts
@@ -0,0 +1,69 @@
+export interface ProjectMedia {
+	screenVideoPath: string;
+	webcamVideoPath?: string;
+}
+
+export interface RecordingSession extends ProjectMedia {
+	createdAt: number;
+}
+
+export interface RecordedVideoAssetInput {
+	fileName: string;
+	videoData: ArrayBuffer;
+}
+
+export interface StoreRecordedSessionInput {
+	screen: RecordedVideoAssetInput;
+	webcam?: RecordedVideoAssetInput;
+	createdAt?: number;
+}
+
+function normalizePath(value: unknown): string | undefined {
+	if (typeof value !== "string") {
+		return undefined;
+	}
+
+	const trimmed = value.trim();
+	return trimmed ? trimmed : undefined;
+}
+
+export function normalizeProjectMedia(candidate: unknown): ProjectMedia | null {
+	if (!candidate || typeof candidate !== "object") {
+		return null;
+	}
+
+	const raw = candidate as Partial<ProjectMedia>;
+	const screenVideoPath = normalizePath(raw.screenVideoPath);
+
+	if (!screenVideoPath) {
+		return null;
+	}
+
+	const webcamVideoPath = normalizePath(raw.webcamVideoPath);
+
+	return webcamVideoPath
+		? { screenVideoPath, webcamVideoPath }
+		: {
+				screenVideoPath,
+			};
+}
+
+export function normalizeRecordingSession(candidate: unknown): RecordingSession | null {
+	if (!candidate || typeof candidate !== "object") {
+		return null;
+	}
+
+	const raw = candidate as Partial<RecordingSession>;
+	const media = normalizeProjectMedia(raw);
+	if (!media) {
+		return null;
+	}
+
+	return {
+		...media,
+		createdAt:
+			typeof raw.createdAt === "number" && Number.isFinite(raw.createdAt)
+				? raw.createdAt
+				: Date.now(),
+	};
+}
diff --git a/src/lib/webcamOverlay.test.ts b/src/lib/webcamOverlay.test.ts
new file mode 100644
index 00000000..abc6e36e
--- /dev/null
+++ b/src/lib/webcamOverlay.test.ts
@@ -0,0 +1,33 @@
+import { describe, expect, it } from "vitest";
+import { computeWebcamOverlayLayout } from "./webcamOverlay";
+
+describe("computeWebcamOverlayLayout", () => {
+	it("anchors the overlay in the lower-right corner", () => {
+		const layout = computeWebcamOverlayLayout({
+			stageWidth: 1920,
+			stageHeight: 1080,
+			videoWidth: 1280,
+			videoHeight: 720,
+		});
+
+		expect(layout).not.toBeNull();
+		expect(layout!.x + layout!.width).toBeLessThanOrEqual(1920);
+		expect(layout!.y + layout!.height).toBeLessThanOrEqual(1080);
+		expect(layout!.x).toBeGreaterThan(1920 / 2);
+		expect(layout!.y).toBeGreaterThan(1080 / 2);
+	});
+
+	it("keeps the overlay within the configured stage fraction while preserving aspect ratio", () => {
+		const layout = computeWebcamOverlayLayout({
+			stageWidth: 1280,
+			stageHeight: 720,
+			videoWidth: 1920,
+			videoHeight: 1080,
+		});
+
+		expect(layout).not.toBeNull();
+		expect(layout!.width).toBeLessThanOrEqual(Math.round(1280 * 0.18) + 1);
+		expect(layout!.height).toBeLessThanOrEqual(Math.round(720 * 0.18) + 1);
+		expect(layout!.width / layout!.height).toBeCloseTo(1920 / 1080, 2);
+	});
+});
diff --git a/src/lib/webcamOverlay.ts b/src/lib/webcamOverlay.ts
new file mode 100644
index 00000000..8e877f9e
--- /dev/null
+++ b/src/lib/webcamOverlay.ts
@@ -0,0 +1,45 @@
+export interface WebcamOverlayLayout {
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+	margin: number;
+	borderRadius: number;
+}
+
+const MAX_STAGE_FRACTION = 0.18;
+const MARGIN_FRACTION = 0.02;
+const MIN_SIZE = 96;
+const MAX_BORDER_RADIUS = 24;
+
+export function computeWebcamOverlayLayout(params: {
+	stageWidth: number;
+	stageHeight: number;
+	videoWidth: number;
+	videoHeight: number;
+}): WebcamOverlayLayout | null {
+	const { stageWidth, stageHeight, videoWidth, videoHeight } = params;
+
+	if (stageWidth <= 0 || stageHeight <= 0 || videoWidth <= 0 || videoHeight <= 0) {
+		return null;
+	}
+
+	const margin = Math.max(12, Math.round(Math.min(stageWidth, stageHeight) * MARGIN_FRACTION));
+	const maxWidth = Math.max(MIN_SIZE, stageWidth * MAX_STAGE_FRACTION);
+	const maxHeight = Math.max(MIN_SIZE, stageHeight * MAX_STAGE_FRACTION);
+	const scale = Math.min(maxWidth / videoWidth, maxHeight / videoHeight);
+	const width = Math.round(videoWidth * scale);
+	const height = Math.round(videoHeight * scale);
+
+	return {
+		x: Math.max(0, Math.round(stageWidth - margin - width)),
+		y: Math.max(0, Math.round(stageHeight - margin - height)),
+		width,
+		height,
+		margin,
+		borderRadius: Math.min(
+			MAX_BORDER_RADIUS,
+			Math.max(12, Math.round(Math.min(width, height) * 0.12)),
+		),
+	};
+}
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 314bb5eb..16bc9d31 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -28,7 +28,17 @@ interface Window {
 		) => Promise<{
 			success: boolean;
 			path?: string;
-			message: string;
+			session?: import("./lib/recordingSession").RecordingSession;
+			message?: string;
+			error?: string;
+		}>;
+		storeRecordedSession: (
+			payload: import("./lib/recordingSession").StoreRecordedSessionInput,
+		) => Promise<{
+			success: boolean;
+			path?: string;
+			session?: import("./lib/recordingSession").RecordingSession;
+			message?: string;
 			error?: string;
 		}>;
 		getRecordedVideoPath: () => Promise<{
@@ -58,7 +68,17 @@ interface Window {
 		}>;
 		openVideoFilePicker: () => Promise<{ success: boolean; path?: string; canceled?: boolean }>;
 		setCurrentVideoPath: (path: string) => Promise<{ success: boolean }>;
+		setCurrentRecordingSession: (
+			session: import("./lib/recordingSession").RecordingSession | null,
+		) => Promise<{
+			success: boolean;
+			session?: import("./lib/recordingSession").RecordingSession;
+		}>;
 		getCurrentVideoPath: () => Promise<{ success: boolean; path?: string }>;
+		getCurrentRecordingSession: () => Promise<{
+			success: boolean;
+			session?: import("./lib/recordingSession").RecordingSession;
+		}>;
 		clearCurrentVideoPath: () => Promise<{ success: boolean }>;
 		saveProjectFile: (
 			projectData: unknown,

From e4263d4597cd7d08be54180ef4c87dac1f3f1664 Mon Sep 17 00:00:00 2001
From: Marcus Schiesser <mail@marcusschiesser.de>
Date: Tue, 17 Mar 2026 19:37:12 +0800
Subject: [PATCH 05/14] fix: sync webcam preview playback speed

---
 electron/electron-env.d.ts                    |  6 +++
 electron/ipc/handlers.ts                      | 43 ++++++++++++++++++-
 electron/main.ts                              |  4 +-
 electron/preload.ts                           |  3 ++
 src/components/launch/LaunchWindow.tsx        |  6 ++-
 src/components/video-editor/VideoPlayback.tsx |  9 +++-
 src/hooks/useScreenRecorder.ts                | 36 +++++++++++++++-
 src/vite-env.d.ts                             |  6 +++
 8 files changed, 106 insertions(+), 7 deletions(-)

diff --git a/electron/electron-env.d.ts b/electron/electron-env.d.ts
index 17fd20fc..07253480 100644
--- a/electron/electron-env.d.ts
+++ b/electron/electron-env.d.ts
@@ -29,6 +29,12 @@ interface Window {
 		openSourceSelector: () => Promise<void>;
 		selectSource: (source: ProcessedDesktopSource) => Promise<ProcessedDesktopSource | null>;
 		getSelectedSource: () => Promise<ProcessedDesktopSource | null>;
+		requestCameraAccess: () => Promise<{
+			success: boolean;
+			granted: boolean;
+			status: string;
+			error?: string;
+		}>;
 		getAssetBasePath: () => Promise<string | null>;
 		storeRecordedVideo: (
 			videoData: ArrayBuffer,
diff --git a/electron/ipc/handlers.ts b/electron/ipc/handlers.ts
index 2a6c406a..82440c82 100644
--- a/electron/ipc/handlers.ts
+++ b/electron/ipc/handlers.ts
@@ -1,7 +1,16 @@
 import fs from "node:fs/promises";
 import path from "node:path";
 import { fileURLToPath, pathToFileURL } from "node:url";
-import { app, BrowserWindow, desktopCapturer, dialog, ipcMain, screen, shell } from "electron";
+import {
+	app,
+	BrowserWindow,
+	desktopCapturer,
+	dialog,
+	ipcMain,
+	screen,
+	shell,
+	systemPreferences,
+} from "electron";
 import {
 	normalizeProjectMedia,
 	normalizeRecordingSession,
@@ -185,6 +194,38 @@ export function registerIpcHandlers(
 		return selectedSource;
 	});
 
+	ipcMain.handle("request-camera-access", async () => {
+		if (process.platform !== "darwin") {
+			return { success: true, granted: true, status: "granted" };
+		}
+
+		try {
+			const status = systemPreferences.getMediaAccessStatus("camera");
+			if (status === "granted") {
+				return { success: true, granted: true, status };
+			}
+
+			if (status === "not-determined") {
+				const granted = await systemPreferences.askForMediaAccess("camera");
+				return {
+					success: true,
+					granted,
+					status: granted ? "granted" : systemPreferences.getMediaAccessStatus("camera"),
+				};
+			}
+
+			return { success: true, granted: false, status };
+		} catch (error) {
+			console.error("Failed to request camera access:", error);
+			return {
+				success: false,
+				granted: false,
+				status: "unknown",
+				error: String(error),
+			};
+		}
+	});
+
 	ipcMain.handle("open-source-selector", () => {
 		const sourceSelectorWin = getSourceSelectorWindow();
 		if (sourceSelectorWin) {
diff --git a/electron/main.ts b/electron/main.ts
index 23bcc492..86d4e370 100644
--- a/electron/main.ts
+++ b/electron/main.ts
@@ -333,12 +333,12 @@ app.on("activate", () => {
 app.whenReady().then(async () => {
 	// Allow microphone/media permission checks
 	session.defaultSession.setPermissionCheckHandler((_webContents, permission) => {
-		const allowed = ["media", "audioCapture", "microphone"];
+		const allowed = ["media", "audioCapture", "microphone", "videoCapture", "camera"];
 		return allowed.includes(permission);
 	});
 
 	session.defaultSession.setPermissionRequestHandler((_webContents, permission, callback) => {
-		const allowed = ["media", "audioCapture", "microphone"];
+		const allowed = ["media", "audioCapture", "microphone", "videoCapture", "camera"];
 		callback(allowed.includes(permission));
 	});
 
diff --git a/electron/preload.ts b/electron/preload.ts
index b9183772..ac9451d2 100644
--- a/electron/preload.ts
+++ b/electron/preload.ts
@@ -27,6 +27,9 @@ contextBridge.exposeInMainWorld("electronAPI", {
 	getSelectedSource: () => {
 		return ipcRenderer.invoke("get-selected-source");
 	},
+	requestCameraAccess: () => {
+		return ipcRenderer.invoke("request-camera-access");
+	},
 
 	storeRecordedVideo: (videoData: ArrayBuffer, fileName: string) => {
 		return ipcRenderer.invoke("store-recorded-video", videoData, fileName);
diff --git a/src/components/launch/LaunchWindow.tsx b/src/components/launch/LaunchWindow.tsx
index bca5d4a2..4bf6df8c 100644
--- a/src/components/launch/LaunchWindow.tsx
+++ b/src/components/launch/LaunchWindow.tsx
@@ -248,7 +248,11 @@ export function LaunchWindow() {
 						</button>
 						<button
 							className={`${hudIconBtnClasses} ${webcamEnabled ? "drop-shadow-[0_0_4px_rgba(74,222,128,0.4)]" : ""}`}
-							onClick={() => !recording && setWebcamEnabled(!webcamEnabled)}
+							onClick={() => {
+								if (!recording) {
+									void setWebcamEnabled(!webcamEnabled);
+								}
+							}}
 							disabled={recording}
 							title={webcamEnabled ? "Disable webcam" : "Enable webcam"}
 						>
diff --git a/src/components/video-editor/VideoPlayback.tsx b/src/components/video-editor/VideoPlayback.tsx
index d939b47d..c63c871e 100644
--- a/src/components/video-editor/VideoPlayback.tsx
+++ b/src/components/video-editor/VideoPlayback.tsx
@@ -968,6 +968,13 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 				return;
 			}
 
+			const activeSpeedRegion =
+				speedRegions.find(
+					(region) =>
+						currentTime * 1000 >= region.startMs && currentTime * 1000 < region.endMs,
+				) ?? null;
+			webcamVideo.playbackRate = activeSpeedRegion ? activeSpeedRegion.speed : 1;
+
 			if (!isPlaying) {
 				webcamVideo.pause();
 				if (Math.abs(webcamVideo.currentTime - currentTime) > 0.05) {
@@ -983,7 +990,7 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 			webcamVideo.play().catch(() => {
 				// Ignore webcam autoplay restoration failures.
 			});
-		}, [currentTime, isPlaying, webcamVideoPath]);
+		}, [currentTime, isPlaying, speedRegions, webcamVideoPath]);
 
 		useEffect(() => {
 			const webcamVideo = webcamVideoRef.current;
diff --git a/src/hooks/useScreenRecorder.ts b/src/hooks/useScreenRecorder.ts
index c186f241..85225b71 100644
--- a/src/hooks/useScreenRecorder.ts
+++ b/src/hooks/useScreenRecorder.ts
@@ -47,7 +47,7 @@ type UseScreenRecorderReturn = {
 	systemAudioEnabled: boolean;
 	setSystemAudioEnabled: (enabled: boolean) => void;
 	webcamEnabled: boolean;
-	setWebcamEnabled: (enabled: boolean) => void;
+	setWebcamEnabled: (enabled: boolean) => Promise<boolean>;
 };
 
 type RecorderHandle = {
@@ -82,7 +82,7 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 	const [microphoneEnabled, setMicrophoneEnabled] = useState(false);
 	const [microphoneDeviceId, setMicrophoneDeviceId] = useState<string | undefined>(undefined);
 	const [systemAudioEnabled, setSystemAudioEnabled] = useState(false);
-	const [webcamEnabled, setWebcamEnabled] = useState(false);
+	const [webcamEnabled, setWebcamEnabledState] = useState(false);
 	const screenRecorder = useRef<RecorderHandle | null>(null);
 	const webcamRecorder = useRef<RecorderHandle | null>(null);
 	const stream = useRef<MediaStream | null>(null);
@@ -146,6 +146,38 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 		}
 	}, []);
 
+	const setWebcamEnabled = useCallback(async (enabled: boolean) => {
+		if (!enabled) {
+			setWebcamEnabledState(false);
+			return true;
+		}
+
+		const accessResult = await window.electronAPI.requestCameraAccess();
+		if (!accessResult.success) {
+			toast.error("Failed to request camera access.");
+			return false;
+		}
+
+		if (!accessResult.granted) {
+			toast.error("Camera access is blocked. Enable it in system settings to use the webcam.");
+			return false;
+		}
+
+		try {
+			const probeStream = await navigator.mediaDevices.getUserMedia({
+				audio: false,
+				video: true,
+			});
+			probeStream.getTracks().forEach((track) => track.stop());
+			setWebcamEnabledState(true);
+			return true;
+		} catch (error) {
+			console.warn("Failed to preflight webcam access:", error);
+			toast.error("Camera access denied. Webcam overlay will stay disabled.");
+			return false;
+		}
+	}, []);
+
 	const stopRecording = useRef(() => {
 		const activeScreenRecorder = screenRecorder.current;
 		if (activeScreenRecorder?.recorder.state !== "recording") {
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 16bc9d31..1a1b28f8 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -22,6 +22,12 @@ interface Window {
 		openSourceSelector: () => Promise<void>;
 		selectSource: (source: ProcessedDesktopSource) => Promise<ProcessedDesktopSource | null>;
 		getSelectedSource: () => Promise<ProcessedDesktopSource | null>;
+		requestCameraAccess: () => Promise<{
+			success: boolean;
+			granted: boolean;
+			status: string;
+			error?: string;
+		}>;
 		storeRecordedVideo: (
 			videoData: ArrayBuffer,
 			fileName: string,

From f1a453b9b2a8b80d14a3397dd999ce7bcb0c7844 Mon Sep 17 00:00:00 2001
From: Marcus Schiesser <mail@marcusschiesser.de>
Date: Tue, 17 Mar 2026 19:57:45 +0800
Subject: [PATCH 06/14] fix: finalize externally stopped recordings

---
 src/hooks/useScreenRecorder.ts | 181 ++++++++++++++++++++++-----------
 1 file changed, 120 insertions(+), 61 deletions(-)

diff --git a/src/hooks/useScreenRecorder.ts b/src/hooks/useScreenRecorder.ts
index 85225b71..61f29481 100644
--- a/src/hooks/useScreenRecorder.ts
+++ b/src/hooks/useScreenRecorder.ts
@@ -92,6 +92,8 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 	const mixingContext = useRef<AudioContext | null>(null);
 	const startTime = useRef<number>(0);
 	const recordingId = useRef<number>(0);
+	const finalizingRecordingId = useRef<number | null>(null);
+	const allowAutoFinalize = useRef(false);
 
 	const selectMimeType = () => {
 		const preferred = [
@@ -178,9 +180,88 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 		}
 	}, []);
 
+	const finalizeRecording = useCallback(
+		(
+			activeScreenRecorder: RecorderHandle,
+			activeWebcamRecorder: RecorderHandle | null,
+			duration: number,
+			activeRecordingId: number,
+		) => {
+			if (finalizingRecordingId.current === activeRecordingId) {
+				return;
+			}
+			finalizingRecordingId.current = activeRecordingId;
+
+			if (screenRecorder.current === activeScreenRecorder) {
+				screenRecorder.current = null;
+			}
+			if (activeWebcamRecorder && webcamRecorder.current === activeWebcamRecorder) {
+				webcamRecorder.current = null;
+			}
+
+			teardownMedia();
+			setRecording(false);
+			window.electronAPI?.setRecordingState(false);
+
+			void (async () => {
+				try {
+					const screenBlob = await activeScreenRecorder.recordedBlobPromise;
+					if (screenBlob.size === 0) {
+						return;
+					}
+
+					const fixedScreenBlob = await fixWebmDuration(screenBlob, duration);
+					let fixedWebcamBlob: Blob | null = null;
+					if (activeWebcamRecorder) {
+						const webcamBlob = await activeWebcamRecorder.recordedBlobPromise.catch(() => null);
+						if (webcamBlob && webcamBlob.size > 0) {
+							fixedWebcamBlob = await fixWebmDuration(webcamBlob, duration);
+						}
+					}
+
+					const screenFileName = `${RECORDING_FILE_PREFIX}${activeRecordingId}${VIDEO_FILE_EXTENSION}`;
+					const webcamFileName = `${RECORDING_FILE_PREFIX}${activeRecordingId}${WEBCAM_FILE_SUFFIX}${VIDEO_FILE_EXTENSION}`;
+					const result = await window.electronAPI.storeRecordedSession({
+						screen: {
+							videoData: await fixedScreenBlob.arrayBuffer(),
+							fileName: screenFileName,
+						},
+						webcam: fixedWebcamBlob
+							? {
+									videoData: await fixedWebcamBlob.arrayBuffer(),
+									fileName: webcamFileName,
+								}
+							: undefined,
+						createdAt: activeRecordingId,
+					});
+
+					if (!result.success) {
+						console.error("Failed to store recording session:", result.message);
+						return;
+					}
+
+					if (result.session) {
+						await window.electronAPI.setCurrentRecordingSession(result.session);
+					} else if (result.path) {
+						await window.electronAPI.setCurrentVideoPath(result.path);
+					}
+
+					await window.electronAPI.switchToEditor();
+				} catch (error) {
+					console.error("Error saving recording:", error);
+				} finally {
+					if (finalizingRecordingId.current === activeRecordingId) {
+						finalizingRecordingId.current = null;
+					}
+				}
+			})();
+		},
+		[teardownMedia],
+	);
+
 	const stopRecording = useRef(() => {
 		const activeScreenRecorder = screenRecorder.current;
-		if (activeScreenRecorder?.recorder.state !== "recording") {
+		if (!activeScreenRecorder) {
 			return;
 		}
 
@@ -188,74 +269,29 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 		const duration = Date.now() - startTime.current;
 		const activeRecordingId = recordingId.current;
 
-		screenRecorder.current = null;
-		webcamRecorder.current = null;
+		finalizeRecording(
+			activeScreenRecorder,
+			activeWebcamRecorder ?? null,
+			duration,
+			activeRecordingId,
+		);
 
-		try {
-			activeScreenRecorder.recorder.stop();
-		} catch {
-			// Recorder may already be stopping.
-		}
-		if (activeWebcamRecorder) {
+		if (activeScreenRecorder.recorder.state === "recording") {
 			try {
-				activeWebcamRecorder.recorder.stop();
+				activeScreenRecorder.recorder.stop();
 			} catch {
 				// Recorder may already be stopping.
 			}
 		}
-
-		teardownMedia();
-		setRecording(false);
-		window.electronAPI?.setRecordingState(false);
-
-		void (async () => {
-			try {
-				const screenBlob = await activeScreenRecorder.recordedBlobPromise;
-				if (screenBlob.size === 0) {
-					return;
-				}
-
-				const fixedScreenBlob = await fixWebmDuration(screenBlob, duration);
-				let fixedWebcamBlob: Blob | null = null;
-				if (activeWebcamRecorder) {
-					const webcamBlob = await activeWebcamRecorder.recordedBlobPromise.catch(() => null);
-					if (webcamBlob && webcamBlob.size > 0) {
-						fixedWebcamBlob = await fixWebmDuration(webcamBlob, duration);
-					}
-				}
-
-				const screenFileName = `${RECORDING_FILE_PREFIX}${activeRecordingId}${VIDEO_FILE_EXTENSION}`;
-				const webcamFileName = `${RECORDING_FILE_PREFIX}${activeRecordingId}${WEBCAM_FILE_SUFFIX}${VIDEO_FILE_EXTENSION}`;
-				const result = await window.electronAPI.storeRecordedSession({
-					screen: {
-						videoData: await fixedScreenBlob.arrayBuffer(),
-						fileName: screenFileName,
-					},
-					webcam: fixedWebcamBlob
-						? {
-								videoData: await fixedWebcamBlob.arrayBuffer(),
-								fileName: webcamFileName,
-							}
-						: undefined,
-					createdAt: activeRecordingId,
-				});
-
-				if (!result.success) {
-					console.error("Failed to store recording session:", result.message);
-					return;
-				}
-
-				if (result.session) {
-					await window.electronAPI.setCurrentRecordingSession(result.session);
-				} else if (result.path) {
-					await window.electronAPI.setCurrentVideoPath(result.path);
+		if (activeWebcamRecorder) {
+			if (activeWebcamRecorder.recorder.state === "recording") {
+				try {
+					activeWebcamRecorder.recorder.stop();
+				} catch {
+					// Recorder may already be stopping.
 				}
-
-				await window.electronAPI.switchToEditor();
-			} catch (error) {
-				console.error("Error saving recording:", error);
 			}
-		})();
+		}
 	});
 
 	useEffect(() => {
@@ -269,6 +305,7 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 
 		return () => {
 			if (cleanup) cleanup();
+			allowAutoFinalize.current = false;
 
 			if (screenRecorder.current?.recorder.state === "recording") {
 				try {
@@ -461,8 +498,30 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 
 			recordingId.current = Date.now();
 			startTime.current = recordingId.current;
+			allowAutoFinalize.current = true;
 			setRecording(true);
 			window.electronAPI?.setRecordingState(true);
+
+			const activeScreenRecorder = screenRecorder.current;
+			const activeWebcamRecorder = webcamRecorder.current;
+			const activeRecordingId = recordingId.current;
+			if (activeScreenRecorder) {
+				activeScreenRecorder.recorder.addEventListener(
+					"stop",
+					() => {
+						if (!allowAutoFinalize.current) {
+							return;
+						}
+						finalizeRecording(
+							activeScreenRecorder,
+							activeWebcamRecorder ?? null,
+							Math.max(0, Date.now() - startTime.current),
+							activeRecordingId,
+						);
+					},
+					{ once: true },
+				);
+			}
 		} catch (error) {
 			console.error("Failed to start recording:", error);
 			const errorMsg = error instanceof Error ? error.message : "Failed to start recording";

From 776ed954f24aa46a3a080c0ee3dec726cf1bb92f Mon Sep 17 00:00:00 2001
From: Marcus Schiesser <mail@marcusschiesser.de>
Date: Tue, 17 Mar 2026 20:03:14 +0800
Subject: [PATCH 07/14] fix: always tear down webcam export queues

---
 src/lib/exporter/gifExporter.ts   | 18 +++++++++++++-----
 src/lib/exporter/videoExporter.ts | 18 +++++++++++++-----
 2 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/lib/exporter/gifExporter.ts b/src/lib/exporter/gifExporter.ts
index 531477da..3ab3ba93 100644
--- a/src/lib/exporter/gifExporter.ts
+++ b/src/lib/exporter/gifExporter.ts
@@ -92,6 +92,7 @@ export class GifExporter {
 	}
 
 	async export(): Promise<ExportResult> {
+		let webcamFrameQueue: AsyncVideoFrameQueue | null = null;
 		try {
 			this.cleanup();
 			this.cancelled = false;
@@ -165,7 +166,8 @@ export class GifExporter {
 			console.log("[GifExporter] Using streaming decode (web-demuxer + VideoDecoder)");
 
 			let frameIndex = 0;
-			const webcamFrameQueue = this.config.webcamVideoUrl ? new AsyncVideoFrameQueue() : null;
+			webcamFrameQueue = this.config.webcamVideoUrl ? new AsyncVideoFrameQueue() : null;
+			let webcamDecodeError: Error | null = null;
 			const webcamDecodePromise =
 				this.webcamDecoder && webcamFrameQueue
 					? this.webcamDecoder
@@ -180,13 +182,18 @@ export class GifExporter {
 									webcamFrameQueue.enqueue(webcamFrame);
 								},
 							)
-							.then(() => {
-								webcamFrameQueue.close();
-							})
 							.catch((error) => {
-								webcamFrameQueue.fail(error instanceof Error ? error : new Error(String(error)));
+								webcamDecodeError =
+									error instanceof Error ? error : new Error(String(error));
 								throw error;
 							})
+							.finally(() => {
+								if (webcamDecodeError) {
+									webcamFrameQueue.fail(webcamDecodeError);
+								} else {
+									webcamFrameQueue.close();
+								}
+							})
 					: null;
 
 			// Stream decode and process frames — no seeking!
@@ -277,6 +284,7 @@ export class GifExporter {
 				error: error instanceof Error ? error.message : String(error),
 			};
 		} finally {
+			webcamFrameQueue?.destroy();
 			this.cleanup();
 		}
 	}
diff --git a/src/lib/exporter/videoExporter.ts b/src/lib/exporter/videoExporter.ts
index eb09ab9f..bd30eb8b 100644
--- a/src/lib/exporter/videoExporter.ts
+++ b/src/lib/exporter/videoExporter.ts
@@ -56,6 +56,7 @@ export class VideoExporter {
 	}
 
 	async export(): Promise<ExportResult> {
+		let webcamFrameQueue: AsyncVideoFrameQueue | null = null;
 		try {
 			this.cleanup();
 			this.cancelled = false;
@@ -116,7 +117,8 @@ export class VideoExporter {
 
 			const frameDuration = 1_000_000 / this.config.frameRate; // in microseconds
 			let frameIndex = 0;
-			const webcamFrameQueue = this.config.webcamVideoUrl ? new AsyncVideoFrameQueue() : null;
+			webcamFrameQueue = this.config.webcamVideoUrl ? new AsyncVideoFrameQueue() : null;
+			let webcamDecodeError: Error | null = null;
 			const webcamDecodePromise =
 				this.webcamDecoder && webcamFrameQueue
 					? this.webcamDecoder
@@ -131,13 +133,18 @@ export class VideoExporter {
 									webcamFrameQueue.enqueue(webcamFrame);
 								},
 							)
-							.then(() => {
-								webcamFrameQueue.close();
-							})
 							.catch((error) => {
-								webcamFrameQueue.fail(error instanceof Error ? error : new Error(String(error)));
+								webcamDecodeError =
+									error instanceof Error ? error : new Error(String(error));
 								throw error;
 							})
+							.finally(() => {
+								if (webcamDecodeError) {
+									webcamFrameQueue.fail(webcamDecodeError);
+								} else {
+									webcamFrameQueue.close();
+								}
+							})
 					: null;
 
 			// Stream decode and process frames — no seeking!
@@ -259,6 +266,7 @@ export class VideoExporter {
 				error: error instanceof Error ? error.message : String(error),
 			};
 		} finally {
+			webcamFrameQueue?.destroy();
 			this.cleanup();
 		}
 	}

From 942a7e599ae03bc553dce947599620483404a73f Mon Sep 17 00:00:00 2001
From: Marcus Schiesser <mail@marcusschiesser.de>
Date: Tue, 17 Mar 2026 20:05:37 +0800
Subject: [PATCH 08/14] fix: allow webcam toggle while recording

---
 src/components/launch/LaunchWindow.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/launch/LaunchWindow.tsx b/src/components/launch/LaunchWindow.tsx
index 4bf6df8c..ac4ed9cd 100644
--- a/src/components/launch/LaunchWindow.tsx
+++ b/src/components/launch/LaunchWindow.tsx
@@ -249,11 +249,8 @@ export function LaunchWindow() {
 						<button
 							className={`${hudIconBtnClasses} ${webcamEnabled ? "drop-shadow-[0_0_4px_rgba(74,222,128,0.4)]" : ""}`}
 							onClick={() => {
-								if (!recording) {
-									void setWebcamEnabled(!webcamEnabled);
-								}
+								void setWebcamEnabled(!webcamEnabled);
 							}}
-							disabled={recording}
 							title={webcamEnabled ? "Disable webcam" : "Enable webcam"}
 						>
 							{webcamEnabled

From c3e4c86b33555b2046171bb20cb0b63daf377739 Mon Sep 17 00:00:00 2001
From: Marcus Schiesser <mail@marcusschiesser.de>
Date: Tue, 17 Mar 2026 20:07:10 +0800
Subject: [PATCH 09/14] fix: reset webcam state on access denial

---
 src/hooks/useScreenRecorder.ts | 25 +++++++++++++++----------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/hooks/useScreenRecorder.ts b/src/hooks/useScreenRecorder.ts
index 61f29481..b4afd2e6 100644
--- a/src/hooks/useScreenRecorder.ts
+++ b/src/hooks/useScreenRecorder.ts
@@ -399,21 +399,26 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 				}
 			}
 
-			if (webcamEnabled) {
-				try {
-					webcamStream.current = await navigator.mediaDevices.getUserMedia({
-						audio: false,
-						video: {
+				if (webcamEnabled) {
+					try {
+						webcamStream.current = await navigator.mediaDevices.getUserMedia({
+							audio: false,
+							video: {
 							width: { ideal: WEBCAM_TARGET_WIDTH },
 							height: { ideal: WEBCAM_TARGET_HEIGHT },
 							frameRate: { ideal: WEBCAM_TARGET_FRAME_RATE, max: WEBCAM_TARGET_FRAME_RATE },
 						},
-					});
-				} catch (cameraError) {
-					console.warn("Failed to get webcam access:", cameraError);
-					toast.error("Camera access denied. Recording will continue without webcam.");
+						});
+					} catch (cameraError) {
+						console.warn("Failed to get webcam access:", cameraError);
+						if (webcamStream.current) {
+							webcamStream.current.getTracks().forEach((track) => track.stop());
+							webcamStream.current = null;
+						}
+						setWebcamEnabledState(false);
+						toast.error("Camera access denied. Recording will continue without webcam.");
+					}
 				}
-			}
 
 			stream.current = new MediaStream();
 			const videoTrack = screenMediaStream.getVideoTracks()[0];

From 1591f7dfcb6ffdd10266ec782b84d325ad53d087 Mon Sep 17 00:00:00 2001
From: Marcus Schiesser <mail@marcusschiesser.de>
Date: Tue, 17 Mar 2026 20:29:13 +0800
Subject: [PATCH 10/14] fix: restore passing checks for webcam overlay changes

---
 src/components/video-editor/VideoPlayback.tsx |  3 +-
 src/hooks/useScreenRecorder.ts                | 28 +++++------
 src/lib/exporter/gifExporter.ts               | 48 ++++++++++---------
 src/lib/exporter/videoExporter.ts             | 48 ++++++++++---------
 src/lib/webcamOverlay.test.ts                 |  2 +-
 5 files changed, 66 insertions(+), 63 deletions(-)

diff --git a/src/components/video-editor/VideoPlayback.tsx b/src/components/video-editor/VideoPlayback.tsx
index c63c871e..85029fcc 100644
--- a/src/components/video-editor/VideoPlayback.tsx
+++ b/src/components/video-editor/VideoPlayback.tsx
@@ -970,8 +970,7 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 
 			const activeSpeedRegion =
 				speedRegions.find(
-					(region) =>
-						currentTime * 1000 >= region.startMs && currentTime * 1000 < region.endMs,
+					(region) => currentTime * 1000 >= region.startMs && currentTime * 1000 < region.endMs,
 				) ?? null;
 			webcamVideo.playbackRate = activeSpeedRegion ? activeSpeedRegion.speed : 1;
 
diff --git a/src/hooks/useScreenRecorder.ts b/src/hooks/useScreenRecorder.ts
index b4afd2e6..19893f10 100644
--- a/src/hooks/useScreenRecorder.ts
+++ b/src/hooks/useScreenRecorder.ts
@@ -399,26 +399,26 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 				}
 			}
 
-				if (webcamEnabled) {
-					try {
-						webcamStream.current = await navigator.mediaDevices.getUserMedia({
-							audio: false,
-							video: {
+			if (webcamEnabled) {
+				try {
+					webcamStream.current = await navigator.mediaDevices.getUserMedia({
+						audio: false,
+						video: {
 							width: { ideal: WEBCAM_TARGET_WIDTH },
 							height: { ideal: WEBCAM_TARGET_HEIGHT },
 							frameRate: { ideal: WEBCAM_TARGET_FRAME_RATE, max: WEBCAM_TARGET_FRAME_RATE },
 						},
-						});
-					} catch (cameraError) {
-						console.warn("Failed to get webcam access:", cameraError);
-						if (webcamStream.current) {
-							webcamStream.current.getTracks().forEach((track) => track.stop());
-							webcamStream.current = null;
-						}
-						setWebcamEnabledState(false);
-						toast.error("Camera access denied. Recording will continue without webcam.");
+					});
+				} catch (cameraError) {
+					console.warn("Failed to get webcam access:", cameraError);
+					if (webcamStream.current) {
+						webcamStream.current.getTracks().forEach((track) => track.stop());
+						webcamStream.current = null;
 					}
+					setWebcamEnabledState(false);
+					toast.error("Camera access denied. Recording will continue without webcam.");
 				}
+			}
 
 			stream.current = new MediaStream();
 			const videoTrack = screenMediaStream.getVideoTracks()[0];
diff --git a/src/lib/exporter/gifExporter.ts b/src/lib/exporter/gifExporter.ts
index 3ab3ba93..1402e27e 100644
--- a/src/lib/exporter/gifExporter.ts
+++ b/src/lib/exporter/gifExporter.ts
@@ -170,30 +170,32 @@ export class GifExporter {
 			let webcamDecodeError: Error | null = null;
 			const webcamDecodePromise =
 				this.webcamDecoder && webcamFrameQueue
-					? this.webcamDecoder
-							.decodeAll(
-								this.config.frameRate,
-								this.config.trimRegions,
-								this.config.speedRegions,
-								async (webcamFrame) => {
-									while (webcamFrameQueue.length >= 12 && !this.cancelled) {
-										await new Promise((resolve) => setTimeout(resolve, 2));
+					? (() => {
+							const queue = webcamFrameQueue;
+							return this.webcamDecoder
+								.decodeAll(
+									this.config.frameRate,
+									this.config.trimRegions,
+									this.config.speedRegions,
+									async (webcamFrame) => {
+										while (queue.length >= 12 && !this.cancelled) {
+											await new Promise((resolve) => setTimeout(resolve, 2));
+										}
+										queue.enqueue(webcamFrame);
+									},
+								)
+								.catch((error) => {
+									webcamDecodeError = error instanceof Error ? error : new Error(String(error));
+									throw error;
+								})
+								.finally(() => {
+									if (webcamDecodeError) {
+										queue.fail(webcamDecodeError);
+									} else {
+										queue.close();
 									}
-									webcamFrameQueue.enqueue(webcamFrame);
-								},
-							)
-							.catch((error) => {
-								webcamDecodeError =
-									error instanceof Error ? error : new Error(String(error));
-								throw error;
-							})
-							.finally(() => {
-								if (webcamDecodeError) {
-									webcamFrameQueue.fail(webcamDecodeError);
-								} else {
-									webcamFrameQueue.close();
-								}
-							})
+								});
+						})()
 					: null;
 
 			// Stream decode and process frames — no seeking!
diff --git a/src/lib/exporter/videoExporter.ts b/src/lib/exporter/videoExporter.ts
index bd30eb8b..fcdc9ccd 100644
--- a/src/lib/exporter/videoExporter.ts
+++ b/src/lib/exporter/videoExporter.ts
@@ -121,30 +121,32 @@ export class VideoExporter {
 			let webcamDecodeError: Error | null = null;
 			const webcamDecodePromise =
 				this.webcamDecoder && webcamFrameQueue
-					? this.webcamDecoder
-							.decodeAll(
-								this.config.frameRate,
-								this.config.trimRegions,
-								this.config.speedRegions,
-								async (webcamFrame) => {
-									while (webcamFrameQueue.length >= 12 && !this.cancelled) {
-										await new Promise((resolve) => setTimeout(resolve, 2));
+					? (() => {
+							const queue = webcamFrameQueue;
+							return this.webcamDecoder
+								.decodeAll(
+									this.config.frameRate,
+									this.config.trimRegions,
+									this.config.speedRegions,
+									async (webcamFrame) => {
+										while (queue.length >= 12 && !this.cancelled) {
+											await new Promise((resolve) => setTimeout(resolve, 2));
+										}
+										queue.enqueue(webcamFrame);
+									},
+								)
+								.catch((error) => {
+									webcamDecodeError = error instanceof Error ? error : new Error(String(error));
+									throw error;
+								})
+								.finally(() => {
+									if (webcamDecodeError) {
+										queue.fail(webcamDecodeError);
+									} else {
+										queue.close();
 									}
-									webcamFrameQueue.enqueue(webcamFrame);
-								},
-							)
-							.catch((error) => {
-								webcamDecodeError =
-									error instanceof Error ? error : new Error(String(error));
-								throw error;
-							})
-							.finally(() => {
-								if (webcamDecodeError) {
-									webcamFrameQueue.fail(webcamDecodeError);
-								} else {
-									webcamFrameQueue.close();
-								}
-							})
+								});
+						})()
 					: null;
 
 			// Stream decode and process frames — no seeking!
diff --git a/src/lib/webcamOverlay.test.ts b/src/lib/webcamOverlay.test.ts
index abc6e36e..24e40b34 100644
--- a/src/lib/webcamOverlay.test.ts
+++ b/src/lib/webcamOverlay.test.ts
@@ -28,6 +28,6 @@ describe("computeWebcamOverlayLayout", () => {
 		expect(layout).not.toBeNull();
 		expect(layout!.width).toBeLessThanOrEqual(Math.round(1280 * 0.18) + 1);
 		expect(layout!.height).toBeLessThanOrEqual(Math.round(720 * 0.18) + 1);
-		expect(layout!.width / layout!.height).toBeCloseTo(1920 / 1080, 2);
+		expect(Math.abs(layout!.width * 1080 - layout!.height * 1920)).toBeLessThanOrEqual(1920);
 	});
 });

From 3d2d0a4dbce60f0e15296c971e22eb006cb4b72f Mon Sep 17 00:00:00 2001
From: Marcus Schiesser <mail@marcusschiesser.de>
Date: Tue, 17 Mar 2026 20:35:21 +0800
Subject: [PATCH 11/14] fix: always release exporter video frames

---
 src/lib/exporter/gifExporter.ts   |  63 +++++++++--------
 src/lib/exporter/videoExporter.ts | 113 ++++++++++++++++--------------
 2 files changed, 96 insertions(+), 80 deletions(-)

diff --git a/src/lib/exporter/gifExporter.ts b/src/lib/exporter/gifExporter.ts
index 1402e27e..2b4195c1 100644
--- a/src/lib/exporter/gifExporter.ts
+++ b/src/lib/exporter/gifExporter.ts
@@ -204,35 +204,42 @@ export class GifExporter {
 				this.config.trimRegions,
 				this.config.speedRegions,
 				async (videoFrame, _exportTimestampUs, sourceTimestampMs) => {
-					if (this.cancelled) {
+					let webcamFrame: VideoFrame | null = null;
+					try {
+						if (this.cancelled) {
+							return;
+						}
+
+						webcamFrame = webcamFrameQueue ? await webcamFrameQueue.dequeue() : null;
+						const renderer = this.renderer;
+						if (this.cancelled || !renderer) {
+							return;
+						}
+
+						// Render the frame with all effects using source timestamp
+						const sourceTimestampUs = sourceTimestampMs * 1000; // Convert to microseconds
+						await renderer.renderFrame(videoFrame, sourceTimestampUs, webcamFrame);
+
+						// Get the rendered canvas and add to GIF
+						const canvas = renderer.getCanvas();
+
+						// Add frame to GIF encoder with delay
+						this.gif!.addFrame(canvas, { delay: frameDelay, copy: true });
+
+						frameIndex++;
+
+						// Update progress
+						if (this.config.onProgress) {
+							this.config.onProgress({
+								currentFrame: frameIndex,
+								totalFrames,
+								percentage: (frameIndex / totalFrames) * 100,
+								estimatedTimeRemaining: 0,
+							});
+						}
+					} finally {
 						videoFrame.close();
-						return;
-					}
-
-					const webcamFrame = webcamFrameQueue ? await webcamFrameQueue.dequeue() : null;
-
-					// Render the frame with all effects using source timestamp
-					const sourceTimestampUs = sourceTimestampMs * 1000; // Convert to microseconds
-					await this.renderer!.renderFrame(videoFrame, sourceTimestampUs, webcamFrame);
-					videoFrame.close();
-					webcamFrame?.close();
-
-					// Get the rendered canvas and add to GIF
-					const canvas = this.renderer!.getCanvas();
-
-					// Add frame to GIF encoder with delay
-					this.gif!.addFrame(canvas, { delay: frameDelay, copy: true });
-
-					frameIndex++;
-
-					// Update progress
-					if (this.config.onProgress) {
-						this.config.onProgress({
-							currentFrame: frameIndex,
-							totalFrames,
-							percentage: (frameIndex / totalFrames) * 100,
-							estimatedTimeRemaining: 0,
-						});
+						webcamFrame?.close();
 					}
 				},
 			);
diff --git a/src/lib/exporter/videoExporter.ts b/src/lib/exporter/videoExporter.ts
index fcdc9ccd..d2f7b0a3 100644
--- a/src/lib/exporter/videoExporter.ts
+++ b/src/lib/exporter/videoExporter.ts
@@ -155,63 +155,72 @@ export class VideoExporter {
 				this.config.trimRegions,
 				this.config.speedRegions,
 				async (videoFrame, _exportTimestampUs, sourceTimestampMs) => {
-					if (this.cancelled) {
-						videoFrame.close();
-						return;
-					}
-
-					const timestamp = frameIndex * frameDuration;
-					const webcamFrame = webcamFrameQueue ? await webcamFrameQueue.dequeue() : null;
-
-					// Render the frame with all effects using source timestamp
-					const sourceTimestampUs = sourceTimestampMs * 1000; // Convert to microseconds
-					await this.renderer!.renderFrame(videoFrame, sourceTimestampUs, webcamFrame);
-					videoFrame.close();
-					webcamFrame?.close();
-
-					const canvas = this.renderer!.getCanvas();
-
-					// Create VideoFrame from canvas on GPU without reading pixels
-					// @ts-expect-error - colorSpace not in TypeScript definitions but works at runtime
-					const exportFrame = new VideoFrame(canvas, {
-						timestamp,
-						duration: frameDuration,
-						colorSpace: {
-							primaries: "bt709",
-							transfer: "iec61966-2-1",
-							matrix: "rgb",
-							fullRange: true,
-						},
-					});
-
-					// Check encoder queue before encoding to keep it full
-					while (
-						this.encoder &&
-						this.encoder.encodeQueueSize >= this.MAX_ENCODE_QUEUE &&
-						!this.cancelled
-					) {
-						await new Promise((resolve) => setTimeout(resolve, 5));
-					}
+					let webcamFrame: VideoFrame | null = null;
+					try {
+						if (this.cancelled) {
+							return;
+						}
 
-					if (this.encoder && this.encoder.state === "configured") {
-						this.encodeQueue++;
-						this.encoder.encode(exportFrame, { keyFrame: frameIndex % 150 === 0 });
-					} else {
-						console.warn(`[Frame ${frameIndex}] Encoder not ready! State: ${this.encoder?.state}`);
-					}
+						const timestamp = frameIndex * frameDuration;
+						webcamFrame = webcamFrameQueue ? await webcamFrameQueue.dequeue() : null;
+						const renderer = this.renderer;
+						if (this.cancelled || !renderer) {
+							return;
+						}
 
-					exportFrame.close();
+						// Render the frame with all effects using source timestamp
+						const sourceTimestampUs = sourceTimestampMs * 1000; // Convert to microseconds
+						await renderer.renderFrame(videoFrame, sourceTimestampUs, webcamFrame);
 
-					frameIndex++;
+						const canvas = renderer.getCanvas();
 
-					// Update progress
-					if (this.config.onProgress) {
-						this.config.onProgress({
-							currentFrame: frameIndex,
-							totalFrames,
-							percentage: (frameIndex / totalFrames) * 100,
-							estimatedTimeRemaining: 0,
+						// Create VideoFrame from canvas on GPU without reading pixels
+						// @ts-expect-error - colorSpace not in TypeScript definitions but works at runtime
+						const exportFrame = new VideoFrame(canvas, {
+							timestamp,
+							duration: frameDuration,
+							colorSpace: {
+								primaries: "bt709",
+								transfer: "iec61966-2-1",
+								matrix: "rgb",
+								fullRange: true,
+							},
 						});
+
+						// Check encoder queue before encoding to keep it full
+						while (
+							this.encoder &&
+							this.encoder.encodeQueueSize >= this.MAX_ENCODE_QUEUE &&
+							!this.cancelled
+						) {
+							await new Promise((resolve) => setTimeout(resolve, 5));
+						}
+
+						if (this.encoder && this.encoder.state === "configured") {
+							this.encodeQueue++;
+							this.encoder.encode(exportFrame, { keyFrame: frameIndex % 150 === 0 });
+						} else {
+							console.warn(
+								`[Frame ${frameIndex}] Encoder not ready! State: ${this.encoder?.state}`,
+							);
+						}
+
+						exportFrame.close();
+
+						frameIndex++;
+
+						// Update progress
+						if (this.config.onProgress) {
+							this.config.onProgress({
+								currentFrame: frameIndex,
+								totalFrames,
+								percentage: (frameIndex / totalFrames) * 100,
+								estimatedTimeRemaining: 0,
+							});
+						}
+					} finally {
+						videoFrame.close();
+						webcamFrame?.close();
 					}
 				},
 			);

From e2147bec63cf167e703c9fcdf91279427cb367ad Mon Sep 17 00:00:00 2001
From: Prayas Lashkari <prayas.lashkari98@gmail.com>
Date: Tue, 17 Mar 2026 13:48:31 -0400
Subject: [PATCH 12/14] feat: enhance restart recording functionality to
 prevent concurrent restarts

---
 src/hooks/useScreenRecorder.ts | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/hooks/useScreenRecorder.ts b/src/hooks/useScreenRecorder.ts
index a69da598..cce4df2a 100644
--- a/src/hooks/useScreenRecorder.ts
+++ b/src/hooks/useScreenRecorder.ts
@@ -63,6 +63,7 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 	const chunks = useRef<Blob[]>([]);
 	const startTime = useRef<number>(0);
 	const discardRecording = useRef(false);
+	const restarting = useRef(false);
 
 	const selectMimeType = () => {
 		const preferred = [
@@ -378,22 +379,26 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 	};
 
 	const restartRecording = async () => {
-		if (!recording) return;
+		if (restarting.current) return;
+
+		const recorder = mediaRecorder.current;
+		if (!recorder || recorder.state !== "recording") return;
+
+		restarting.current = true;
 		discardRecording.current = true;
 
-		// Wait for the old recorder's onstop to fully complete before starting
-		// a new session, so the discard logic doesn't race with new chunks.
 		const waitForStop = new Promise<void>((resolve) => {
-			if (mediaRecorder.current) {
-				mediaRecorder.current.addEventListener("stop", () => resolve(), { once: true });
-			} else {
-				resolve();
-			}
+			recorder.addEventListener("stop", () => resolve(), { once: true });
 		});
 
 		stopRecording.current();
 		await waitForStop;
-		await startRecording();
+
+		try {
+			await startRecording();
+		} finally {
+			restarting.current = false;
+		}
 	};
 
 	return {

From b33ec5e2d7abefa9e8f1889b9f024e2e33ef789d Mon Sep 17 00:00:00 2001
From: Siddharth <siddharthvaddem@yahoo.com>
Date: Tue, 17 Mar 2026 18:50:05 -0700
Subject: [PATCH 13/14] fix: restore webcam sessions and stop export deadlocks

---
 electron/ipc/handlers.ts          | 62 ++++++++++++++++++++++++++++---
 src/lib/exporter/gifExporter.ts   | 10 ++++-
 src/lib/exporter/videoExporter.ts | 10 ++++-
 3 files changed, 75 insertions(+), 7 deletions(-)

diff --git a/electron/ipc/handlers.ts b/electron/ipc/handlers.ts
index 82440c82..7738c48f 100644
--- a/electron/ipc/handlers.ts
+++ b/electron/ipc/handlers.ts
@@ -68,6 +68,53 @@ function setCurrentRecordingSessionState(session: RecordingSession | null) {
 	currentRecordingSession = session;
 }
 
+function getSessionManifestPathForVideo(videoPath: string) {
+	const parsed = path.parse(videoPath);
+	const baseName = parsed.name.endsWith("-webcam")
+		? parsed.name.slice(0, -"-webcam".length)
+		: parsed.name;
+	return path.join(parsed.dir, `${baseName}${RECORDING_SESSION_SUFFIX}`);
+}
+
+async function loadRecordedSessionForVideoPath(
+	videoPath: string,
+): Promise<RecordingSession | null> {
+	const normalizedVideoPath = normalizeVideoSourcePath(videoPath);
+	if (!normalizedVideoPath) {
+		return null;
+	}
+
+	try {
+		const manifestPath = getSessionManifestPathForVideo(normalizedVideoPath);
+		const content = await fs.readFile(manifestPath, "utf-8");
+		const session = normalizeRecordingSession(JSON.parse(content));
+		if (!session) {
+			return null;
+		}
+
+		const normalizedSession: RecordingSession = {
+			...session,
+			screenVideoPath: normalizeVideoSourcePath(session.screenVideoPath) ?? session.screenVideoPath,
+			...(session.webcamVideoPath
+				? {
+						webcamVideoPath:
+							normalizeVideoSourcePath(session.webcamVideoPath) ?? session.webcamVideoPath,
+					}
+				: {}),
+		};
+
+		const targetPath = normalizePath(normalizedVideoPath);
+		const screenMatches = normalizePath(normalizedSession.screenVideoPath) === targetPath;
+		const webcamMatches = normalizedSession.webcamVideoPath
+			? normalizePath(normalizedSession.webcamVideoPath) === targetPath
+			: false;
+
+		return screenMatches || webcamMatches ? normalizedSession : null;
+	} catch {
+		return null;
+	}
+}
+
 async function storeRecordedSessionFiles(payload: StoreRecordedSessionInput) {
 	const createdAt =
 		typeof payload.createdAt === "number" && Number.isFinite(payload.createdAt)
@@ -675,11 +722,16 @@ export function registerIpcHandlers(
 			: { success: false };
 	});
 
-	ipcMain.handle("set-current-video-path", (_, path: string) => {
-		setCurrentRecordingSessionState({
-			screenVideoPath: normalizeVideoSourcePath(path) ?? path,
-			createdAt: Date.now(),
-		});
+	ipcMain.handle("set-current-video-path", async (_, path: string) => {
+		const restoredSession = await loadRecordedSessionForVideoPath(path);
+		if (restoredSession) {
+			setCurrentRecordingSessionState(restoredSession);
+		} else {
+			setCurrentRecordingSessionState({
+				screenVideoPath: normalizeVideoSourcePath(path) ?? path,
+				createdAt: Date.now(),
+			});
+		}
 		currentProjectPath = null;
 		return { success: true };
 	});
diff --git a/src/lib/exporter/gifExporter.ts b/src/lib/exporter/gifExporter.ts
index 2b4195c1..af49ce25 100644
--- a/src/lib/exporter/gifExporter.ts
+++ b/src/lib/exporter/gifExporter.ts
@@ -167,6 +167,7 @@ export class GifExporter {
 
 			let frameIndex = 0;
 			webcamFrameQueue = this.config.webcamVideoUrl ? new AsyncVideoFrameQueue() : null;
+			let stopWebcamDecode = false;
 			let webcamDecodeError: Error | null = null;
 			const webcamDecodePromise =
 				this.webcamDecoder && webcamFrameQueue
@@ -178,9 +179,13 @@ export class GifExporter {
 									this.config.trimRegions,
 									this.config.speedRegions,
 									async (webcamFrame) => {
-										while (queue.length >= 12 && !this.cancelled) {
+										while (queue.length >= 12 && !this.cancelled && !stopWebcamDecode) {
 											await new Promise((resolve) => setTimeout(resolve, 2));
 										}
+										if (this.cancelled || stopWebcamDecode) {
+											webcamFrame.close();
+											return;
+										}
 										queue.enqueue(webcamFrame);
 									},
 								)
@@ -248,6 +253,9 @@ export class GifExporter {
 				return { success: false, error: "Export cancelled" };
 			}
 
+			stopWebcamDecode = true;
+			webcamFrameQueue?.destroy();
+			this.webcamDecoder?.cancel();
 			await webcamDecodePromise;
 
 			// Update progress to show we're now in the finalizing phase
diff --git a/src/lib/exporter/videoExporter.ts b/src/lib/exporter/videoExporter.ts
index d2f7b0a3..c80d4700 100644
--- a/src/lib/exporter/videoExporter.ts
+++ b/src/lib/exporter/videoExporter.ts
@@ -118,6 +118,7 @@ export class VideoExporter {
 			const frameDuration = 1_000_000 / this.config.frameRate; // in microseconds
 			let frameIndex = 0;
 			webcamFrameQueue = this.config.webcamVideoUrl ? new AsyncVideoFrameQueue() : null;
+			let stopWebcamDecode = false;
 			let webcamDecodeError: Error | null = null;
 			const webcamDecodePromise =
 				this.webcamDecoder && webcamFrameQueue
@@ -129,9 +130,13 @@ export class VideoExporter {
 									this.config.trimRegions,
 									this.config.speedRegions,
 									async (webcamFrame) => {
-										while (queue.length >= 12 && !this.cancelled) {
+										while (queue.length >= 12 && !this.cancelled && !stopWebcamDecode) {
 											await new Promise((resolve) => setTimeout(resolve, 2));
 										}
+										if (this.cancelled || stopWebcamDecode) {
+											webcamFrame.close();
+											return;
+										}
 										queue.enqueue(webcamFrame);
 									},
 								)
@@ -229,6 +234,9 @@ export class VideoExporter {
 				return { success: false, error: "Export cancelled" };
 			}
 
+			stopWebcamDecode = true;
+			webcamFrameQueue?.destroy();
+			this.webcamDecoder?.cancel();
 			await webcamDecodePromise;
 
 			// Finalize encoding

From 4b8c95f04f77e1b5459ab9eba6523722f2a8d631 Mon Sep 17 00:00:00 2001
From: Siddharth <siddharthvaddem@yahoo.com>
Date: Tue, 17 Mar 2026 19:05:59 -0700
Subject: [PATCH 14/14] bring back show folder

---
 src/components/video-editor/ExportDialog.tsx | 24 ++---------
 src/components/video-editor/VideoEditor.tsx  | 44 +++++++++++++++++++-
 2 files changed, 46 insertions(+), 22 deletions(-)

diff --git a/src/components/video-editor/ExportDialog.tsx b/src/components/video-editor/ExportDialog.tsx
index b36020c6..bd3b99d9 100644
--- a/src/components/video-editor/ExportDialog.tsx
+++ b/src/components/video-editor/ExportDialog.tsx
@@ -1,6 +1,5 @@
 import { Download, Loader2, X } from "lucide-react";
 import { useEffect, useState } from "react";
-import { toast } from "sonner"; // Add this import
 import { Button } from "@/components/ui/button";
 import type { ExportProgress } from "@/lib/exporter";
 
@@ -13,6 +12,7 @@ interface ExportDialogProps {
 	onCancel?: () => void;
 	exportFormat?: "mp4" | "gif";
 	exportedFilePath?: string;
+	onShowInFolder?: () => void;
 }
 
 export function ExportDialog({
@@ -23,7 +23,8 @@ export function ExportDialog({
 	error,
 	onCancel,
 	exportFormat = "mp4",
-	exportedFilePath, // Add this line
+	exportedFilePath,
+	onShowInFolder,
 }: ExportDialogProps) {
 	const [showSuccess, setShowSuccess] = useState(false);
 
@@ -85,23 +86,6 @@ export function ExportDialog({
 		return `Exporting ${formatLabel}`;
 	};
 
-	const handleClickShowInFolder = async () => {
-		if (exportedFilePath) {
-			try {
-				const result = await window.electronAPI.revealInFolder(exportedFilePath);
-				if (!result.success) {
-					const errorMessage = result.error || result.message || "Failed to reveal item in folder.";
-					console.error("Failed to reveal in folder:", errorMessage);
-					toast.error(errorMessage);
-				}
-			} catch (err) {
-				const errorMessage = String(err);
-				console.error("Error calling revealInFolder IPC:", errorMessage);
-				toast.error(`Error revealing in folder: ${errorMessage}`);
-			}
-		}
-	};
-
 	return (
 		<>
 			<div
@@ -124,7 +108,7 @@ export function ExportDialog({
 									{exportedFilePath && (
 										<Button
 											variant="secondary"
-											onClick={handleClickShowInFolder}
+											onClick={onShowInFolder}
 											className="mt-2 w-fit px-3 py-1 text-sm rounded-md bg-white/10 hover:bg-white/20 text-slate-200"
 										>
 											Show in Folder
diff --git a/src/components/video-editor/VideoEditor.tsx b/src/components/video-editor/VideoEditor.tsx
index 829cde5b..1b6de7e4 100644
--- a/src/components/video-editor/VideoEditor.tsx
+++ b/src/components/video-editor/VideoEditor.tsx
@@ -103,6 +103,7 @@ export default function VideoEditor() {
 	const [gifFrameRate, setGifFrameRate] = useState<GifFrameRate>(15);
 	const [gifLoop, setGifLoop] = useState(true);
 	const [gifSizePreset, setGifSizePreset] = useState<GifSizePreset>("medium");
+	const [exportedFilePath, setExportedFilePath] = useState<string | null>(null);
 	const [lastSavedSnapshot, setLastSavedSnapshot] = useState<string | null>(null);
 
 	const videoPlaybackRef = useRef<VideoPlaybackRef>(null);
@@ -929,6 +930,37 @@ export default function VideoEditor() {
 		}
 	}, [selectedSpeedId, speedRegions]);
 
+	const handleShowExportedFile = useCallback(async (filePath: string) => {
+		try {
+			const result = await window.electronAPI.revealInFolder(filePath);
+			if (!result.success) {
+				const errorMessage = result.error || result.message || "Failed to reveal item in folder.";
+				console.error("Failed to reveal in folder:", errorMessage);
+				toast.error(errorMessage);
+			}
+		} catch (error) {
+			const errorMessage = String(error);
+			console.error("Error calling revealInFolder IPC:", errorMessage);
+			toast.error(`Error revealing in folder: ${errorMessage}`);
+		}
+	}, []);
+
+	const handleExportSaved = useCallback(
+		(formatLabel: "GIF" | "Video", filePath: string) => {
+			setExportedFilePath(filePath);
+			toast.success(`${formatLabel} exported successfully`, {
+				description: filePath,
+				action: {
+					label: "Show in Folder",
+					onClick: () => {
+						void handleShowExportedFile(filePath);
+					},
+				},
+			});
+		},
+		[handleShowExportedFile],
+	);
+
 	const handleExport = useCallback(
 		async (settings: ExportSettings) => {
 			if (!videoPath) {
@@ -945,6 +977,7 @@ export default function VideoEditor() {
 			setIsExporting(true);
 			setExportProgress(null);
 			setExportError(null);
+			setExportedFilePath(null);
 
 			try {
 				const wasPlaying = isPlaying;
@@ -1008,7 +1041,7 @@ export default function VideoEditor() {
 						if (saveResult.canceled) {
 							toast.info("Export canceled");
 						} else if (saveResult.success) {
-							toast.success(`GIF exported successfully to ${saveResult.path}`);
+							handleExportSaved("GIF", saveResult.path);
 						} else {
 							setExportError(saveResult.message || "Failed to save GIF");
 							toast.error(saveResult.message || "Failed to save GIF");
@@ -1135,7 +1168,7 @@ export default function VideoEditor() {
 						if (saveResult.canceled) {
 							toast.info("Export canceled");
 						} else if (saveResult.success) {
-							toast.success(`Video exported successfully to ${saveResult.path}`);
+							handleExportSaved("Video", saveResult.path);
 						} else {
 							setExportError(saveResult.message || "Failed to save video");
 							toast.error(saveResult.message || "Failed to save video");
@@ -1180,6 +1213,7 @@ export default function VideoEditor() {
 			isPlaying,
 			aspectRatio,
 			exportQuality,
+			handleExportSaved,
 		],
 	);
 
@@ -1222,6 +1256,7 @@ export default function VideoEditor() {
 
 		setShowExportDialog(true);
 		setExportError(null);
+		setExportedFilePath(null);
 
 		// Start export immediately
 		handleExport(settings);
@@ -1235,6 +1270,7 @@ export default function VideoEditor() {
 			setIsExporting(false);
 			setExportProgress(null);
 			setExportError(null);
+			setExportedFilePath(null);
 		}
 	}, []);
 
@@ -1473,6 +1509,10 @@ export default function VideoEditor() {
 				error={exportError}
 				onCancel={handleCancelExport}
 				exportFormat={exportFormat}
+				exportedFilePath={exportedFilePath || undefined}
+				onShowInFolder={
+					exportedFilePath ? () => void handleShowExportedFile(exportedFilePath) : undefined
+				}
 			/>
 		</div>
 	);