feat: live camera preview overlay (visible before & during recording)

electron/main.ts

@@ -14,7 +14,13 @@ import {
 } from "electron";
 import { mainT, setMainLocale } from "./i18n";
 import { registerIpcHandlers } from "./ipc/handlers";
-import { createEditorWindow, createHudOverlayWindow, createSourceSelectorWindow } from "./windows";
+import {
+	closeCameraPreviewWindow,
+	createCameraPreviewWindow,
+	createEditorWindow,
+	createHudOverlayWindow,
+	createSourceSelectorWindow,
+} from "./windows";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
@@ -361,6 +367,14 @@ app.whenReady().then(async () => {
 	ipcMain.on("hud-overlay-close", () => {
 		app.quit();
 	});
+
+	// Camera preview window — shown during recording so user can see their face
+	ipcMain.on("show-camera-preview", (_, deviceId: string) => {
+		createCameraPreviewWindow(deviceId ?? "");
+	});
+	ipcMain.on("hide-camera-preview", () => {
+		closeCameraPreviewWindow();
+	});
 	ipcMain.handle("set-locale", (_, locale: string) => {
 		setMainLocale(locale);
 		setupApplicationMenu();

electron/preload.ts

@@ -124,6 +124,12 @@ contextBridge.exposeInMainWorld("electronAPI", {
 	setLocale: (locale: string) => {
 		return ipcRenderer.invoke("set-locale", locale);
 	},
+	showCameraPreview: (deviceId: string) => {
+		ipcRenderer.send("show-camera-preview", deviceId);
+	},
+	hideCameraPreview: () => {
+		ipcRenderer.send("hide-camera-preview");
+	},
 	setMicrophoneExpanded: (expanded: boolean) => {
 		ipcRenderer.send("hud:setMicrophoneExpanded", expanded);
 	},

electron/windows.ts

@@ -10,6 +10,7 @@ const RENDERER_DIST = path.join(APP_ROOT, "dist");
 const HEADLESS = process.env["HEADLESS"] === "true";
 
 let hudOverlayWindow: BrowserWindow | null = null;
+let cameraPreviewWindow: BrowserWindow | null = null;
 
 ipcMain.on("hud-overlay-hide", () => {
 	if (hudOverlayWindow && !hudOverlayWindow.isDestroyed()) {
@@ -85,6 +86,77 @@ export function createHudOverlayWindow(): BrowserWindow {
 	return win;
 }
 
+/**
+ * Creates a small always-on-top floating window that shows the live webcam
+ * feed during recording so the user can see their face overlay in real time.
+ */
+export function createCameraPreviewWindow(deviceId: string): BrowserWindow {
+	const primaryDisplay = screen.getPrimaryDisplay();
+	const { workArea } = primaryDisplay;
+
+	const windowSize = 220;
+	const margin = 24;
+
+	const x = Math.floor(workArea.x + workArea.width - windowSize - margin);
+	const y = Math.floor(workArea.y + workArea.height - windowSize - margin - 170); // above HUD
+
+	if (cameraPreviewWindow && !cameraPreviewWindow.isDestroyed()) {
+		cameraPreviewWindow.close();
+		cameraPreviewWindow = null;
+	}
+
+	const win = new BrowserWindow({
+		width: windowSize,
+		height: windowSize,
+		x,
+		y,
+		frame: false,
+		transparent: true,
+		resizable: false,
+		alwaysOnTop: true,
+		skipTaskbar: true,
+		hasShadow: false,
+		show: !HEADLESS,
+		webPreferences: {
+			preload: path.join(__dirname, "preload.mjs"),
+			nodeIntegration: false,
+			contextIsolation: true,
+			backgroundThrottling: false,
+		},
+	});
+
+	if (process.platform === "darwin") {
+		win.setVisibleOnAllWorkspaces(true, { visibleOnFullScreen: true });
+	}
+
+	cameraPreviewWindow = win;
+
+	win.on("closed", () => {
+		if (cameraPreviewWindow === win) {
+			cameraPreviewWindow = null;
+		}
+	});
+
+	const encodedDeviceId = encodeURIComponent(deviceId);
+
+	if (VITE_DEV_SERVER_URL) {
+		win.loadURL(`${VITE_DEV_SERVER_URL}?windowType=camera-preview&deviceId=${encodedDeviceId}`);
+	} else {
+		win.loadFile(path.join(RENDERER_DIST, "index.html"), {
+			query: { windowType: "camera-preview", deviceId },
+		});
+	}
+
+	return win;
+}
+
+export function closeCameraPreviewWindow(): void {
+	if (cameraPreviewWindow && !cameraPreviewWindow.isDestroyed()) {
+		cameraPreviewWindow.close();
+		cameraPreviewWindow = null;
+	}
+}
+
 /**
  * Creates the main editor window. Starts maximised with a hidden title bar on
  * macOS. This window is not always-on-top and appears in the taskbar/dock.

src/App.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { CameraPreviewWindow } from "./components/launch/CameraPreviewWindow";
 import { LaunchWindow } from "./components/launch/LaunchWindow";
 import { SourceSelector } from "./components/launch/SourceSelector";
 import { Toaster } from "./components/ui/sonner";
@@ -15,7 +16,7 @@ export default function App() {
 		const params = new URLSearchParams(window.location.search);
 		const type = params.get("windowType") || "";
 		setWindowType(type);
-		if (type === "hud-overlay" || type === "source-selector") {
+		if (type === "hud-overlay" || type === "source-selector" || type === "camera-preview") {
 			document.body.style.background = "transparent";
 			document.documentElement.style.background = "transparent";
 			document.getElementById("root")?.style.setProperty("background", "transparent");
@@ -29,6 +30,8 @@ export default function App() {
 
 	const content = (() => {
 		switch (windowType) {
+			case "camera-preview":
+				return <CameraPreviewWindow />;
 			case "hud-overlay":
 				return <LaunchWindow />;
 			case "source-selector":

src/components/launch/CameraPreviewWindow.tsx

@@ -0,0 +1,166 @@
+import { useEffect, useRef, useState } from "react";
+
+/**
+ * Floating camera preview window — shown whenever the webcam is enabled,
+ * both before and during recording. Renders the live feed in a draggable
+ * circle. On hover, a collapse button appears so the user can tuck it away
+ * without turning off the webcam.
+ */
+export function CameraPreviewWindow() {
+	const videoRef = useRef<HTMLVideoElement>(null);
+	const [collapsed, setCollapsed] = useState(false);
+	const [hovered, setHovered] = useState(false);
+
+	useEffect(() => {
+		const params = new URLSearchParams(window.location.search);
+		const deviceId = params.get("deviceId") ?? "";
+
+		const constraints: MediaStreamConstraints = {
+			video: deviceId
+				? { deviceId: { exact: deviceId }, width: { ideal: 1280 }, height: { ideal: 720 } }
+				: { width: { ideal: 1280 }, height: { ideal: 720 } },
+			audio: false,
+		};
+
+		let stream: MediaStream | null = null;
+
+		navigator.mediaDevices
+			.getUserMedia(constraints)
+			.then((s) => {
+				stream = s;
+				if (videoRef.current) {
+					videoRef.current.srcObject = s;
+				}
+			})
+			.catch(console.error);
+
+		return () => {
+			stream?.getTracks().forEach((t) => t.stop());
+		};
+	}, []);
+
+	if (collapsed) {
+		return (
+			<div
+				style={{
+					width: "100vw",
+					height: "100vh",
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+					background: "transparent",
+				}}
+			>
+				{/* Collapsed pill — click to expand */}
+				<button
+					onClick={() => setCollapsed(false)}
+					title="Show camera preview"
+					style={{
+						display: "flex",
+						alignItems: "center",
+						gap: 6,
+						padding: "6px 12px",
+						borderRadius: 999,
+						background: "rgba(20,20,28,0.88)",
+						border: "1.5px solid rgba(255,255,255,0.15)",
+						boxShadow: "0 4px 16px rgba(0,0,0,0.5)",
+						color: "rgba(255,255,255,0.75)",
+						fontSize: 12,
+						fontFamily: "system-ui, sans-serif",
+						cursor: "pointer",
+						// @ts-expect-error Electron drag
+						WebkitAppRegion: "no-drag",
+					}}
+				>
+					{/* Camera icon */}
+					<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+						<path d="M23 7l-7 5 7 5V7z"/>
+						<rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
+					</svg>
+					Show
+				</button>
+			</div>
+		);
+	}
+
+	return (
+		<div
+			style={{
+				width: "100vw",
+				height: "100vh",
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				background: "transparent",
+				// @ts-expect-error Electron drag
+				WebkitAppRegion: "drag",
+				cursor: "grab",
+			}}
+			onMouseEnter={() => setHovered(true)}
+			onMouseLeave={() => setHovered(false)}
+		>
+			{/* Circle video frame */}
+			<div style={{ position: "relative", width: 196, height: 196, flexShrink: 0 }}>
+				<div
+					style={{
+						width: 196,
+						height: 196,
+						borderRadius: "50%",
+						overflow: "hidden",
+						border: "3px solid rgba(255,255,255,0.22)",
+						boxShadow:
+							"0 8px 32px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.08), inset 0 0 0 1px rgba(0,0,0,0.3)",
+						background: "#111",
+					}}
+				>
+					<video
+						ref={videoRef}
+						autoPlay
+						muted
+						playsInline
+						style={{
+							width: "100%",
+							height: "100%",
+							objectFit: "cover",
+							transform: "scaleX(-1)",
+							display: "block",
+						}}
+					/>
+				</div>
+
+				{/* Hover controls */}
+				{hovered && (
+					<button
+						onClick={() => setCollapsed(true)}
+						title="Hide camera preview"
+						style={{
+							position: "absolute",
+							top: 8,
+							right: 8,
+							width: 28,
+							height: 28,
+							borderRadius: "50%",
+							background: "rgba(0,0,0,0.65)",
+							border: "1px solid rgba(255,255,255,0.2)",
+							color: "rgba(255,255,255,0.85)",
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "center",
+							cursor: "pointer",
+							// @ts-expect-error Electron drag
+							WebkitAppRegion: "no-drag",
+							backdropFilter: "blur(6px)",
+						}}
+					>
+						{/* Eye-off icon */}
+						<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+							<path d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94"/>
+							<path d="M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19"/>
+							<line x1="1" y1="1" x2="23" y2="23"/>
+						</svg>
+					</button>
+				)}
+			</div>
+		</div>
+	);
+}

src/components/launch/LaunchWindow.tsx

@@ -152,6 +152,19 @@ export function LaunchWindow() {
 		}
 	}, [selectedCameraId, setWebcamDeviceId]);
 
+	// Show live camera preview as soon as webcam is enabled (before and during recording).
+	// Only retrigger when webcamEnabled flips — not on every device-list load.
+	useEffect(() => {
+		if (!window.electronAPI) return;
+		if (webcamEnabled) {
+			const deviceId = webcamDeviceId || selectedCameraId || "";
+			window.electronAPI.showCameraPreview(deviceId);
+		} else {
+			window.electronAPI.hideCameraPreview();
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [webcamEnabled]);
+
 	useEffect(() => {
 		if (!import.meta.env.DEV) {
 			return;

src/hooks/useScreenRecorder.ts

@@ -555,6 +555,7 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 			setElapsedSeconds(0);
 			window.electronAPI?.setRecordingState(true);
 
+
 			const activeScreenRecorder = screenRecorder.current;
 			const activeWebcamRecorder = webcamRecorder.current;
 			const activeRecordingId = recordingId.current;

src/vite-env.d.ts

@@ -118,6 +118,8 @@ interface Window {
 		onMenuLoadProject: (callback: () => void) => () => void;
 		onMenuSaveProject: (callback: () => void) => () => void;
 		onMenuSaveProjectAs: (callback: () => void) => () => void;
+		showCameraPreview: (deviceId: string) => void;
+		hideCameraPreview: () => void;
 		setMicrophoneExpanded: (expanded: boolean) => void;
 		setHasUnsavedChanges: (hasChanges: boolean) => void;
 		onRequestSaveBeforeClose: (callback: () => Promise<boolean> | boolean) => () => void;