fix: sync webcam preview playback speed

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"}
 						>

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;

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") {

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,