From 56cf0ba0d4e1d0ecb9a1cd2ea0982bef26ffb5b0 Mon Sep 17 00:00:00 2001
From: Jack Wilburn <jackwilburn@tutanota.com>
Date: Wed, 18 Mar 2026 22:56:03 -0600
Subject: [PATCH 01/12] Add webcam recording support

---
 public/libraries/screen-recording/config.json |   2 +-
 public/libraries/webcam-recording/config.json |  21 +
 .../assets/screen-recording-page.md           |   3 +-
 .../assets/screen-recording.md                |   2 +-
 public/library-screen-recording/config.json   |   7 +-
 .../assets/webcam-recording-page.md           |   5 +
 .../assets/webcam-recording.md                |  13 +
 public/library-webcam-recording/config.json   |  46 ++
 .../individualStudy/StudyAnalysisTabs.tsx     |   3 +-
 .../thinkAloud/ThinkAloudFooter.tsx           |  53 +-
 .../tests/ThinkAloudAnalysis.spec.tsx         |   3 +-
 src/components/ConfigSwitcher.tsx             |   9 +-
 src/components/StepRenderer.tsx               |   3 +-
 .../audioAnalysis/AudioProvenanceVis.tsx      |   8 +-
 src/components/downloader/DownloadButtons.tsx |  29 +-
 .../downloader/tests/DownloadButtons.spec.tsx |  26 +-
 src/components/interface/AppAside.tsx         |   9 +-
 .../interface/tests/AppAside.spec.tsx         |   1 +
 .../screenRecording/ScreenRecordingReplay.tsx | 154 ++++--
 .../tests/ScreenRecordingReplay.spec.tsx      |  43 +-
 src/components/tests/ConfigSwitcher.spec.tsx  |   1 +
 src/controllers/ComponentController.tsx       |   4 +-
 .../tests/ComponentController.spec.tsx        |   4 +
 src/parser/LibraryConfigSchema.json           |  40 ++
 src/parser/StudyConfigSchema.json             |  44 ++
 src/parser/types.ts                           |   4 +
 .../assets/ScreenRecording.tsx                | 221 ++++----
 .../assets/WebcamRecording.tsx                | 167 ++++++
 src/storage/engines/FirebaseStorageEngine.ts  |  15 +
 src/storage/engines/LocalStorageEngine.ts     |  12 +
 src/storage/engines/SupabaseStorageEngine.ts  |  11 +
 src/storage/engines/types.ts                  |  35 ++
 src/storage/tests/edgeCases.spec.ts           |   8 +
 src/storage/tests/highLevel.spec.ts           |   2 +-
 src/storage/tests/highLevelFirebase.spec.ts   |  14 +
 src/store/hooks/tests/useRecording.spec.ts    |  79 ++-
 .../hooks/tests/useRecordingConfig.spec.ts    |  23 +-
 src/store/hooks/tests/useReplay.spec.tsx      |  31 ++
 src/store/hooks/useRecording.ts               | 477 +++++++++++-------
 src/store/hooks/useRecordingConfig.ts         |  16 +-
 src/store/hooks/useReplay.ts                  | 101 ++--
 src/store/store.tsx                           |   4 +
 src/store/types.ts                            |   1 +
 src/tests/utils.ts                            |   4 +
 src/utils/handleDownloadFiles.ts              | 122 ++++-
 src/utils/tests/handleDownloadFiles.spec.ts   |  77 ++-
 src/utils/tests/useStudyRecordings.spec.ts    |  16 +
 src/utils/useStudyRecordings.ts               |  39 +-
 48 files changed, 1483 insertions(+), 529 deletions(-)
 create mode 100644 public/libraries/webcam-recording/config.json
 create mode 100644 public/library-webcam-recording/assets/webcam-recording-page.md
 create mode 100644 public/library-webcam-recording/assets/webcam-recording.md
 create mode 100644 public/library-webcam-recording/config.json
 create mode 100644 src/public/libraries/webcam-recording/assets/WebcamRecording.tsx

diff --git a/public/libraries/screen-recording/config.json b/public/libraries/screen-recording/config.json
index c755ef381c..b2f9c922c3 100644
--- a/public/libraries/screen-recording/config.json
+++ b/public/libraries/screen-recording/config.json
@@ -1,6 +1,6 @@
 {
   "$schema": "https://raw.githubusercontent.com/revisit-studies/study/v2.4.3/src/parser/LibraryConfigSchema.json",
-  "description": "This is a required library for screen recording. It provides a component that requests user permission for screen and microphone access. Then, it starts screen capture until the end of the study.",
+  "description": "This library requests permission for screen recording and any configured webcam or microphone recording, then keeps those capture streams active until the end of the study.",
   "components": {
     "screenRecordingPermission": {
       "description": "Get permission to start Screen recording",
diff --git a/public/libraries/webcam-recording/config.json b/public/libraries/webcam-recording/config.json
new file mode 100644
index 0000000000..9d331cdebd
--- /dev/null
+++ b/public/libraries/webcam-recording/config.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://raw.githubusercontent.com/revisit-studies/study/dev/src/parser/LibraryConfigSchema.json",
+  "description": "This library requests webcam and optional microphone permission, then keeps those capture streams active until the end of the study.",
+  "components": {
+    "webcamRecordingPermission": {
+      "description": "Get permission to start webcam recording",
+      "type": "react-component",
+      "path": "libraries/webcam-recording/assets/WebcamRecording.tsx",
+      "nextButtonLocation": "belowStimulus",
+      "nextButtonText": "Continue",
+      "recordAudio": false,
+      "response": [{
+        "hidden": true,
+        "type": "reactive",
+        "id": "webcamRecordingPermission",
+        "prompt": "Webcam recording enabled"
+      }]
+    }
+  },
+  "sequences": {}
+}
diff --git a/public/library-screen-recording/assets/screen-recording-page.md b/public/library-screen-recording/assets/screen-recording-page.md
index 6b429fc838..da5d66bdc9 100644
--- a/public/library-screen-recording/assets/screen-recording-page.md
+++ b/public/library-screen-recording/assets/screen-recording-page.md
@@ -1,9 +1,8 @@
 
 # Demo Page
 
-Any stimulus that follows the `screenRecordingPermission` page can be recorded.
+Any stimulus that follows the `screenRecordingPermission` page can capture both screen and webcam video.
 
 Explore the webpage in the iframe below, then proceed to the next page.
 
 <iframe src="https://revisit.dev/" height="600px" style="border: 2px solid #000" >
-
diff --git a/public/library-screen-recording/assets/screen-recording.md b/public/library-screen-recording/assets/screen-recording.md
index d22f8dfcbc..7911e5078c 100644
--- a/public/library-screen-recording/assets/screen-recording.md
+++ b/public/library-screen-recording/assets/screen-recording.md
@@ -2,7 +2,7 @@
 
 This is a demo of the library `screen-recording`.
 
-This is a required library for screen recording. It provides a component that requests user permission for screen and microphone access. Then, it starts screen capture until the end of the study.
+This library requests permission for screen recording and any configured webcam or microphone recording, then keeps those capture streams active until the end of the study.
 
 ## Available Components
 
diff --git a/public/library-screen-recording/config.json b/public/library-screen-recording/config.json
index 6d587f9315..53827723b0 100644
--- a/public/library-screen-recording/config.json
+++ b/public/library-screen-recording/config.json
@@ -1,5 +1,5 @@
 {
-  "$schema": "https://raw.githubusercontent.com/revisit-studies/study/v2.4.3/src/parser/StudyConfigSchema.json",
+  "$schema": "https://raw.githubusercontent.com/revisit-studies/study/dev/src/parser/StudyConfigSchema.json",
   "studyMetadata": {
     "title": "Screen Recording",
     "version": "1.0.0",
@@ -7,7 +7,7 @@
       "The reVISit Team"
     ],
     "date": "2026-02-23",
-    "description": "Example study using the screen-recording library.",
+    "description": "Example study using the screen-recording library with screen and webcam capture.",
     "organizations": [
       "University of Utah",
       "WPI"
@@ -18,7 +18,8 @@
     "logoPath": "revisitAssets/revisitLogoSquare.svg",
     "withProgressBar": true,
     "withSidebar": false,
-    "recordScreen": true
+    "recordScreen": true,
+    "recordWebcam": true
   },
   "importedLibraries": [
     "screen-recording"
diff --git a/public/library-webcam-recording/assets/webcam-recording-page.md b/public/library-webcam-recording/assets/webcam-recording-page.md
new file mode 100644
index 0000000000..6e7d6d1480
--- /dev/null
+++ b/public/library-webcam-recording/assets/webcam-recording-page.md
@@ -0,0 +1,5 @@
+# Demo Page
+
+Any stimulus that follows the `webcamRecordingPermission` page can capture webcam video.
+
+Proceed to the next page after confirming that your webcam preview is active.
diff --git a/public/library-webcam-recording/assets/webcam-recording.md b/public/library-webcam-recording/assets/webcam-recording.md
new file mode 100644
index 0000000000..39e245a024
--- /dev/null
+++ b/public/library-webcam-recording/assets/webcam-recording.md
@@ -0,0 +1,13 @@
+# Webcam Recording
+
+This is a demo of the library `webcam-recording`.
+
+This library requests webcam and optional microphone permission, then keeps those capture streams active until the end of the study.
+
+## Available Components
+
+- webcamRecordingPermission
+
+## Available Sequences
+
+None
diff --git a/public/library-webcam-recording/config.json b/public/library-webcam-recording/config.json
new file mode 100644
index 0000000000..599d5d7138
--- /dev/null
+++ b/public/library-webcam-recording/config.json
@@ -0,0 +1,46 @@
+{
+  "$schema": "https://raw.githubusercontent.com/revisit-studies/study/dev/src/parser/StudyConfigSchema.json",
+  "studyMetadata": {
+    "title": "Webcam Recording",
+    "version": "1.0.0",
+    "authors": [
+      "The reVISit Team"
+    ],
+    "date": "2026-08-24",
+    "description": "Example study using the webcam-recording library.",
+    "organizations": [
+      "University of Utah",
+      "WPI"
+    ]
+  },
+  "uiConfig": {
+    "contactEmail": "contact@revisit.dev",
+    "logoPath": "revisitAssets/revisitLogoSquare.svg",
+    "withProgressBar": true,
+    "withSidebar": false,
+    "recordWebcam": true
+  },
+  "importedLibraries": [
+    "webcam-recording"
+  ],
+  "components": {
+    "introduction": {
+      "type": "markdown",
+      "path": "library-webcam-recording/assets/webcam-recording.md",
+      "response": []
+    },
+    "demo-recording": {
+      "type": "markdown",
+      "path": "library-webcam-recording/assets/webcam-recording-page.md",
+      "response": []
+    }
+  },
+  "sequence": {
+    "order": "fixed",
+    "components": [
+      "introduction",
+      "$webcam-recording.components.webcamRecordingPermission",
+      "demo-recording"
+    ]
+  }
+}
diff --git a/src/analysis/individualStudy/StudyAnalysisTabs.tsx b/src/analysis/individualStudy/StudyAnalysisTabs.tsx
index 983e5e6c22..034bc9ac9d 100644
--- a/src/analysis/individualStudy/StudyAnalysisTabs.tsx
+++ b/src/analysis/individualStudy/StudyAnalysisTabs.tsx
@@ -99,7 +99,7 @@ export function StudyAnalysisTabs({ globalConfig }: { globalConfig: GlobalConfig
   const [selectedConditions, setSelectedConditions] = useState<string[]>(['ALL']);
   const [availableConditions, setAvailableConditions] = useState<{ value: string; label: string }[]>([]);
 
-  const { hasAudioRecording, hasScreenRecording } = useStudyRecordings(studyConfig);
+  const { hasAudioRecording, hasScreenRecording, hasWebcamRecording } = useStudyRecordings(studyConfig);
 
   const { storageEngine } = useStorageEngine();
   const navigate = useNavigate();
@@ -429,6 +429,7 @@ export function StudyAnalysisTabs({ globalConfig }: { globalConfig: GlobalConfig
                   gap="10px"
                   hasAudio={hasAudioRecording}
                   hasScreenRecording={hasScreenRecording}
+                  hasWebcamRecording={hasWebcamRecording}
                 />
               )}
             </Flex>
diff --git a/src/analysis/individualStudy/thinkAloud/ThinkAloudFooter.tsx b/src/analysis/individualStudy/thinkAloud/ThinkAloudFooter.tsx
index 94e4d58661..a6f4787fe8 100644
--- a/src/analysis/individualStudy/thinkAloud/ThinkAloudFooter.tsx
+++ b/src/analysis/individualStudy/thinkAloud/ThinkAloudFooter.tsx
@@ -28,7 +28,7 @@ import { TagSelector } from './tags/TagSelector';
 import { encryptIndex } from '../../../utils/encryptDecryptIndex';
 import { parseTrialOrder } from '../../../utils/parseTrialOrder';
 import { PREFIX } from '../../../utils/Prefix';
-import { handleTaskAudio, handleTaskScreenRecording } from '../../../utils/handleDownloadFiles';
+import { handleTaskAudio, handleTaskRecordings } from '../../../utils/handleDownloadFiles';
 import { ParticipantRejectModal } from '../ParticipantRejectModal';
 import { StorageEngine } from '../../../storage/engines/types';
 import { useReplayContext } from '../../../store/hooks/useReplay';
@@ -129,15 +129,35 @@ export function ThinkAloudFooter({
   const assetKey = `${participantId}\u0000${currentTrial}`;
   const [audio, setAudio] = useState<{ key: string; url: string | null }>({ key: '', url: null });
   const [screenRecording, setScreenRecording] = useState<{ key: string; url: string | null }>({ key: '', url: null });
+  const [webcamRecording, setWebcamRecording] = useState<{ key: string; url: string | null }>({ key: '', url: null });
   const audioUrl = audio.key === assetKey ? audio.url : null;
   const screenRecordingUrl = screenRecording.key === assetKey ? screenRecording.url : null;
+  const webcamRecordingUrl = webcamRecording.key === assetKey ? webcamRecording.url : null;
 
   useEffect(() => {
     let cancelled = false;
+    const loadedUrls: string[] = [];
+    const releaseUrl = (url: string | null) => {
+      if (url?.startsWith('blob:')) {
+        URL.revokeObjectURL(url);
+      }
+    };
+    const setLoadedAsset = (
+      setter: (value: { key: string; url: string | null }) => void,
+      url: string | null,
+    ) => {
+      if (cancelled) {
+        releaseUrl(url);
+        return;
+      }
+      if (url) loadedUrls.push(url);
+      setter({ key: assetKey, url });
+    };
 
     async function fetchAssetsUrl() {
       setAudio({ key: assetKey, url: null });
       setScreenRecording({ key: assetKey, url: null });
+      setWebcamRecording({ key: assetKey, url: null });
 
       if (!storageEngine || !participantId || !currentTrial) {
         return;
@@ -145,9 +165,7 @@ export function ThinkAloudFooter({
 
       try {
         const url = await storageEngine.getAudioUrl(currentTrial, participantId);
-        if (!cancelled) {
-          setAudio({ key: assetKey, url });
-        }
+        setLoadedAsset(setAudio, url);
       } catch {
         if (!cancelled) {
           setAudio({ key: assetKey, url: null });
@@ -156,12 +174,19 @@ export function ThinkAloudFooter({
 
       try {
         const url = await storageEngine.getScreenRecording(currentTrial, participantId);
+        setLoadedAsset(setScreenRecording, url);
+      } catch {
         if (!cancelled) {
-          setScreenRecording({ key: assetKey, url });
+          setScreenRecording({ key: assetKey, url: null });
         }
+      }
+
+      try {
+        const url = await storageEngine.getWebcamRecording(currentTrial, participantId);
+        setLoadedAsset(setWebcamRecording, url);
       } catch {
         if (!cancelled) {
-          setScreenRecording({ key: assetKey, url: null });
+          setWebcamRecording({ key: assetKey, url: null });
         }
       }
     }
@@ -170,6 +195,7 @@ export function ThinkAloudFooter({
 
     return () => {
       cancelled = true;
+      loadedUrls.forEach(releaseUrl);
     };
   }, [assetKey, currentTrial, participantId, storageEngine]);
 
@@ -186,18 +212,21 @@ export function ThinkAloudFooter({
     });
   }, [storageEngine, participantId, currentTrial, audioUrl]);
 
-  const handleDownloadScreenRecording = useCallback(async () => {
+  const handleDownloadRecordings = useCallback(async () => {
     if (!storageEngine || !participantId || !currentTrial) {
       return;
     }
 
-    await handleTaskScreenRecording({
+    await handleTaskRecordings({
       storageEngine,
       participantId,
       identifier: currentTrial,
+      includeScreen: !!screenRecordingUrl,
+      includeWebcam: !!webcamRecordingUrl,
       screenRecordingUrl,
+      webcamRecordingUrl,
     });
-  }, [storageEngine, participantId, currentTrial, screenRecordingUrl]);
+  }, [storageEngine, participantId, currentTrial, screenRecordingUrl, webcamRecordingUrl]);
 
   const [transcriptLines, setTranscriptLines] = useState<TranscriptLinesWithTimes[] | null>(null);
 
@@ -647,9 +676,9 @@ export function ThinkAloudFooter({
                 </ActionIcon>
               </Tooltip>
             )}
-            {screenRecordingUrl && (
-              <Tooltip label="Download screen recording">
-                <ActionIcon variant="light" size={30} onClick={handleDownloadScreenRecording}>
+            {(screenRecordingUrl || webcamRecordingUrl) && (
+              <Tooltip label="Download recordings">
+                <ActionIcon variant="light" size={30} onClick={handleDownloadRecordings}>
                   <IconDeviceDesktopDown />
                 </ActionIcon>
               </Tooltip>
diff --git a/src/analysis/individualStudy/thinkAloud/tests/ThinkAloudAnalysis.spec.tsx b/src/analysis/individualStudy/thinkAloud/tests/ThinkAloudAnalysis.spec.tsx
index 35e6251540..77bf51fb54 100644
--- a/src/analysis/individualStudy/thinkAloud/tests/ThinkAloudAnalysis.spec.tsx
+++ b/src/analysis/individualStudy/thinkAloud/tests/ThinkAloudAnalysis.spec.tsx
@@ -232,7 +232,7 @@ vi.mock('lodash.debounce', () => ({ default: (fn: (...args: never[]) => void) =>
 vi.mock('../../../../components/audioAnalysis/AudioProvenanceVis', () => ({ AudioProvenanceVis: () => <div data-testid="audio-provenance-vis" /> }));
 vi.mock('../../../../utils/encryptDecryptIndex', () => ({ encryptIndex: (i: number) => String(i) }));
 vi.mock('../../../../utils/Prefix', () => ({ PREFIX: '/' }));
-vi.mock('../../../../utils/handleDownloadFiles', () => ({ handleTaskAudio: vi.fn(), handleTaskScreenRecording: vi.fn() }));
+vi.mock('../../../../utils/handleDownloadFiles', () => ({ handleTaskAudio: vi.fn(), handleTaskRecordings: vi.fn() }));
 vi.mock('../../ParticipantRejectModal', () => ({ ParticipantRejectModal: () => null }));
 vi.mock('../../../../components/audioAnalysis/provenanceColors', () => ({ buildProvenanceLegendEntries: vi.fn(() => []) }));
 vi.mock('../../../../utils/syncReplay', () => ({ revisitPageId: 'test-page-id', syncChannel: { postMessage: vi.fn() } }));
@@ -547,6 +547,7 @@ const footerDefaultProps = {
 const mockFooterStorageEngine = {
   getAudioUrl: vi.fn().mockResolvedValue('http://test/audio.mp3'),
   getScreenRecording: vi.fn().mockResolvedValue('http://test/video.mp4'),
+  getWebcamRecording: vi.fn().mockResolvedValue(null),
   saveTags: vi.fn().mockResolvedValue(undefined),
   getTags: vi.fn().mockResolvedValue([]),
   getAllParticipantAndTaskTags: vi.fn().mockResolvedValue(null),
diff --git a/src/components/ConfigSwitcher.tsx b/src/components/ConfigSwitcher.tsx
index 6d3388d8d0..0e7431bfb6 100644
--- a/src/components/ConfigSwitcher.tsx
+++ b/src/components/ConfigSwitcher.tsx
@@ -2,7 +2,7 @@ import {
   Anchor, AppShell, Badge, Button, Card, Container, CopyButton, Divider, Flex, Image, MultiSelect, Skeleton, rem, Tabs, Text, Tooltip,
 } from '@mantine/core';
 import {
-  IconBan, IconBrandFirebase, IconBrandSupabase, IconChartHistogram, IconCheck, IconCopy, IconDatabase, IconDeviceDesktop, IconExternalLink, IconGraph, IconGraphOff, IconListCheck, IconMicrophone, IconSchema, IconSchemaOff,
+  IconBan, IconBrandFirebase, IconBrandSupabase, IconCamera, IconChartHistogram, IconCheck, IconCopy, IconDatabase, IconDeviceDesktop, IconExternalLink, IconGraph, IconGraphOff, IconListCheck, IconMicrophone, IconSchema, IconSchemaOff,
 } from '@tabler/icons-react';
 import { useEffect, useMemo, useState } from 'react';
 import { Timestamp } from 'firebase/firestore';
@@ -84,7 +84,7 @@ function ValidStudyCard({
     }
     return 'Data Collection Disabled';
   }, [modes, studyStatusAndTiming]);
-  const { hasAudioRecording, hasScreenRecording } = useStudyRecordings(config);
+  const { hasAudioRecording, hasScreenRecording, hasWebcamRecording } = useStudyRecordings(config);
   const {
     isBrowserAllowed,
     isDeviceAllowed,
@@ -197,6 +197,11 @@ function ValidStudyCard({
             <IconDeviceDesktop size={16} color="orange" />
           </Tooltip>
           )}
+          {hasWebcamRecording && (
+          <Tooltip label="Webcam recording enabled" withinPortal position="bottom">
+            <IconCamera size={16} color="orange" />
+          </Tooltip>
+          )}
           {modes?.developmentModeEnabled
             ? <Tooltip label="Development mode enabled" withinPortal position="bottom"><IconSchema size={16} color="green" /></Tooltip>
             : <Tooltip label="Development mode disabled" withinPortal position="bottom"><IconSchemaOff size={16} color="red" /></Tooltip>}
diff --git a/src/components/StepRenderer.tsx b/src/components/StepRenderer.tsx
index 1fe198b591..3cb0f15f9c 100644
--- a/src/components/StepRenderer.tsx
+++ b/src/components/StepRenderer.tsx
@@ -66,6 +66,7 @@ export function StepRenderer() {
   const { isRejected: isScreenRecordingUserRejected } = screenRecording;
 
   const analysisHasScreenRecording = useStoreSelector((state) => state.analysisHasScreenRecording);
+  const analysisHasWebcamRecording = useStoreSelector((state) => state.analysisHasWebcamRecording);
   const analysisCanPlayScreenRecording = useStoreSelector((state) => state.analysisCanPlayScreenRecording);
 
   useEffect(() => {
@@ -161,7 +162,7 @@ export function StepRenderer() {
   const { developmentModeEnabled, dataCollectionEnabled } = useMemo(() => modes, [modes]);
 
   // No default value for withSidebar since it's a required field in uiConfig
-  const sidebarOpen = useMemo(() => (((analysisHasScreenRecording && analysisCanPlayScreenRecording) || currentComponent === 'end') ? false : (componentConfig.withSidebar ?? studyConfig.uiConfig.withSidebar)), [analysisHasScreenRecording, analysisCanPlayScreenRecording, currentComponent, componentConfig.withSidebar, studyConfig.uiConfig.withSidebar]);
+  const sidebarOpen = useMemo(() => ((((analysisHasScreenRecording || analysisHasWebcamRecording) && analysisCanPlayScreenRecording) || currentComponent === 'end') ? false : (componentConfig.withSidebar ?? studyConfig.uiConfig.withSidebar)), [analysisHasScreenRecording, analysisHasWebcamRecording, analysisCanPlayScreenRecording, currentComponent, componentConfig.withSidebar, studyConfig.uiConfig.withSidebar]);
   const sidebarWidth = useMemo(() => componentConfig?.sidebarWidth ?? studyConfig.uiConfig.sidebarWidth ?? 300, [componentConfig, studyConfig]);
   const showTitleBar = useMemo(() => componentConfig.showTitleBar ?? studyConfig.uiConfig.showTitleBar ?? true, [componentConfig, studyConfig]);
 
diff --git a/src/components/audioAnalysis/AudioProvenanceVis.tsx b/src/components/audioAnalysis/AudioProvenanceVis.tsx
index a82148cc3e..c535549f2d 100644
--- a/src/components/audioAnalysis/AudioProvenanceVis.tsx
+++ b/src/components/audioAnalysis/AudioProvenanceVis.tsx
@@ -308,12 +308,14 @@ export function AudioProvenanceVis({
             throw new Error('Participant ID is required to load audio');
           }
 
-          const [audioUrl, screenUrl] = await Promise.all([
+          const [audioUrl, screenUrl, webcamUrl] = await Promise.all([
             safe(storageEngine.getAudio(taskName, participantId)),
             safe(storageEngine.getScreenRecording(taskName, participantId)),
+            safe(storageEngine.getWebcamRecording(taskName, participantId)),
           ]);
 
-          const url = screenUrl ?? audioUrl ?? null;
+          const url = screenUrl ?? audioUrl ?? webcamUrl ?? null;
+          const hasAudioSource = !!(screenUrl ?? audioUrl);
 
           if (!url) {
             setAnalysisHasAudio(false);
@@ -329,7 +331,7 @@ export function AudioProvenanceVis({
           updateReplayRef();
 
           setWaveSurferWidth(waveSurfer.getWidth());
-          setAnalysisHasAudio(true);
+          setAnalysisHasAudio(hasAudioSource);
           waveSurfer.seekTo(0);
           waveSurfer.on('redrawcomplete', () => setWaveSurferWidth(waveSurfer.getWidth()));
         } catch (error: unknown) {
diff --git a/src/components/downloader/DownloadButtons.tsx b/src/components/downloader/DownloadButtons.tsx
index 2ee6d2621f..c2ba9f899f 100644
--- a/src/components/downloader/DownloadButtons.tsx
+++ b/src/components/downloader/DownloadButtons.tsx
@@ -9,7 +9,7 @@ import { useDisclosure } from '@mantine/hooks';
 import { DownloadTidy, download } from './DownloadTidy';
 import { ParticipantDataWithStatus } from '../../storage/types';
 import { useStorageEngine } from '../../storage/storageEngineHooks';
-import { downloadParticipantsAudioZip, downloadParticipantsProvenanceZip, downloadParticipantsScreenRecordingZip } from '../../utils/handleDownloadFiles';
+import { downloadParticipantsAudioZip, downloadParticipantsProvenanceZip, downloadParticipantsRecordingsZip } from '../../utils/handleDownloadFiles';
 import { useAuth } from '../../store/hooks/useAuth';
 import type { StorageEngine } from '../../storage/engines/types';
 import { getParticipantQualitativeCodes } from './qualitativeCodes';
@@ -33,13 +33,13 @@ async function attachQualitativeCodesToParticipants(
 }
 
 export function DownloadButtons({
-  visibleParticipants, studyId, gap, fileName, hasAudio, hasScreenRecording,
-}: { visibleParticipants: ParticipantDataFetcher; studyId: string, gap?: string, fileName?: string | null; hasAudio?: boolean; hasScreenRecording?: boolean; }) {
+  visibleParticipants, studyId, gap, fileName, hasAudio, hasScreenRecording, hasWebcamRecording,
+}: { visibleParticipants: ParticipantDataFetcher; studyId: string, gap?: string, fileName?: string | null; hasAudio?: boolean; hasScreenRecording?: boolean; hasWebcamRecording?: boolean; }) {
   const [openDownload, { open, close }] = useDisclosure(false);
   const [participants, setParticipants] = useState<ParticipantDataWithStatus[]>([]);
   const [loadingProvenance, setLoadingProvenance] = useState(false);
   const [loadingAudio, setLoadingAudio] = useState(false);
-  const [loadingScreenRecording, setLoadingScreenRecording] = useState(false);
+  const [loadingRecordings, setLoadingRecordings] = useState(false);
   const { storageEngine } = useStorageEngine();
   const auth = useAuth();
 
@@ -99,24 +99,29 @@ export function DownloadButtons({
     }
   };
 
-  const handleDownloadScreenRecording = async () => {
-    setLoadingScreenRecording(true);
+  const handleDownloadRecordings = async () => {
+    setLoadingRecordings(true);
 
     try {
       const currParticipants = await fetchParticipants();
       if (!storageEngine) return;
-      await downloadParticipantsScreenRecordingZip({
+      await downloadParticipantsRecordingsZip({
         storageEngine,
         participants: currParticipants,
         studyId,
+        includeScreen: !!hasScreenRecording,
+        includeWebcam: !!hasWebcamRecording,
         fileName,
       });
     } finally {
-      setLoadingScreenRecording(false);
+      setLoadingRecordings(false);
     }
   };
 
   const tooltipText = typeof visibleParticipants !== 'function' ? `Download ${visibleParticipants.length} participants` : 'Download participants data';
+  const recordingsLabel = hasScreenRecording && hasWebcamRecording
+    ? 'screen and webcam recordings'
+    : hasWebcamRecording ? 'webcam recordings' : 'screen recordings';
 
   return (
     <>
@@ -166,14 +171,14 @@ export function DownloadButtons({
           </Tooltip>
         )}
 
-        {hasScreenRecording && (
-          <Tooltip label={`${tooltipText} screen recordings ZIP`}>
+        {(hasScreenRecording || hasWebcamRecording) && (
+          <Tooltip label={`${tooltipText} ${recordingsLabel} ZIP`}>
             <Button
               variant="light"
               disabled={visibleParticipants.length === 0 && typeof visibleParticipants !== 'function'}
-              onClick={handleDownloadScreenRecording}
+              onClick={handleDownloadRecordings}
               px={4}
-              loading={loadingScreenRecording}
+              loading={loadingRecordings}
             >
               <IconDeviceDesktopDown />
             </Button>
diff --git a/src/components/downloader/tests/DownloadButtons.spec.tsx b/src/components/downloader/tests/DownloadButtons.spec.tsx
index 0c57ce4dc5..cf5c081249 100644
--- a/src/components/downloader/tests/DownloadButtons.spec.tsx
+++ b/src/components/downloader/tests/DownloadButtons.spec.tsx
@@ -8,7 +8,7 @@ import {
 } from 'vitest';
 import { DownloadButtons } from '../DownloadButtons';
 import { download } from '../DownloadTidy';
-import { downloadParticipantsAudioZip, downloadParticipantsScreenRecordingZip } from '../../../utils/handleDownloadFiles';
+import { downloadParticipantsAudioZip, downloadParticipantsRecordingsZip } from '../../../utils/handleDownloadFiles';
 import type { ParticipantDataWithStatus } from '../../../storage/types';
 import { makeStoredAnswer } from '../../../tests/utils';
 
@@ -45,7 +45,7 @@ vi.mock('../DownloadTidy', () => ({
 vi.mock('../../../utils/handleDownloadFiles', () => ({
   downloadParticipantsAudioZip: vi.fn().mockResolvedValue(undefined),
   downloadParticipantsProvenanceZip: vi.fn().mockResolvedValue(undefined),
-  downloadParticipantsScreenRecordingZip: vi.fn().mockResolvedValue(undefined),
+  downloadParticipantsRecordingsZip: vi.fn().mockResolvedValue(undefined),
 }));
 
 vi.mock('@mantine/core', () => ({
@@ -117,6 +117,18 @@ describe('DownloadButtons', () => {
     expect(html).toContain('screen-icon');
   });
 
+  test('reuses the recording button when only webcam recording is enabled', () => {
+    const html = renderToStaticMarkup(<DownloadButtons {...baseProps} hasWebcamRecording />);
+    expect(html).toContain('screen-icon');
+  });
+
+  test('renders only one recording button when screen and webcam are enabled', () => {
+    const html = renderToStaticMarkup(
+      <DownloadButtons {...baseProps} hasScreenRecording hasWebcamRecording />,
+    );
+    expect(html.match(/screen-icon/g)).toHaveLength(1);
+  });
+
   test('buttons are disabled when participant list is empty', () => {
     const html = renderToStaticMarkup(<DownloadButtons {...baseProps} />);
     expect(html).toContain('disabled');
@@ -251,16 +263,18 @@ describe('DownloadButtons click handlers', () => {
     );
   });
 
-  test('screen recording button click calls downloadParticipantsScreenRecordingZip', async () => {
+  test('recording button downloads both configured recording types', async () => {
     await act(async () => {
-      render(<DownloadButtons studyId="test-study" visibleParticipants={[participant]} hasScreenRecording />);
+      render(<DownloadButtons studyId="test-study" visibleParticipants={[participant]} hasScreenRecording hasWebcamRecording />);
     });
 
     const screenBtn = screen.getByText('screen-icon').closest('button')!;
     await act(async () => { fireEvent.click(screenBtn); });
 
-    expect(vi.mocked(downloadParticipantsScreenRecordingZip)).toHaveBeenCalledWith(
-      expect.objectContaining({ studyId: 'test-study' }),
+    expect(vi.mocked(downloadParticipantsRecordingsZip)).toHaveBeenCalledWith(
+      expect.objectContaining({
+        studyId: 'test-study', includeScreen: true, includeWebcam: true,
+      }),
     );
   });
 
diff --git a/src/components/interface/AppAside.tsx b/src/components/interface/AppAside.tsx
index 3934466827..fcfaeeb761 100644
--- a/src/components/interface/AppAside.tsx
+++ b/src/components/interface/AppAside.tsx
@@ -12,7 +12,7 @@ import {
 } from '@mantine/core';
 import { useMemo, useState } from 'react';
 import {
-  IconBan, IconBrandFirebase, IconBrandSupabase, IconDatabase, IconDeviceDesktop, IconGraph, IconGraphOff, IconInfoCircle, IconMicrophone, IconSettingsShare, IconUserPlus,
+  IconBan, IconBrandFirebase, IconBrandSupabase, IconCamera, IconDatabase, IconDeviceDesktop, IconGraph, IconGraphOff, IconInfoCircle, IconMicrophone, IconSettingsShare, IconUserPlus,
 } from '@tabler/icons-react';
 import { useHref } from 'react-router';
 import { StepsPanel } from './StepsPanel';
@@ -57,7 +57,7 @@ export function AppAside() {
   const nextParticipantDisabled = useMemo(() => activeTab === 'allTrials' || isAnalysis, [activeTab, isAnalysis]);
 
   const modes = useStoreSelector((state) => state.modes);
-  const { hasAudioRecording, hasScreenRecording } = useStudyRecordings(studyConfig);
+  const { hasAudioRecording, hasScreenRecording, hasWebcamRecording } = useStudyRecordings(studyConfig);
   const {
     isBrowserAllowed,
     isDeviceAllowed,
@@ -132,6 +132,11 @@ export function AppAside() {
                 <IconDeviceDesktop size={16} color="orange" />
               </Tooltip>
             )}
+            {hasWebcamRecording && (
+              <Tooltip label="Webcam recording enabled" withinPortal position="bottom">
+                <IconCamera size={16} color="orange" />
+              </Tooltip>
+            )}
             {modes?.dataSharingEnabled
               ? <Tooltip label="Data sharing enabled" withinPortal position="bottom"><IconGraph size={16} color="green" /></Tooltip>
               : <Tooltip label="Data sharing disabled" withinPortal position="bottom"><IconGraphOff size={16} color="red" /></Tooltip>}
diff --git a/src/components/interface/tests/AppAside.spec.tsx b/src/components/interface/tests/AppAside.spec.tsx
index 7658ca037a..cf94e6924c 100644
--- a/src/components/interface/tests/AppAside.spec.tsx
+++ b/src/components/interface/tests/AppAside.spec.tsx
@@ -99,6 +99,7 @@ vi.mock('@tabler/icons-react', () => ({
   IconBan: () => null,
   IconBrandFirebase: () => null,
   IconBrandSupabase: () => null,
+  IconCamera: () => null,
   IconDatabase: () => null,
   IconDeviceDesktop: () => null,
   IconGraph: () => null,
diff --git a/src/components/screenRecording/ScreenRecordingReplay.tsx b/src/components/screenRecording/ScreenRecordingReplay.tsx
index 63112a579d..a0ef743243 100644
--- a/src/components/screenRecording/ScreenRecordingReplay.tsx
+++ b/src/components/screenRecording/ScreenRecordingReplay.tsx
@@ -1,11 +1,12 @@
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useSearchParams } from 'react-router';
-import { Box } from '@mantine/core';
+import {
+  Box, Flex, Text,
+} from '@mantine/core';
 import { useStorageEngine } from '../../storage/storageEngineHooks';
 import {
   useStoreActions,
   useStoreDispatch,
-  useStoreSelector,
 } from '../../store/store';
 import { useCurrentIdentifier } from '../../routes/utils';
 import { useIsAnalysis } from '../../store/hooks/useIsAnalysis';
@@ -18,17 +19,27 @@ export function ScreenRecordingReplay() {
     [searchParams],
   );
 
-  const { videoRef, updateReplayRef, isPlaying } = useReplayContext();
+  const {
+    screenVideoRef,
+    webcamVideoRef,
+    updateReplayRef,
+    isPlaying,
+  } = useReplayContext();
+
+  const [hasScreenVideo, setHasScreenVideo] = useState(false);
+  const [hasWebcamVideo, setHasWebcamVideo] = useState(false);
 
   useEffect(() => {
     updateReplayRef();
   }, [updateReplayRef]);
 
-  const analysisCanPlayScreenRecording = useStoreSelector((state) => state.analysisCanPlayScreenRecording);
-
   const { storageEngine } = useStorageEngine();
 
-  const { setAnalysisHasScreenRecording, setAnalysisCanPlayScreenRecording } = useStoreActions();
+  const {
+    setAnalysisHasScreenRecording,
+    setAnalysisHasWebcamRecording,
+    setAnalysisCanPlayScreenRecording,
+  } = useStoreActions();
 
   const storeDispatch = useStoreDispatch();
 
@@ -36,42 +47,65 @@ export function ScreenRecordingReplay() {
 
   const identifier = useCurrentIdentifier();
 
-  // Load and show the video
   useEffect(
     () => {
-      async function getVideoURL() {
+      async function getVideoURLs() {
         if (isAnalysis && identifier && storageEngine) {
           try {
             if (!participantId) {
-              throw new Error('Participant ID is required to load audio');
-            }
-            const url = await storageEngine.getScreenRecording(identifier, participantId);
-            if (!url) {
-              storeDispatch(setAnalysisHasScreenRecording(false));
-              storeDispatch(setAnalysisCanPlayScreenRecording(false));
-              return;
+              throw new Error('Participant ID is required to load recordings');
             }
-            storeDispatch(setAnalysisHasScreenRecording(true));
-            if (videoRef.current) {
-              const video = videoRef.current;
-              video.preload = 'metadata';
-              if (url) {
-                videoRef.current.src = url;
-                updateReplayRef();
+
+            const safeGetRecording = async (getRecording: () => Promise<string | null>) => {
+              try {
+                return await getRecording();
+              } catch {
+                return null;
               }
+            };
+            const [screenUrl, webcamUrl] = await Promise.all([
+              safeGetRecording(() => storageEngine.getScreenRecording(identifier, participantId)),
+              safeGetRecording(() => storageEngine.getWebcamRecording(identifier, participantId)),
+            ]);
+
+            const hasScreenRecording = !!screenUrl;
+            const hasWebcamRecording = !!webcamUrl;
+            const hasVideoRecording = hasScreenRecording || hasWebcamRecording;
+
+            setHasScreenVideo(hasScreenRecording);
+            setHasWebcamVideo(hasWebcamRecording);
+            storeDispatch(setAnalysisHasScreenRecording(hasScreenRecording));
+            storeDispatch(setAnalysisHasWebcamRecording(hasWebcamRecording));
+            storeDispatch(setAnalysisCanPlayScreenRecording(hasVideoRecording));
+
+            if (screenVideoRef.current) {
+              screenVideoRef.current.preload = 'metadata';
+              screenVideoRef.current.src = screenUrl || '';
+            }
+
+            if (webcamVideoRef.current) {
+              webcamVideoRef.current.preload = 'metadata';
+              webcamVideoRef.current.src = webcamUrl || '';
             }
-          } catch (error) {
+
+            updateReplayRef();
+          } catch {
+            setHasScreenVideo(false);
+            setHasWebcamVideo(false);
             storeDispatch(setAnalysisHasScreenRecording(false));
+            storeDispatch(setAnalysisHasWebcamRecording(false));
             storeDispatch(setAnalysisCanPlayScreenRecording(false));
-            throw new Error(error as string);
           }
         } else {
+          setHasScreenVideo(false);
+          setHasWebcamVideo(false);
           storeDispatch(setAnalysisHasScreenRecording(false));
+          storeDispatch(setAnalysisHasWebcamRecording(false));
           storeDispatch(setAnalysisCanPlayScreenRecording(false));
         }
       }
 
-      getVideoURL();
+      getVideoURLs();
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
@@ -81,30 +115,64 @@ export function ScreenRecordingReplay() {
       participantId,
       storeDispatch,
       setAnalysisHasScreenRecording,
+      setAnalysisHasWebcamRecording,
       setAnalysisCanPlayScreenRecording,
     ],
   );
 
+  const videoStyle = useMemo(() => ({
+    background: 'black',
+    width: '100%',
+    maxWidth: '100%',
+    maxHeight: 'calc(100vh - 270px)',
+    display: 'block',
+    margin: '20px auto',
+    height: 'auto',
+    border: `5px solid ${isPlaying ? '#ccc' : 'black'}`,
+  }), [isPlaying]);
+
   return (
     <Box pos="relative">
-      {analysisCanPlayScreenRecording && (
-      <video
-        ref={videoRef}
-        width="100%"
-        style={{
-          background: 'black',
-          maxWidth: '100%',
-          maxHeight: 'calc(100vh - 270px)',
-          display: 'block',
-          margin: '20px auto',
-          height: 'auto',
-          border: `5px solid ${isPlaying ? '#ccc' : 'black'}`,
-        }}
+      <Flex
+        gap="md"
+        direction={{ base: 'column', md: hasScreenVideo && hasWebcamVideo ? 'row' : 'column' }}
+        align="stretch"
       >
-        <source type="video/mp4" />
-        Your browser does not support the video tag.
-      </video>
-      )}
+        <Box flex={hasScreenVideo && hasWebcamVideo ? 2 : 1}>
+          <Text fw={600} size="sm" ta="center" mb="xs" display={hasScreenVideo ? 'block' : 'none'}>
+            Screen Recording
+          </Text>
+          <video
+            ref={screenVideoRef}
+            width="100%"
+            style={{
+              ...videoStyle,
+              display: hasScreenVideo ? 'block' : 'none',
+            }}
+          >
+            <source type="video/mp4" />
+            Your browser does not support the video tag.
+          </video>
+        </Box>
+
+        <Box flex={1}>
+          <Text fw={600} size="sm" ta="center" mb="xs" display={hasWebcamVideo ? 'block' : 'none'}>
+            Webcam Recording
+          </Text>
+          <video
+            ref={webcamVideoRef}
+            width="100%"
+            style={{
+              ...videoStyle,
+              display: hasWebcamVideo ? 'block' : 'none',
+              objectFit: 'cover',
+            }}
+          >
+            <source type="video/mp4" />
+            Your browser does not support the video tag.
+          </video>
+        </Box>
+      </Flex>
     </Box>
   );
 }
diff --git a/src/components/screenRecording/tests/ScreenRecordingReplay.spec.tsx b/src/components/screenRecording/tests/ScreenRecordingReplay.spec.tsx
index 64aa596136..ab119d5fca 100644
--- a/src/components/screenRecording/tests/ScreenRecordingReplay.spec.tsx
+++ b/src/components/screenRecording/tests/ScreenRecordingReplay.spec.tsx
@@ -1,4 +1,6 @@
-import { render, act, cleanup } from '@testing-library/react';
+import {
+  render, act, cleanup, waitFor,
+} from '@testing-library/react';
 import {
   afterEach, beforeEach, describe, expect, test, vi,
 } from 'vitest';
@@ -12,7 +14,7 @@ let mockSearchParams = new URLSearchParams();
 let mockUpdateReplayRef = vi.fn();
 let mockIsPlaying = false;
 let mockVideoRef: { current: HTMLVideoElement | null } = { current: null };
-let mockCanPlayScreenRecording = false;
+let mockWebcamVideoRef: { current: HTMLVideoElement | null } = { current: null };
 
 // ── mocks ─────────────────────────────────────────────────────────────────────
 
@@ -22,6 +24,8 @@ vi.mock('react-router', () => ({
 
 vi.mock('@mantine/core', () => ({
   Box: ({ children }: { children?: React.ReactNode }) => <div>{children}</div>,
+  Flex: ({ children }: { children?: React.ReactNode }) => <div>{children}</div>,
+  Text: ({ children }: { children?: React.ReactNode }) => <span>{children}</span>,
 }));
 
 vi.mock('../../../storage/storageEngineHooks', () => ({
@@ -30,12 +34,13 @@ vi.mock('../../../storage/storageEngineHooks', () => ({
 
 const mockDispatch = vi.fn();
 const mockSetAnalysisHasScreenRecording = vi.fn();
+const mockSetAnalysisHasWebcamRecording = vi.fn();
 const mockSetAnalysisCanPlayScreenRecording = vi.fn();
 
 vi.mock('../../../store/store', () => ({
-  useStoreSelector: () => mockCanPlayScreenRecording,
   useStoreActions: () => ({
     setAnalysisHasScreenRecording: mockSetAnalysisHasScreenRecording,
+    setAnalysisHasWebcamRecording: mockSetAnalysisHasWebcamRecording,
     setAnalysisCanPlayScreenRecording: mockSetAnalysisCanPlayScreenRecording,
   }),
   useStoreDispatch: () => mockDispatch,
@@ -51,7 +56,8 @@ vi.mock('../../../store/hooks/useIsAnalysis', () => ({
 
 vi.mock('../../../store/hooks/useReplay', () => ({
   useReplayContext: () => ({
-    videoRef: mockVideoRef,
+    screenVideoRef: mockVideoRef,
+    webcamVideoRef: mockWebcamVideoRef,
     updateReplayRef: mockUpdateReplayRef,
     isPlaying: mockIsPlaying,
   }),
@@ -67,7 +73,7 @@ describe('ScreenRecordingReplay', () => {
     mockUpdateReplayRef = vi.fn();
     mockIsPlaying = false;
     mockVideoRef = { current: null };
-    mockCanPlayScreenRecording = false;
+    mockWebcamVideoRef = { current: null };
     mockDispatch.mockClear();
   });
 
@@ -78,9 +84,9 @@ describe('ScreenRecordingReplay', () => {
     expect(container).toBeDefined();
   });
 
-  test('does not render video when analysisCanPlayScreenRecording is false', async () => {
+  test('keeps both video elements mounted for asynchronous URL loading', async () => {
     const { container } = await act(async () => render(<ScreenRecordingReplay />));
-    expect(container.querySelector('video')).toBeNull();
+    expect(container.querySelectorAll('video')).toHaveLength(2);
   });
 
   test('dispatches store actions on mount when not in analysis mode', async () => {
@@ -101,6 +107,7 @@ describe('ScreenRecordingReplay', () => {
     mockIsAnalysis = true;
     mockStorageEngine = {
       getScreenRecording: vi.fn().mockResolvedValue('http://example.com/video.mp4'),
+      getWebcamRecording: vi.fn().mockResolvedValue(null),
     };
     mockSearchParams = new URLSearchParams({ participantId: 'p1' });
     await act(async () => { render(<ScreenRecordingReplay />); });
@@ -115,23 +122,29 @@ describe('ScreenRecordingReplay', () => {
     mockIsAnalysis = true;
     mockStorageEngine = {
       getScreenRecording: vi.fn().mockResolvedValue('http://example.com/video.mp4'),
+      getWebcamRecording: vi.fn().mockResolvedValue(null),
     };
     mockSearchParams = new URLSearchParams({ participantId: 'p1' });
-    const mockVideo = { preload: '', src: '' } as Pick<HTMLVideoElement, 'preload' | 'src'> as HTMLVideoElement;
-    mockVideoRef = { current: mockVideo };
-    await act(async () => { render(<ScreenRecordingReplay />); });
-    expect(mockVideo.src).toBe('http://example.com/video.mp4');
+    const { container } = await act(async () => render(<ScreenRecordingReplay />));
+    const screenVideo = container.querySelectorAll('video')[0];
+    await waitFor(() => expect(screenVideo.src).toBe('http://example.com/video.mp4'));
     expect(mockUpdateReplayRef).toHaveBeenCalled();
   });
 
-  test('renders video element when analysisCanPlayScreenRecording is true', async () => {
-    mockCanPlayScreenRecording = true;
+  test('loads a webcam recording when no screen recording exists', async () => {
+    mockIsAnalysis = true;
+    mockStorageEngine = {
+      getScreenRecording: vi.fn().mockResolvedValue(null),
+      getWebcamRecording: vi.fn().mockResolvedValue('http://example.com/webcam.webm'),
+    };
+    mockSearchParams = new URLSearchParams({ participantId: 'p1' });
     const { container } = await act(async () => render(<ScreenRecordingReplay />));
-    expect(container.querySelector('video')).not.toBeNull();
+    const webcamVideo = container.querySelectorAll('video')[1];
+    await waitFor(() => expect(webcamVideo.src).toBe('http://example.com/webcam.webm'));
+    expect(mockDispatch).toHaveBeenCalledWith(mockSetAnalysisHasWebcamRecording(true));
   });
 
   test('video border is grey when isPlaying is true', async () => {
-    mockCanPlayScreenRecording = true;
     mockIsPlaying = true;
     const { container } = await act(async () => render(<ScreenRecordingReplay />));
     const video = container.querySelector('video');
diff --git a/src/components/tests/ConfigSwitcher.spec.tsx b/src/components/tests/ConfigSwitcher.spec.tsx
index e25cf981e1..2be1d44c04 100644
--- a/src/components/tests/ConfigSwitcher.spec.tsx
+++ b/src/components/tests/ConfigSwitcher.spec.tsx
@@ -54,6 +54,7 @@ vi.mock('@tabler/icons-react', () => ({
   IconBan: () => null,
   IconBrandFirebase: () => null,
   IconBrandSupabase: () => null,
+  IconCamera: () => null,
   IconChartHistogram: () => null,
   IconCheck: () => null,
   IconCopy: () => null,
diff --git a/src/controllers/ComponentController.tsx b/src/controllers/ComponentController.tsx
index 8fa05578c3..ec00dcbc03 100644
--- a/src/controllers/ComponentController.tsx
+++ b/src/controllers/ComponentController.tsx
@@ -64,7 +64,7 @@ export function ComponentController() {
 
   const navigate = useNavigate();
 
-  const { studyHasScreenRecording } = useRecordingConfig();
+  const { studyHasScreenRecording, studyHasWebcamRecording } = useRecordingConfig();
 
   const isAnalysis = useIsAnalysis();
 
@@ -297,7 +297,7 @@ export function ComponentController() {
   const instructionLocation = currentConfig.instructionLocation ?? studyConfig.uiConfig.instructionLocation ?? 'sidebar';
   const instructionInSideBar = instructionLocation === 'sidebar';
 
-  if (studyHasScreenRecording && isAnalysis && analysisCanPlayScreenRecording) return <ScreenRecordingReplay key={`${currentStep}-stimulus`} />;
+  if ((studyHasScreenRecording || studyHasWebcamRecording) && isAnalysis && analysisCanPlayScreenRecording) return <ScreenRecordingReplay key={`${currentStep}-stimulus`} />;
 
   return (
     <>
diff --git a/src/controllers/tests/ComponentController.spec.tsx b/src/controllers/tests/ComponentController.spec.tsx
index 43ab32a476..4aaf616fbe 100644
--- a/src/controllers/tests/ComponentController.spec.tsx
+++ b/src/controllers/tests/ComponentController.spec.tsx
@@ -574,8 +574,10 @@ describe('ComponentController — effect coverage (render-based)', () => {
     vi.mocked(useRecordingConfig).mockReturnValue({
       studyHasScreenRecording: false,
       studyHasAudioRecording: false,
+      studyHasWebcamRecording: false,
       currentComponentHasAudioRecording: false,
       currentComponentHasScreenRecording: false,
+      currentComponentHasWebcamRecording: false,
       currentComponentHasClickToRecord: false,
     });
     vi.mocked(findBlockForStep).mockReturnValue([]);
@@ -708,8 +710,10 @@ describe('ComponentController — effect coverage (render-based)', () => {
     vi.mocked(useRecordingConfig).mockReturnValue({
       studyHasScreenRecording: true,
       studyHasAudioRecording: false,
+      studyHasWebcamRecording: false,
       currentComponentHasAudioRecording: false,
       currentComponentHasScreenRecording: false,
+      currentComponentHasWebcamRecording: false,
       currentComponentHasClickToRecord: false,
     });
     const stableStateCanPlay = makeStableState({ analysisCanPlayScreenRecording: true });
diff --git a/src/parser/LibraryConfigSchema.json b/src/parser/LibraryConfigSchema.json
index 3792023c30..a6fda2a01d 100644
--- a/src/parser/LibraryConfigSchema.json
+++ b/src/parser/LibraryConfigSchema.json
@@ -170,6 +170,10 @@
             "description": "Whether or not we want to utilize screen recording feature. If present, will override the record screen setting in the uiConfig. If true, the uiConfig must have recordScreen set to true or the screen will not be captured. It's also required that the library component, $screen-recording.components.screenRecordingPermission, be included in the study at some point before this component to ensure permissions are granted and screen capture has started.",
             "type": "boolean"
           },
+          "recordWebcam": {
+            "description": "Whether or not we want to utilize webcam recording. If present, will override the record webcam setting in the uiConfig. Studies using webcam without screen capture should include the webcam permission component before this component. Studies combining webcam with screen capture should use the screen recording permission component.",
+            "type": "boolean"
+          },
           "response": {
             "description": "The responses to the component",
             "items": {
@@ -1424,6 +1428,10 @@
           "description": "Whether or not we want to utilize screen recording feature. If present, will override the record screen setting in the uiConfig. If true, the uiConfig must have recordScreen set to true or the screen will not be captured. It's also required that the library component, $screen-recording.components.screenRecordingPermission, be included in the study at some point before this component to ensure permissions are granted and screen capture has started.",
           "type": "boolean"
         },
+        "recordWebcam": {
+          "description": "Whether or not we want to utilize webcam recording. If present, will override the record webcam setting in the uiConfig. Studies using webcam without screen capture should include the webcam permission component before this component. Studies combining webcam with screen capture should use the screen recording permission component.",
+          "type": "boolean"
+        },
         "response": {
           "description": "The responses to the component",
           "items": {
@@ -1733,6 +1741,10 @@
           "description": "Whether or not we want to utilize screen recording feature. If present, will override the record screen setting in the uiConfig. If true, the uiConfig must have recordScreen set to true or the screen will not be captured. It's also required that the library component, $screen-recording.components.screenRecordingPermission, be included in the study at some point before this component to ensure permissions are granted and screen capture has started.",
           "type": "boolean"
         },
+        "recordWebcam": {
+          "description": "Whether or not we want to utilize webcam recording. If present, will override the record webcam setting in the uiConfig. Studies using webcam without screen capture should include the webcam permission component before this component. Studies combining webcam with screen capture should use the screen recording permission component.",
+          "type": "boolean"
+        },
         "response": {
           "description": "The responses to the component",
           "items": {
@@ -2257,6 +2269,10 @@
           "description": "Whether or not we want to utilize screen recording feature. If present, will override the record screen setting in the uiConfig. If true, the uiConfig must have recordScreen set to true or the screen will not be captured. It's also required that the library component, $screen-recording.components.screenRecordingPermission, be included in the study at some point before this component to ensure permissions are granted and screen capture has started.",
           "type": "boolean"
         },
+        "recordWebcam": {
+          "description": "Whether or not we want to utilize webcam recording. If present, will override the record webcam setting in the uiConfig. Studies using webcam without screen capture should include the webcam permission component before this component. Studies combining webcam with screen capture should use the screen recording permission component.",
+          "type": "boolean"
+        },
         "response": {
           "description": "The responses to the component",
           "items": {
@@ -2886,6 +2902,10 @@
           "description": "Whether or not we want to utilize screen recording feature. If present, will override the record screen setting in the uiConfig. If true, the uiConfig must have recordScreen set to true or the screen will not be captured. It's also required that the library component, $screen-recording.components.screenRecordingPermission, be included in the study at some point before this component to ensure permissions are granted and screen capture has started.",
           "type": "boolean"
         },
+        "recordWebcam": {
+          "description": "Whether or not we want to utilize webcam recording. If present, will override the record webcam setting in the uiConfig. Studies using webcam without screen capture should include the webcam permission component before this component. Studies combining webcam with screen capture should use the screen recording permission component.",
+          "type": "boolean"
+        },
         "response": {
           "description": "The responses to the component",
           "items": {
@@ -3557,6 +3577,10 @@
           "description": "Whether or not we want to utilize screen recording feature. If present, will override the record screen setting in the uiConfig. If true, the uiConfig must have recordScreen set to true or the screen will not be captured. It's also required that the library component, $screen-recording.components.screenRecordingPermission, be included in the study at some point before this component to ensure permissions are granted and screen capture has started.",
           "type": "boolean"
         },
+        "recordWebcam": {
+          "description": "Whether or not we want to utilize webcam recording. If present, will override the record webcam setting in the uiConfig. Studies using webcam without screen capture should include the webcam permission component before this component. Studies combining webcam with screen capture should use the screen recording permission component.",
+          "type": "boolean"
+        },
         "response": {
           "description": "The responses to the component",
           "items": {
@@ -4538,6 +4562,10 @@
           "description": "Whether or not we want to utilize screen recording feature. If present, will override the record screen setting in the uiConfig. If true, the uiConfig must have recordScreen set to true or the screen will not be captured. It's also required that the library component, $screen-recording.components.screenRecordingPermission, be included in the study at some point before this component to ensure permissions are granted and screen capture has started.",
           "type": "boolean"
         },
+        "recordWebcam": {
+          "description": "Whether or not we want to utilize webcam recording. If present, will override the record webcam setting in the uiConfig. Studies using webcam without screen capture should include the webcam permission component before this component. Studies combining webcam with screen capture should use the screen recording permission component.",
+          "type": "boolean"
+        },
         "response": {
           "description": "The responses to the component",
           "items": {
@@ -4718,6 +4746,10 @@
           "description": "Whether or not we want to utilize screen recording feature. If present, will override the record screen setting in the uiConfig. If true, the uiConfig must have recordScreen set to true or the screen will not be captured. It's also required that the library component, $screen-recording.components.screenRecordingPermission, be included in the study at some point before this component to ensure permissions are granted and screen capture has started.",
           "type": "boolean"
         },
+        "recordWebcam": {
+          "description": "Whether or not we want to utilize webcam recording. If present, will override the record webcam setting in the uiConfig. Studies using webcam without screen capture should include the webcam permission component before this component. Studies combining webcam with screen capture should use the screen recording permission component.",
+          "type": "boolean"
+        },
         "response": {
           "description": "The responses to the component",
           "items": {
@@ -4902,6 +4934,10 @@
           "description": "Whether or not we want to utilize screen recording feature. If present, will override the record screen setting in the uiConfig. If true, the uiConfig must have recordScreen set to true or the screen will not be captured. It's also required that the library component, $screen-recording.components.screenRecordingPermission, be included in the study at some point before this component to ensure permissions are granted and screen capture has started.",
           "type": "boolean"
         },
+        "recordWebcam": {
+          "description": "Whether or not we want to utilize webcam recording. If present, will override the record webcam setting in the uiConfig. Studies using webcam without screen capture should include the webcam permission component before this component. Studies combining webcam with screen capture should use the screen recording permission component.",
+          "type": "boolean"
+        },
         "response": {
           "description": "The responses to the component",
           "items": {
@@ -5082,6 +5118,10 @@
           "description": "Whether or not we want to utilize screen recording feature. If present, will override the record screen setting in the uiConfig. If true, the uiConfig must have recordScreen set to true or the screen will not be captured. It's also required that the library component, $screen-recording.components.screenRecordingPermission, be included in the study at some point before this component to ensure permissions are granted and screen capture has started.",
           "type": "boolean"
         },
+        "recordWebcam": {
+          "description": "Whether or not we want to utilize webcam recording. If present, will override the record webcam setting in the uiConfig. Studies using webcam without screen capture should include the webcam permission component before this component. Studies combining webcam with screen capture should use the screen recording permission component.",
+          "type": "boolean"
+        },
         "response": {
           "description": "The responses to the component",
           "items": {
diff --git a/src/parser/StudyConfigSchema.json b/src/parser/StudyConfigSchema.json
index 0064e9f16a..cb3cfb3a69 100644
--- a/src/parser/StudyConfigSchema.json
+++ b/src/parser/StudyConfigSchema.json
@@ -170,6 +170,10 @@
             "description": "Whether or not we want to utilize screen recording feature. If present, will override the record screen setting in the uiConfig. If true, the uiConfig must have recordScreen set to true or the screen will not be captured. It's also required that the library component, $screen-recording.components.screenRecordingPermission, be included in the study at some point before this component to ensure permissions are granted and screen capture has started.",
             "type": "boolean"
           },
+          "recordWebcam": {
+            "description": "Whether or not we want to utilize webcam recording. If present, will override the record webcam setting in the uiConfig. Studies using webcam without screen capture should include the webcam permission component before this component. Studies combining webcam with screen capture should use the screen recording permission component.",
+            "type": "boolean"
+          },
           "response": {
             "description": "The responses to the component",
             "items": {
@@ -1524,6 +1528,10 @@
           "description": "Whether or not we want to utilize screen recording feature. If present, will override the record screen setting in the uiConfig. If true, the uiConfig must have recordScreen set to true or the screen will not be captured. It's also required that the library component, $screen-recording.components.screenRecordingPermission, be included in the study at some point before this component to ensure permissions are granted and screen capture has started.",
           "type": "boolean"
         },
+        "recordWebcam": {
+          "description": "Whether or not we want to utilize webcam recording. If present, will override the record webcam setting in the uiConfig. Studies using webcam without screen capture should include the webcam permission component before this component. Studies combining webcam with screen capture should use the screen recording permission component.",
+          "type": "boolean"
+        },
         "response": {
           "description": "The responses to the component",
           "items": {
@@ -1833,6 +1841,10 @@
           "description": "Whether or not we want to utilize screen recording feature. If present, will override the record screen setting in the uiConfig. If true, the uiConfig must have recordScreen set to true or the screen will not be captured. It's also required that the library component, $screen-recording.components.screenRecordingPermission, be included in the study at some point before this component to ensure permissions are granted and screen capture has started.",
           "type": "boolean"
         },
+        "recordWebcam": {
+          "description": "Whether or not we want to utilize webcam recording. If present, will override the record webcam setting in the uiConfig. Studies using webcam without screen capture should include the webcam permission component before this component. Studies combining webcam with screen capture should use the screen recording permission component.",
+          "type": "boolean"
+        },
         "response": {
           "description": "The responses to the component",
           "items": {
@@ -2306,6 +2318,10 @@
           "description": "Whether or not we want to utilize screen recording feature. If present, will override the record screen setting in the uiConfig. If true, the uiConfig must have recordScreen set to true or the screen will not be captured. It's also required that the library component, $screen-recording.components.screenRecordingPermission, be included in the study at some point before this component to ensure permissions are granted and screen capture has started.",
           "type": "boolean"
         },
+        "recordWebcam": {
+          "description": "Whether or not we want to utilize webcam recording. If present, will override the record webcam setting in the uiConfig. Studies using webcam without screen capture should include the webcam permission component before this component. Studies combining webcam with screen capture should use the screen recording permission component.",
+          "type": "boolean"
+        },
         "response": {
           "description": "The responses to the component",
           "items": {
@@ -2957,6 +2973,10 @@
           "description": "Whether or not we want to utilize screen recording feature. If present, will override the record screen setting in the uiConfig. If true, the uiConfig must have recordScreen set to true or the screen will not be captured. It's also required that the library component, $screen-recording.components.screenRecordingPermission, be included in the study at some point before this component to ensure permissions are granted and screen capture has started.",
           "type": "boolean"
         },
+        "recordWebcam": {
+          "description": "Whether or not we want to utilize webcam recording. If present, will override the record webcam setting in the uiConfig. Studies using webcam without screen capture should include the webcam permission component before this component. Studies combining webcam with screen capture should use the screen recording permission component.",
+          "type": "boolean"
+        },
         "response": {
           "description": "The responses to the component",
           "items": {
@@ -3628,6 +3648,10 @@
           "description": "Whether or not we want to utilize screen recording feature. If present, will override the record screen setting in the uiConfig. If true, the uiConfig must have recordScreen set to true or the screen will not be captured. It's also required that the library component, $screen-recording.components.screenRecordingPermission, be included in the study at some point before this component to ensure permissions are granted and screen capture has started.",
           "type": "boolean"
         },
+        "recordWebcam": {
+          "description": "Whether or not we want to utilize webcam recording. If present, will override the record webcam setting in the uiConfig. Studies using webcam without screen capture should include the webcam permission component before this component. Studies combining webcam with screen capture should use the screen recording permission component.",
+          "type": "boolean"
+        },
         "response": {
           "description": "The responses to the component",
           "items": {
@@ -4732,6 +4756,10 @@
           "description": "Desired fps for recording screen. If possible, this value will be used, but if it's not possible, the user agent will use the closest possible match.",
           "type": "number"
         },
+        "recordWebcam": {
+          "description": "Whether or not we want to utilize webcam recording. If true, will record webcam video on all components unless deactivated on individual components. Defaults to false. Studies using webcam without screen capture should include the webcam permission component before any recorded component. Studies combining webcam with screen capture should use the screen recording permission component.",
+          "type": "boolean"
+        },
         "responseDividers": {
           "description": "Whether to show the response dividers. Defaults to false.",
           "type": "boolean"
@@ -4949,6 +4977,10 @@
           "description": "Whether or not we want to utilize screen recording feature. If present, will override the record screen setting in the uiConfig. If true, the uiConfig must have recordScreen set to true or the screen will not be captured. It's also required that the library component, $screen-recording.components.screenRecordingPermission, be included in the study at some point before this component to ensure permissions are granted and screen capture has started.",
           "type": "boolean"
         },
+        "recordWebcam": {
+          "description": "Whether or not we want to utilize webcam recording. If present, will override the record webcam setting in the uiConfig. Studies using webcam without screen capture should include the webcam permission component before this component. Studies combining webcam with screen capture should use the screen recording permission component.",
+          "type": "boolean"
+        },
         "response": {
           "description": "The responses to the component",
           "items": {
@@ -5129,6 +5161,10 @@
           "description": "Whether or not we want to utilize screen recording feature. If present, will override the record screen setting in the uiConfig. If true, the uiConfig must have recordScreen set to true or the screen will not be captured. It's also required that the library component, $screen-recording.components.screenRecordingPermission, be included in the study at some point before this component to ensure permissions are granted and screen capture has started.",
           "type": "boolean"
         },
+        "recordWebcam": {
+          "description": "Whether or not we want to utilize webcam recording. If present, will override the record webcam setting in the uiConfig. Studies using webcam without screen capture should include the webcam permission component before this component. Studies combining webcam with screen capture should use the screen recording permission component.",
+          "type": "boolean"
+        },
         "response": {
           "description": "The responses to the component",
           "items": {
@@ -5313,6 +5349,10 @@
           "description": "Whether or not we want to utilize screen recording feature. If present, will override the record screen setting in the uiConfig. If true, the uiConfig must have recordScreen set to true or the screen will not be captured. It's also required that the library component, $screen-recording.components.screenRecordingPermission, be included in the study at some point before this component to ensure permissions are granted and screen capture has started.",
           "type": "boolean"
         },
+        "recordWebcam": {
+          "description": "Whether or not we want to utilize webcam recording. If present, will override the record webcam setting in the uiConfig. Studies using webcam without screen capture should include the webcam permission component before this component. Studies combining webcam with screen capture should use the screen recording permission component.",
+          "type": "boolean"
+        },
         "response": {
           "description": "The responses to the component",
           "items": {
@@ -5493,6 +5533,10 @@
           "description": "Whether or not we want to utilize screen recording feature. If present, will override the record screen setting in the uiConfig. If true, the uiConfig must have recordScreen set to true or the screen will not be captured. It's also required that the library component, $screen-recording.components.screenRecordingPermission, be included in the study at some point before this component to ensure permissions are granted and screen capture has started.",
           "type": "boolean"
         },
+        "recordWebcam": {
+          "description": "Whether or not we want to utilize webcam recording. If present, will override the record webcam setting in the uiConfig. Studies using webcam without screen capture should include the webcam permission component before this component. Studies combining webcam with screen capture should use the screen recording permission component.",
+          "type": "boolean"
+        },
         "response": {
           "description": "The responses to the component",
           "items": {
diff --git a/src/parser/types.ts b/src/parser/types.ts
index 2aa7d42193..33f04a988c 100644
--- a/src/parser/types.ts
+++ b/src/parser/types.ts
@@ -299,6 +299,8 @@ export interface UIConfig {
   clickToRecord?: boolean;
   /** Whether or not we want to utilize screen recording feature. If true, will record audio on all components unless deactivated on individual components. This must be set to true if you want to record audio on any component in your study. Defaults to false. It's also required that the library component, $screen-recording.components.screenRecordingPermission, be included in the study at some point before any component that you want to record the screen on to ensure permissions are granted and screen capture has started. */
   recordScreen?: boolean;
+  /** Whether or not we want to utilize webcam recording. If true, will record webcam video on all components unless deactivated on individual components. Defaults to false. Studies using webcam without screen capture should include the webcam permission component before any recorded component. Studies combining webcam with screen capture should use the screen recording permission component. */
+  recordWebcam?: boolean;
   /** Desired fps for recording screen. If possible, this value will be used, but if it's not possible, the user agent will use the closest possible match. */
   recordScreenFPS?: number;
   /** Whether to prepend questions with their index (+ 1). This should only be used when all questions are in the same location, e.g. all are in the side bar. */
@@ -1290,6 +1292,8 @@ export interface BaseIndividualComponent {
   clickToRecord?: boolean;
   /** Whether or not we want to utilize screen recording feature. If present, will override the record screen setting in the uiConfig. If true, the uiConfig must have recordScreen set to true or the screen will not be captured. It's also required that the library component, $screen-recording.components.screenRecordingPermission, be included in the study at some point before this component to ensure permissions are granted and screen capture has started. */
   recordScreen?: boolean;
+  /** Whether or not we want to utilize webcam recording. If present, will override the record webcam setting in the uiConfig. Studies using webcam without screen capture should include the webcam permission component before this component. Studies combining webcam with screen capture should use the screen recording permission component. */
+  recordWebcam?: boolean;
   /** Whether to prepend questions with their index (+ 1). This should only be used when all questions are in the same location, e.g. all are in the side bar. If present, will override the enumeration of questions setting in the uiConfig. */
   enumerateQuestions?: boolean;
   /** Whether to show the response dividers. If present, will override the response dividers setting in the uiConfig. */
diff --git a/src/public/libraries/screen-recording/assets/ScreenRecording.tsx b/src/public/libraries/screen-recording/assets/ScreenRecording.tsx
index cd3f9b507b..cd5b8b84f1 100644
--- a/src/public/libraries/screen-recording/assets/ScreenRecording.tsx
+++ b/src/public/libraries/screen-recording/assets/ScreenRecording.tsx
@@ -1,26 +1,43 @@
 import {
-  Box, Button, Title,
+  Box, Button, Flex, Title,
 } from '@mantine/core';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useRecordingContext } from '../../../../store/hooks/useRecording';
 import { StimulusParams } from '../../../../store/types';
 import { RecordingAudioWaveform } from '../../../../components/interface/RecordingAudioWaveform';
-import { useStoreSelector } from "../../../../store/store";
+import { useStoreSelector } from '../../../../store/store';
 
 function ScreenRecordingPermission({ setAnswer }: StimulusParams<undefined>) {
   const {
     studyHasAudioRecording,
+    studyHasWebcamRecording,
     recordVideoRef,
+    webcamVideoRef,
     startScreenCapture: startCapture,
     stopScreenCapture: stopCapture,
     isScreenCapturing: screenCapturing,
     isAudioCapturing: audioCapturing,
+    isWebcamCapturing: webcamCapturing,
+    isMediaCapturing: mediaCapturing,
+    screenRecordingError,
+    audioRecordingError,
     audioMediaStream,
   } = useRecordingContext();
 
-  // audioCapturingSuccess is set to true when we detect sound.
   const [audioCapturingSuccess, setAudioCapturingSuccess] = useState(false);
   const { dataCollectionEnabled } = useStoreSelector((state) => state.modes);
+  const setupComplete = useMemo(
+    () => screenCapturing
+      && (!studyHasWebcamRecording || webcamCapturing)
+      && (!studyHasAudioRecording || audioCapturingSuccess),
+    [
+      audioCapturingSuccess,
+      screenCapturing,
+      studyHasAudioRecording,
+      studyHasWebcamRecording,
+      webcamCapturing,
+    ],
+  );
 
   useEffect(() => {
     if (!dataCollectionEnabled) {
@@ -33,157 +50,123 @@ function ScreenRecordingPermission({ setAnswer }: StimulusParams<undefined>) {
       return;
     }
     setAnswer({
-      status: screenCapturing && (studyHasAudioRecording ? audioCapturingSuccess : true),
+      status: setupComplete,
       answers: {
         screenRecordingPermission: screenCapturing,
       },
     });
-  }, [screenCapturing, audioCapturingSuccess, setAnswer, studyHasAudioRecording, dataCollectionEnabled]);
+  }, [dataCollectionEnabled, screenCapturing, setAnswer, setupComplete]);
 
   useEffect(() => {
-    if (!screenCapturing) {
-      return;
-    }
-    const stream = audioMediaStream.current;
-    if (!stream) {
-      return;
+    if (!audioCapturing || !studyHasAudioRecording || !audioMediaStream.current) {
+      return undefined;
     }
 
-    const mediaRecorder = new MediaRecorder(stream);
-    mediaRecorder.start();
-
     const audioContext = new AudioContext();
-    const audioStreamSource = audioContext.createMediaStreamSource(stream);
+    const audioStreamSource = audioContext.createMediaStreamSource(audioMediaStream.current);
     const analyser = audioContext.createAnalyser();
-
     analyser.minDecibels = -45;
     audioStreamSource.connect(analyser);
 
-    const bufferLength = analyser.frequencyBinCount;
-    const domainData = new Uint8Array(bufferLength);
-
-    let soundDetected = false;
-
+    const domainData = new Uint8Array(analyser.frequencyBinCount);
+    let animationFrame = 0;
     const detectSound = () => {
-      if (soundDetected) {
-        return;
-      }
-
       analyser.getByteFrequencyData(domainData);
-
-      for (let i = 0; i < bufferLength; i += 1) {
-        if (domainData[i] > 0) {
-          soundDetected = true;
-          setAudioCapturingSuccess(true);
-        }
+      if (domainData.some((value) => value > 0)) {
+        setAudioCapturingSuccess(true);
+        return;
       }
+      animationFrame = window.requestAnimationFrame(detectSound);
+    };
+    animationFrame = window.requestAnimationFrame(detectSound);
 
-      window.requestAnimationFrame(detectSound);
+    return () => {
+      window.cancelAnimationFrame(animationFrame);
+      audioStreamSource.disconnect();
+      analyser.disconnect();
+      audioContext.close().catch(() => undefined);
     };
+  }, [audioCapturing, audioMediaStream, studyHasAudioRecording]);
 
-    window.requestAnimationFrame(detectSound);
-  }, [audioMediaStream, screenCapturing, setAnswer]);
+  const recordingTargets = [
+    'screen',
+    ...(studyHasWebcamRecording ? ['webcam'] : []),
+    ...(studyHasAudioRecording ? ['audio'] : []),
+  ];
 
   return (
     <Box p="md">
       <Title order={1} size="h2">
         Screen
-        {studyHasAudioRecording && ' and Audio'}
+        {studyHasWebcamRecording && ', Webcam'}
+        {studyHasAudioRecording && `${studyHasWebcamRecording ? ',' : ' and'} Audio`}
         {' '}
         Recording Permission
       </Title>
 
-      {studyHasAudioRecording ? (
-        <>
-          {/* Record both screen and audio */}
-          <p>
-            This study requires recording of your
-            {' '}
-            <strong>screen</strong>
-            {' '}
-            and
-            {' '}
-            <strong>audio</strong>
-            . If you&apos;re not comfortable, you may exit and return the study.
-          </p>
-          <p>Follow the steps below to grant screen and audio recording permissions.</p>
+      <p>
+        This study requires recording of your
+        {' '}
+        <strong>{recordingTargets.join(', ')}</strong>
+        . If you&apos;re not comfortable, you may exit and return the study.
+      </p>
+      <p>Follow the steps below to grant the required permissions.</p>
 
-          <ol>
-            <li>
-              <strong>Click the button below</strong>
-              {' '}
-              to enable screen and audio recording.
-              <Button
-                type="button"
-                onClick={screenCapturing ? stopCapture : startCapture}
-                disabled={!dataCollectionEnabled}
-                display="block"
-                mt="sm"
-              >
-                {screenCapturing ? 'Stop Recording' : 'Start Recording'}
-              </Button>
+      <ol>
+        <li>
+          <strong>Click the button below</strong>
+          {' '}
+          to enable the required recording streams.
+          <Button type="button" onClick={mediaCapturing ? stopCapture : startCapture} disabled={!dataCollectionEnabled} display="block" mt="sm">
+            {mediaCapturing ? 'Stop Recording' : 'Start Recording'}
+          </Button>
+          {screenRecordingError && <p style={{ color: 'red' }}>{screenRecordingError}</p>}
+          {audioRecordingError && <p style={{ color: 'red' }}>{audioRecordingError}</p>}
+          <p><i>Please make sure you are recording the correct tab or window. Otherwise, stop and re-share the correct one.</i></p>
+        </li>
+        <li>
+          <strong>Confirm your preview streams</strong>
+          {' '}
+          before continuing.
+          <Flex mt="sm" gap="md" wrap="wrap">
+            <Box>
+              <p><strong>Screen Preview</strong></p>
               <video
                 ref={recordVideoRef}
                 autoPlay
                 playsInline
                 muted
-                style={{ width: '400px', border: '1px solid #ccc', marginTop: '1rem' }}
+                style={{ width: '400px', border: '1px solid #ccc' }}
               />
-              <p><i>Please make sure you are recording the correct tab or window. Otherwise, stop and re-share the correct one.</i></p>
-
-            </li>
-            <li>
-              <strong>Speak</strong>
-              {' '}
-              into your microphone to check if audio is working.
-              {audioCapturing ? <Box h={200} w={400} bd="1px solid #ccc"><RecordingAudioWaveform height={200} width={400} /></Box> : <Box h={200} w={400} bd="1px solid #ccc" />}
-            </li>
-          </ol>
-          <strong>Note:</strong>
-          <ul>
-            <li>
-              After we hear you say something, the
-              {' '}
-              <b>Continue</b>
-              {' '}
-              button will be enabled.
-            </li>
-            <li>Please do not close the window or screen recording until the entire study is completed.</li>
-          </ul>
-        </>
-      ) : (
-        <>
-          {/* Record screen only */}
-          <p>
-            This study requires recording of your
+            </Box>
+            {studyHasWebcamRecording && (
+              <Box>
+                <p><strong>Webcam Preview</strong></p>
+                <video
+                  ref={webcamVideoRef}
+                  autoPlay
+                  playsInline
+                  muted
+                  style={{ width: '300px', border: '1px solid #ccc', transform: 'scaleX(-1)' }}
+                />
+              </Box>
+            )}
+          </Flex>
+        </li>
+        {studyHasAudioRecording && (
+          <li>
+            <strong>Speak</strong>
             {' '}
-            <strong>screen</strong>
-            . If you&apos;re not comfortable, you may exit and return the study.
-          </p>
-          <strong>Click the button below</strong>
-          {' '}
-          to enable screen recording.
-          <Button type="button"
-                  onClick={screenCapturing ? stopCapture : startCapture}
-                  disabled={!dataCollectionEnabled}
-                  display="block" mt="sm">
-            {screenCapturing ? 'Stop Recording' : 'Start Recording'}
-          </Button>
-          <video
-            ref={recordVideoRef}
-            autoPlay
-            playsInline
-            muted
-            style={{ width: '400px', border: '1px solid #ccc', marginTop: '1rem' }}
-          />
-          <p><i>Please make sure you are recording the correct tab or window. Otherwise, stop and re-share the correct one.</i></p>
-
-          <strong>Note:</strong>
-          <ul>
-            <li>Please do not close the window or screen recording until the entire study is completed.</li>
-          </ul>
-        </>
-      )}
+            into your microphone to check if audio is working.
+            {audioCapturing ? <Box h={200} w={400} bd="1px solid #ccc"><RecordingAudioWaveform height={200} width={400} /></Box> : <Box h={200} w={400} bd="1px solid #ccc" />}
+          </li>
+        )}
+      </ol>
+      <strong>Note:</strong>
+      <ul>
+        {studyHasAudioRecording && <li>After we hear you say something, the Continue button will be enabled.</li>}
+        <li>Please do not stop the recording streams until the entire study is completed.</li>
+      </ul>
     </Box>
   );
 }
diff --git a/src/public/libraries/webcam-recording/assets/WebcamRecording.tsx b/src/public/libraries/webcam-recording/assets/WebcamRecording.tsx
new file mode 100644
index 0000000000..b1fb2cdf3a
--- /dev/null
+++ b/src/public/libraries/webcam-recording/assets/WebcamRecording.tsx
@@ -0,0 +1,167 @@
+import {
+  Box, Button, Title,
+} from '@mantine/core';
+import { useEffect, useMemo, useState } from 'react';
+import { useRecordingContext } from '../../../../store/hooks/useRecording';
+import { StimulusParams } from '../../../../store/types';
+import { RecordingAudioWaveform } from '../../../../components/interface/RecordingAudioWaveform';
+
+function WebcamRecordingPermission({ setAnswer }: StimulusParams<undefined>) {
+  const {
+    studyHasAudioRecording,
+    webcamVideoRef,
+    startWebcamCapture,
+    stopScreenCapture,
+    isWebcamCapturing,
+    isAudioCapturing,
+    screenRecordingError: error,
+    audioRecordingError,
+    audioMediaStream,
+  } = useRecordingContext();
+
+  const [audioCapturingSuccess, setAudioCapturingSuccess] = useState(false);
+
+  const setupComplete = useMemo(
+    () => isWebcamCapturing && (!studyHasAudioRecording || audioCapturingSuccess),
+    [audioCapturingSuccess, isWebcamCapturing, studyHasAudioRecording],
+  );
+
+  useEffect(() => {
+    setAnswer({
+      status: setupComplete,
+      provenanceGraph: undefined,
+      answers: {
+        webcamRecordingPermission: isWebcamCapturing,
+      },
+    });
+  }, [isWebcamCapturing, setAnswer, setupComplete]);
+
+  useEffect(() => {
+    if (!isWebcamCapturing || !studyHasAudioRecording) {
+      return undefined;
+    }
+
+    const stream = audioMediaStream.current;
+    if (!stream) {
+      return undefined;
+    }
+
+    const audioContext = new AudioContext();
+    const audioStreamSource = audioContext.createMediaStreamSource(stream);
+    const analyser = audioContext.createAnalyser();
+
+    analyser.minDecibels = -45;
+    audioStreamSource.connect(analyser);
+
+    const bufferLength = analyser.frequencyBinCount;
+    const domainData = new Uint8Array(bufferLength);
+    let soundDetected = false;
+    let animationFrame = 0;
+
+    const detectSound = () => {
+      if (soundDetected) {
+        return;
+      }
+
+      analyser.getByteFrequencyData(domainData);
+
+      for (let i = 0; i < bufferLength; i += 1) {
+        if (domainData[i] > 0) {
+          soundDetected = true;
+          setAudioCapturingSuccess(true);
+          return;
+        }
+      }
+
+      animationFrame = window.requestAnimationFrame(detectSound);
+    };
+
+    animationFrame = window.requestAnimationFrame(detectSound);
+
+    return () => {
+      window.cancelAnimationFrame(animationFrame);
+      audioStreamSource.disconnect();
+      analyser.disconnect();
+      audioContext.close().catch(() => undefined);
+    };
+  }, [audioMediaStream, isWebcamCapturing, studyHasAudioRecording]);
+
+  return (
+    <Box p="md">
+      <Title order={1} size="h2">
+        Webcam
+        {studyHasAudioRecording && ' and Audio'}
+        {' '}
+        Recording Permission
+      </Title>
+
+      <p>
+        This study requires recording of your
+        {' '}
+        <strong>
+          webcam
+          {studyHasAudioRecording ? ' and audio' : ''}
+        </strong>
+        . If you&apos;re not comfortable, you may exit and return the study.
+      </p>
+      <p>Follow the steps below to grant the required permissions.</p>
+
+      <ol>
+        <li>
+          <strong>Click the button below</strong>
+          {' '}
+          to enable webcam recording.
+          <Button type="button" onClick={isWebcamCapturing ? stopScreenCapture : startWebcamCapture} display="block" mt="sm">
+            {isWebcamCapturing ? 'Stop Recording' : 'Start Recording'}
+          </Button>
+          {error && <p style={{ color: 'red' }}>{error}</p>}
+          {audioRecordingError && <p style={{ color: 'red' }}>{audioRecordingError}</p>}
+        </li>
+        <li>
+          <strong>Confirm your webcam preview</strong>
+          {' '}
+          before continuing.
+          <video
+            ref={webcamVideoRef}
+            autoPlay
+            playsInline
+            muted
+            style={{
+              width: '320px',
+              border: '1px solid #ccc',
+              marginTop: '1rem',
+              transform: 'scaleX(-1)',
+            }}
+          />
+        </li>
+        {studyHasAudioRecording && (
+          <li>
+            <strong>Speak</strong>
+            {' '}
+            into your microphone to check if audio is working.
+            {isAudioCapturing ? (
+              <Box h={200} w={400} bd="1px solid #ccc">
+                <RecordingAudioWaveform height={200} width={400} />
+              </Box>
+            ) : <Box h={200} w={400} bd="1px solid #ccc" />}
+          </li>
+        )}
+      </ol>
+      <strong>Note:</strong>
+      <ul>
+        {studyHasAudioRecording && (
+          <li>
+            After we hear you say something, the
+            {' '}
+            <b>Continue</b>
+            {' '}
+            button will be enabled.
+          </li>
+        )}
+        <li>Please do not stop the webcam recording stream until the entire study is completed.</li>
+      </ul>
+    </Box>
+  );
+}
+
+export default WebcamRecordingPermission;
diff --git a/src/storage/engines/FirebaseStorageEngine.ts b/src/storage/engines/FirebaseStorageEngine.ts
index ac7c8af4be..734a8b4b83 100644
--- a/src/storage/engines/FirebaseStorageEngine.ts
+++ b/src/storage/engines/FirebaseStorageEngine.ts
@@ -587,6 +587,21 @@ export class FirebaseStorageEngine extends CloudStorageEngine {
     }
   }
 
+  protected async _getWebcamRecordingUrl(
+    task: string,
+    participantId: string,
+  ): Promise<string | null> {
+    const storage = getStorage();
+    const webcamRecordingRef = ref(storage, `${this.collectionPrefix}${this.studyId}/webcamRecording/${participantId}_${task}`);
+
+    try {
+      return await getDownloadURL(webcamRecordingRef);
+    } catch {
+      console.warn(`Webcam recording for task ${task} and participant ${participantId} not found.`);
+      return null;
+    }
+  }
+
   protected async _getTranscriptUrl(
     task: string,
     participantId: string,
diff --git a/src/storage/engines/LocalStorageEngine.ts b/src/storage/engines/LocalStorageEngine.ts
index 48695b5752..2e80b08800 100644
--- a/src/storage/engines/LocalStorageEngine.ts
+++ b/src/storage/engines/LocalStorageEngine.ts
@@ -274,6 +274,18 @@ export class LocalStorageEngine extends StorageEngine {
     return URL.createObjectURL(screenRecordingBlob);
   }
 
+  protected async _getWebcamRecordingUrl(task: string, participantId?: string) {
+    await this.verifyStudyDatabase();
+    if (this.studyId === undefined) {
+      throw new Error('Study ID is not set');
+    }
+    const webcamRecordingBlob = await this._getFromStorage(`webcamRecording/${participantId || this.currentParticipantId}`, task);
+    if (!webcamRecordingBlob) {
+      throw new Error(`WebcamRecording for task ${task} and participant ${participantId || this.currentParticipantId} not found`);
+    }
+    return URL.createObjectURL(webcamRecordingBlob);
+  }
+
   protected async _testingReset(studyId: string) {
     if (!studyId) {
       throw new Error('Study ID is required for reset');
diff --git a/src/storage/engines/SupabaseStorageEngine.ts b/src/storage/engines/SupabaseStorageEngine.ts
index 8d1e023871..a99d374927 100644
--- a/src/storage/engines/SupabaseStorageEngine.ts
+++ b/src/storage/engines/SupabaseStorageEngine.ts
@@ -543,6 +543,17 @@ export class SupabaseStorageEngine extends CloudStorageEngine {
     return screenRecording ? URL.createObjectURL(screenRecording) : null;
   }
 
+  protected async _getWebcamRecordingUrl(task: string, participantId?: string) {
+    await this.verifyStudyDatabase();
+    const id = participantId || this.currentParticipantId;
+    if (!id) {
+      throw new Error('Participant not initialized');
+    }
+
+    const webcamRecording = await this._getFromStorage(`/webcamRecording/${id}`, task);
+    return webcamRecording ? URL.createObjectURL(webcamRecording) : null;
+  }
+
   protected async _testingReset(studyId: string) {
     // Delete all rows with studyId matching the studyId
     const { error } = await this.supabase
diff --git a/src/storage/engines/types.ts b/src/storage/engines/types.ts
index aad3b747a0..713adf4f28 100644
--- a/src/storage/engines/types.ts
+++ b/src/storage/engines/types.ts
@@ -310,6 +310,9 @@ export abstract class StorageEngine {
   // Gets the screen recording URL for the given task and participantId. This method is used to fetch the screen recording video file from the storage engine.
   protected abstract _getScreenRecordingUrl(task: string, participantId?: string): Promise<string | null>;
 
+  // Gets the webcam recording URL for the given task and participantId.
+  protected abstract _getWebcamRecordingUrl(task: string, participantId?: string): Promise<string | null>;
+
   // Gets the transcript URL for the given task and participantId. (Optional - not all storage engines need to implement this, only if they generate transcripts).
   protected _getTranscriptUrl?(task: string, participantId?: string): Promise<string | null>;
 
@@ -1764,6 +1767,32 @@ export abstract class StorageEngine {
     });
   }
 
+  // Gets the webcam recording for a specific task and participantId.
+  async getWebcamRecording(
+    task: string,
+    participantId: string,
+  ) {
+    const url = await this._getWebcamRecordingUrl(task, participantId);
+    return this.getAsset(url);
+  }
+
+  // Saves the webcam video stream as a separate per-task asset.
+  async saveWebcamRecording(
+    blob: Blob,
+    taskName: string,
+  ) {
+    return this.trackAssetOperation(`webcamRecording/${taskName}`, async () => {
+      if (this.studyId === undefined) {
+        throw new Error('Study ID is not set');
+      }
+      const modes = await this.getModes(this.studyId);
+      if (!modes.dataCollectionEnabled) {
+        throw new Error('Data collection is disabled for this study');
+      }
+      return this.saveAsset('webcamRecording', blob, taskName);
+    });
+  }
+
   // Gets the sequence array from the storage engine.
   async getSequenceArray() {
     await this.verifyStudyDatabase();
@@ -1846,6 +1875,7 @@ export abstract class StorageEngine {
       await this._copyDirectory(`${sourceName}/participants`, `${targetName}/participants`);
       await this._copyDirectory(`${sourceName}/audio`, `${targetName}/audio`);
       await this._copyDirectory(`${sourceName}/screenRecording`, `${targetName}/screenRecording`);
+      await this._copyDirectory(`${sourceName}/webcamRecording`, `${targetName}/webcamRecording`);
       await this._copyDirectory(`${sourceName}/provenance`, `${targetName}/provenance`);
       await this._copyDirectory(sourceName, targetName);
       await this._copyRealtimeData(sourceName, targetName);
@@ -1894,6 +1924,7 @@ export abstract class StorageEngine {
         await this._deleteDirectory(`${deletionTarget}/participants`);
         await this._deleteDirectory(`${deletionTarget}/audio`);
         await this._deleteDirectory(`${deletionTarget}/screenRecording`);
+        await this._deleteDirectory(`${deletionTarget}/webcamRecording`);
         await this._deleteDirectory(`${deletionTarget}/provenance`);
         await this._deleteDirectory(deletionTarget);
         await this._deleteRealtimeData(deletionTarget);
@@ -1964,6 +1995,10 @@ export abstract class StorageEngine {
         `${snapshotName}/screenRecording`,
         `${originalName}/screenRecording`,
       );
+      await this._copyDirectory(
+        `${snapshotName}/webcamRecording`,
+        `${originalName}/webcamRecording`,
+      );
       await this._copyDirectory(
         `${snapshotName}/provenance`,
         `${originalName}/provenance`,
diff --git a/src/storage/tests/edgeCases.spec.ts b/src/storage/tests/edgeCases.spec.ts
index 8f578061c8..5283607c18 100644
--- a/src/storage/tests/edgeCases.spec.ts
+++ b/src/storage/tests/edgeCases.spec.ts
@@ -287,6 +287,14 @@ describe('StorageEngine edge cases', () => {
       await expect(storageEngine.saveScreenRecording(blob, 'task1')).rejects.toThrow('Data collection is disabled');
     });
 
+    test('saveWebcamRecording throws when data collection is disabled', async () => {
+      await storageEngine.initializeParticipantSession({}, configSimple, participantMetadata);
+      await storageEngine.setMode(studyId, 'dataCollectionEnabled', false);
+
+      const blob = new Blob(['video'], { type: 'video/webm' });
+      await expect(storageEngine.saveWebcamRecording(blob, 'task1')).rejects.toThrow('Data collection is disabled');
+    });
+
     test('multiple concurrent saveAsset calls are tracked independently', async () => {
       await storageEngine.initializeParticipantSession({}, configSimple, participantMetadata);
 
diff --git a/src/storage/tests/highLevel.spec.ts b/src/storage/tests/highLevel.spec.ts
index d0d20f7523..7020f9b0bd 100644
--- a/src/storage/tests/highLevel.spec.ts
+++ b/src/storage/tests/highLevel.spec.ts
@@ -180,7 +180,7 @@ class DelayedLocalStorageEngine extends LocalStorageEngine {
   ) {
     const isParticipantDataWrite = type === 'participantData' && prefix.startsWith('participants/');
     const isAssetUpload = objectToUpload instanceof Blob
-      && (prefix.startsWith('audio/') || prefix.startsWith('screenRecording/'));
+      && (prefix.startsWith('audio/') || prefix.startsWith('screenRecording/') || prefix.startsWith('webcamRecording/'));
 
     if (isParticipantDataWrite && this.holdParticipantDataWrite) {
       this.holdParticipantDataWrite = false;
diff --git a/src/storage/tests/highLevelFirebase.spec.ts b/src/storage/tests/highLevelFirebase.spec.ts
index a8087875a8..810067231a 100644
--- a/src/storage/tests/highLevelFirebase.spec.ts
+++ b/src/storage/tests/highLevelFirebase.spec.ts
@@ -1094,6 +1094,20 @@ describe.each([
     expect(await storageEngine._getScreenRecordingUrl('missing', 'p1')).toBeNull();
   });
 
+  test('_getWebcamRecordingUrl returns URL when recording exists', async () => {
+    // @ts-expect-error protected
+    const prefix = storageEngine.collectionPrefix;
+    const path = `${prefix}${studyId}/webcamRecording/p1_task2`;
+    storageObjects[path] = 'data';
+    // @ts-expect-error protected
+    expect(await storageEngine._getWebcamRecordingUrl('task2', 'p1')).toContain(path);
+  });
+
+  test('_getWebcamRecordingUrl returns null when recording does not exist', async () => {
+    // @ts-expect-error protected
+    expect(await storageEngine._getWebcamRecordingUrl('missing', 'p1')).toBeNull();
+  });
+
   test('_getTranscriptUrl returns URL when transcript exists', async () => {
     // @ts-expect-error protected
     const prefix = storageEngine.collectionPrefix;
diff --git a/src/store/hooks/tests/useRecording.spec.ts b/src/store/hooks/tests/useRecording.spec.ts
index 5036497436..8abeaa655a 100644
--- a/src/store/hooks/tests/useRecording.spec.ts
+++ b/src/store/hooks/tests/useRecording.spec.ts
@@ -16,8 +16,10 @@ import ScreenRecordingPermission from '../../../public/libraries/screen-recordin
 let mockRecordingConfig = {
   studyHasScreenRecording: false,
   studyHasAudioRecording: false,
+  studyHasWebcamRecording: false,
   currentComponentHasAudioRecording: false,
   currentComponentHasScreenRecording: false,
+  currentComponentHasWebcamRecording: false,
   currentComponentHasClickToRecord: false,
 };
 let mockCurrentComponent = 'intro';
@@ -60,9 +62,15 @@ class MockMediaRecorder {
 
   constructor(s: MockMediaStream) { this.stream = s; }
 
-  start = vi.fn();
+  start = vi.fn(() => {
+    this.state = 'recording';
+    this._listeners.start?.({});
+  });
 
-  stop = vi.fn();
+  stop = vi.fn(() => {
+    this.state = 'inactive';
+    this._listeners.stop?.({});
+  });
 
   addEventListener = vi.fn((event: string, handler: (event: Partial<{ data: Blob }>) => void) => {
     this._listeners[event] = handler;
@@ -97,7 +105,7 @@ function renderWithMantine(ui: React.ReactElement) {
 
 vi.mock('../useStudyConfig', () => ({
   useStudyConfig: () => ({
-    uiConfig: { recordScreenFPS: undefined, recordAudio: false },
+    uiConfig: { recordScreenFPS: undefined, recordAudio: false, recordWebcam: false },
     sequence: {
       id: 'root', order: 'fixed', components: ['intro', 'end'], skip: [],
     },
@@ -137,8 +145,10 @@ beforeEach(() => {
   mockRecordingConfig = {
     studyHasScreenRecording: false,
     studyHasAudioRecording: false,
+    studyHasWebcamRecording: false,
     currentComponentHasAudioRecording: false,
     currentComponentHasScreenRecording: false,
+    currentComponentHasWebcamRecording: false,
     currentComponentHasClickToRecord: false,
   };
   mockCurrentComponent = 'intro';
@@ -178,7 +188,9 @@ describe('useRecording', () => {
     const { result } = renderHook(() => useRecording());
     expect(result.current.isScreenRecording).toBe(false);
     expect(result.current.isAudioRecording).toBe(false);
+    expect(result.current.isWebcamRecording).toBe(false);
     expect(result.current.isScreenCapturing).toBe(false);
+    expect(result.current.isWebcamCapturing).toBe(false);
   });
 
   test('initial screenRecordingError is null', () => {
@@ -281,6 +293,22 @@ describe('useRecording startScreenCapture', () => {
       expect(result.current.screenRecordingError).toBe('Recording permission denied');
     });
   });
+
+  test('webcam-only capture does not request display media', async () => {
+    mockRecordingConfig = {
+      ...mockRecordingConfig,
+      studyHasWebcamRecording: true,
+      currentComponentHasWebcamRecording: true,
+    };
+    mockStorageEngine = { saveWebcamRecording: vi.fn(async () => {}) };
+    const { result } = renderHook(() => useRecording());
+
+    act(() => { result.current.startWebcamCapture(); });
+
+    await waitFor(() => expect(result.current.isWebcamCapturing).toBe(true));
+    expect(result.current.isScreenCapturing).toBe(false);
+    expect(navigator.mediaDevices.getDisplayMedia).not.toHaveBeenCalled();
+  });
 });
 
 // ── startScreenRecording tests ─────────────────────────────────────────────────
@@ -327,13 +355,56 @@ describe('useRecording startScreenRecording after startScreenCapture', () => {
       currentComponentHasScreenRecording: true,
       currentComponentHasAudioRecording: false,
     };
-    mockStorageEngine = { saveAudioRecording: vi.fn(async () => {}) };
+    mockStorageEngine = { saveScreenRecording: vi.fn(async () => {}) };
     const { result } = renderHook(() => useRecording());
     act(() => { result.current.startScreenCapture(); });
     await waitFor(() => { expect(result.current.isMediaCapturing).toBe(true); });
     act(() => { result.current.startScreenRecording('trial_0'); });
     expect(result.current.isScreenRecording).toBe(true);
   });
+
+  test('starts a separate webcam recorder for webcam-only trials', async () => {
+    mockRecordingConfig = {
+      ...mockRecordingConfig,
+      studyHasWebcamRecording: true,
+      currentComponentHasWebcamRecording: true,
+    };
+    mockStorageEngine = { saveWebcamRecording: vi.fn(async () => {}) };
+    const { result } = renderHook(() => useRecording());
+
+    act(() => { result.current.startWebcamCapture(); });
+    await waitFor(() => expect(result.current.isMediaCapturing).toBe(true));
+    await waitFor(() => expect(result.current.isWebcamRecording).toBe(true));
+
+    act(() => { result.current.stopScreenRecording(); });
+    expect(result.current.isWebcamRecording).toBe(false);
+  });
+
+  test('starts screen, webcam, and audio recording together', async () => {
+    mockRecordingConfig = {
+      ...mockRecordingConfig,
+      studyHasScreenRecording: true,
+      studyHasAudioRecording: true,
+      studyHasWebcamRecording: true,
+      currentComponentHasScreenRecording: true,
+      currentComponentHasAudioRecording: true,
+      currentComponentHasWebcamRecording: true,
+    };
+    mockStorageEngine = {
+      saveScreenRecording: vi.fn(async () => {}),
+      saveAudioRecording: vi.fn(async () => {}),
+      saveWebcamRecording: vi.fn(async () => {}),
+    };
+    const { result } = renderHook(() => useRecording());
+
+    act(() => { result.current.startScreenCapture(); });
+    await waitFor(() => expect(result.current.isMediaCapturing).toBe(true));
+    await waitFor(() => {
+      expect(result.current.isScreenRecording).toBe(true);
+      expect(result.current.isWebcamRecording).toBe(true);
+      expect(result.current.isAudioRecording).toBe(true);
+    });
+  });
 });
 
 // ── stopScreenCapture with populated refs ──────────────────────────────────────
diff --git a/src/store/hooks/tests/useRecordingConfig.spec.ts b/src/store/hooks/tests/useRecordingConfig.spec.ts
index 6adba5f7ee..df5f75b680 100644
--- a/src/store/hooks/tests/useRecordingConfig.spec.ts
+++ b/src/store/hooks/tests/useRecordingConfig.spec.ts
@@ -10,7 +10,9 @@ import { makeStudyConfig } from '../../../tests/utils';
 
 vi.mock('../useStudyConfig', () => ({
   useStudyConfig: vi.fn(() => ({
-    uiConfig: { recordScreen: false, recordAudio: false, clickToRecord: false },
+    uiConfig: {
+      recordScreen: false, recordAudio: false, recordWebcam: false, clickToRecord: false,
+    },
     components: {},
   })),
 }));
@@ -30,8 +32,10 @@ describe('useRecordingConfig', () => {
     const { result } = renderHook(() => useRecordingConfig());
     expect(result.current.studyHasScreenRecording).toBe(false);
     expect(result.current.studyHasAudioRecording).toBe(false);
+    expect(result.current.studyHasWebcamRecording).toBe(false);
     expect(result.current.currentComponentHasScreenRecording).toBe(false);
     expect(result.current.currentComponentHasAudioRecording).toBe(false);
+    expect(result.current.currentComponentHasWebcamRecording).toBe(false);
     expect(result.current.currentComponentHasClickToRecord).toBe(false);
   });
 
@@ -55,4 +59,21 @@ describe('useRecordingConfig', () => {
     const { result } = renderHook(() => useRecordingConfig());
     expect(result.current.studyHasAudioRecording).toBe(true);
   });
+
+  test('webcam recording can be enabled globally', () => {
+    vi.mocked(useStudyConfig).mockReturnValueOnce(makeStudyConfig({ uiConfig: { recordWebcam: true } }));
+    const { result } = renderHook(() => useRecordingConfig());
+    expect(result.current.studyHasWebcamRecording).toBe(true);
+    expect(result.current.currentComponentHasWebcamRecording).toBe(true);
+  });
+
+  test('webcam recording can be enabled for one sequence component', () => {
+    vi.mocked(useStudyConfig).mockReturnValueOnce(
+      makeStudyConfig({ components: { trial1: { recordWebcam: true } } }),
+    );
+    vi.mocked(useFlatSequence).mockReturnValueOnce(['trial1']);
+    const { result } = renderHook(() => useRecordingConfig());
+    expect(result.current.studyHasWebcamRecording).toBe(true);
+    expect(result.current.currentComponentHasWebcamRecording).toBe(true);
+  });
 });
diff --git a/src/store/hooks/tests/useReplay.spec.tsx b/src/store/hooks/tests/useReplay.spec.tsx
index 7a107f51cf..1f3e69a938 100644
--- a/src/store/hooks/tests/useReplay.spec.tsx
+++ b/src/store/hooks/tests/useReplay.spec.tsx
@@ -289,6 +289,37 @@ describe('useReplay — handlePlay/Seeked/Pause via video element events', () =>
     expect(result.current.replayRef.current).toBe(audio);
   });
 
+  test('updateReplayRef uses webcam video when no screen recording exists', () => {
+    const { result } = renderHook(() => useReplay());
+    const webcam = makeVideoWithSrc();
+    act(() => {
+      result.current.webcamVideoRef.current = webcam;
+      result.current.updateReplayRef();
+    });
+    expect(result.current.replayRef.current).toBe(webcam);
+    expect(webcam.muted).toBe(true);
+  });
+
+  test('screen playback starts and seeks the webcam recording', () => {
+    const { result } = renderHook(() => useReplay());
+    const screenVideo = makeVideoWithSrc();
+    const webcamVideo = makeVideoWithSrc();
+    webcamVideo.play = vi.fn(async () => {});
+    webcamVideo.pause = vi.fn();
+
+    act(() => {
+      result.current.videoRef.current = screenVideo;
+      result.current.webcamVideoRef.current = webcamVideo;
+      result.current.updateReplayRef();
+      result.current.setSeekTime(4);
+      screenVideo.dispatchEvent(new Event('play'));
+    });
+
+    expect(webcamVideo.currentTime).toBe(4);
+    expect(webcamVideo.play).toHaveBeenCalled();
+    expect(webcamVideo.muted).toBe(true);
+  });
+
   test('updateReplayRef detaches listeners from the previous media element', () => {
     const { result } = renderHook(() => useReplay());
     const originalVideo = makeVideoWithSrc();
diff --git a/src/store/hooks/useRecording.ts b/src/store/hooks/useRecording.ts
index 4f534916e5..3592472cf3 100644
--- a/src/store/hooks/useRecording.ts
+++ b/src/store/hooks/useRecording.ts
@@ -15,9 +15,25 @@ import {
 } from '../../utils/recordingWarnings';
 import { useStoreSelector } from '../store';
 
+const SCREEN_PERMISSION_COMPONENT = '$screen-recording.components.screenRecordingPermission';
+const WEBCAM_PERMISSION_COMPONENT = '$webcam-recording.components.webcamRecordingPermission';
+
+function stopMediaTracks(stream: MediaStream | null) {
+  stream?.getTracks().forEach((track) => {
+    track.stop();
+    stream.removeTrack(track);
+  });
+}
+
+function stopRecorder(recorder: MediaRecorder | null) {
+  if (recorder && recorder.state !== 'inactive') {
+    recorder.stop();
+  }
+}
+
 /**
- * Captures and records the screen and audio.
- * When screen recording is enabled in atleast a stimulus, screen capture should be called before recording is initiated.
+ * Captures and records the screen, webcam, and audio.
+ * When screen or webcam recording is enabled in a stimulus, capture should be called before recording is initiated.
  * When just audio recording is enabled throughout the study, recording is initiated on each screen separately.
  */
 export function useRecording() {
@@ -26,14 +42,17 @@ export function useRecording() {
   const { recordScreenFPS, recordAudio } = studyConfig.uiConfig;
 
   const recordVideoRef = useRef<HTMLVideoElement>(null);
+  const webcamVideoRef = useRef<HTMLVideoElement>(null);
   const [screenRecordingError, setRecordingError] = useState<string | null>(null);
   const [audioRecordingError, setAudioRecordingError] = useState<string | null>(null);
   const [isScreenRecording, setIsScreenRecording] = useState(false);
   const [isAudioRecording, setIsAudioRecording] = useState(false);
+  const [isWebcamRecording, setIsWebcamRecording] = useState(false);
   const [screenWithAudioRecording, setScreenWithAudioRecording] = useState(false);
-  const [screenCaptureStarted, setScreenCaptureStarted] = useState(false);
+  const [mediaCaptureStarted, setMediaCaptureStarted] = useState(false);
   const [isScreenCapturing, setIsScreenCapturing] = useState(false);
   const [isAudioCapturing, setIsAudioCapturing] = useState(false);
+  const [isWebcamCapturing, setIsWebcamCapturing] = useState(false);
   const [isMediaCapturing, setIsMediaCapturing] = useState(false);
   const [isRejected, setIsRejected] = useState(false);
   const [isMuted, setIsMuted] = useState(false);
@@ -41,7 +60,6 @@ export function useRecording() {
   const [isSpeakingWhileMuted, setIsSpeakingWhileMuted] = useState(false);
   const [analysisStreamReady, setAnalysisStreamReady] = useState(false);
   const [showMutedWarning, setShowMutedWarning] = useState(false);
-  const modes = useStoreSelector((state) => state.modes);
 
   // currentMediaStream and recorder can be just screen, just audio, or screen and audio combined.
   const currentMediaStream = useRef<MediaStream>(null);
@@ -49,6 +67,9 @@ export function useRecording() {
   const audioMediaStream = useRef<MediaStream | null>(null);
   const audioMediaRecorder = useRef<MediaRecorder | null>(null); // recorder for audio. Necessary to save audio file to get transcription.
   const screenMediaStream = useRef<MediaStream>(null);
+  const webcamMediaStream = useRef<MediaStream | null>(null);
+  const webcamMediaRecorder = useRef<MediaRecorder | null>(null);
+  const isStoppingCapture = useRef(false);
 
   const currentTrialName = useRef<string | null>(null);
   const identifier = useCurrentIdentifier();
@@ -56,8 +77,7 @@ export function useRecording() {
   const isAnalysis = useIsAnalysis();
 
   const { storageEngine } = useStorageEngine();
-
-  const { dataCollectionEnabled } = modes;
+  const { dataCollectionEnabled } = useStoreSelector((state) => state.modes);
 
   const currentComponent = useCurrentComponent();
 
@@ -66,8 +86,10 @@ export function useRecording() {
   const {
     studyHasScreenRecording,
     studyHasAudioRecording,
+    studyHasWebcamRecording,
     currentComponentHasAudioRecording,
     currentComponentHasScreenRecording,
+    currentComponentHasWebcamRecording,
     currentComponentHasClickToRecord,
   } = useRecordingConfig();
 
@@ -79,156 +101,163 @@ export function useRecording() {
   // At the beginning of each stimulus, recording starts by calling `startScreenRecording`.
   // At the end of each stimulus, recording stops by calling `stopScreenRecording`.
 
-  // Stop the screen capture.
+  // Stop all persistent media capture streams.
   const stopScreenCapture = useCallback(() => {
+    if (isStoppingCapture.current) {
+      return;
+    }
+    isStoppingCapture.current = true;
+
     if (recordVideoRef.current) {
       recordVideoRef.current.srcObject = null;
     }
+    if (webcamVideoRef.current) {
+      webcamVideoRef.current.srcObject = null;
+    }
     setIsScreenCapturing(false);
     setIsAudioCapturing(false);
+    setIsWebcamCapturing(false);
     setIsMediaCapturing(false);
     setIsScreenRecording(false);
     setIsAudioRecording(false);
+    setIsWebcamRecording(false);
     setScreenWithAudioRecording(false);
 
-    if (audioMediaStream.current) {
-      audioMediaStream.current.getTracks().forEach((track) => {
-        track.stop();
-        audioMediaStream.current?.removeTrack(track);
-      });
-      audioMediaStream.current = null;
-    }
+    stopRecorder(currentMediaRecorder.current);
+    stopRecorder(webcamMediaRecorder.current);
+    stopRecorder(audioMediaRecorder.current);
+
+    stopMediaTracks(audioMediaStream.current);
+    stopMediaTracks(screenMediaStream.current);
+    stopMediaTracks(webcamMediaStream.current);
+    stopMediaTracks(analysisAudioStream.current);
 
-    analysisAudioStream.current?.getTracks().forEach((t) => t.stop());
+    audioMediaStream.current = null;
+    screenMediaStream.current = null;
+    webcamMediaStream.current = null;
     analysisAudioStream.current = null;
     setAnalysisStreamReady(false);
+    currentMediaRecorder.current = null;
+    webcamMediaRecorder.current = null;
+    audioMediaRecorder.current = null;
 
-    if (screenMediaStream.current) {
-      screenMediaStream.current.getTracks().forEach((track) => {
-        track.stop();
-        screenMediaStream.current?.removeTrack(track);
-      });
-      screenMediaStream.current = null;
-    }
-
-    if (currentMediaRecorder.current) {
-      currentMediaRecorder.current.stream.getTracks().forEach((track) => { track.stop(); currentMediaRecorder.current?.stream.removeTrack(track); });
-      currentMediaRecorder.current.stream.getVideoTracks().forEach((track) => { track.stop(); currentMediaRecorder.current?.stream.removeTrack(track); });
-      currentMediaRecorder.current.stream.getAudioTracks().forEach((track) => { track.stop(); currentMediaRecorder.current?.stream.removeTrack(track); });
-      currentMediaRecorder.current.stop();
-      currentMediaRecorder.current = null;
-    }
-
-    if (audioMediaRecorder.current) {
-      audioMediaRecorder.current.stream.getTracks().forEach((track) => { track.stop(); audioMediaRecorder.current?.stream.removeTrack(track); });
-      audioMediaRecorder.current.stream.getAudioTracks().forEach((track) => { track.stop(); audioMediaRecorder.current?.stream.removeTrack(track); });
-      audioMediaRecorder.current.stop();
-      audioMediaRecorder.current = null;
-    }
+    window.setTimeout(() => {
+      isStoppingCapture.current = false;
+    }, 0);
   }, []);
 
-  // Start screen recording
-  const startScreenRecording = useCallback((trialName: string) => {
-    if (!dataCollectionEnabled) {
-      return;
-    }
-
-    // check if the current stimulus needs combined or just screen
-    if (!(currentComponentHasAudioRecording || currentComponentHasScreenRecording)) {
-      return;
-    }
-
-    if (!screenMediaStream.current) {
-      return;
-    }
-
-    currentMediaStream.current = new MediaStream([
-      ...((currentComponentHasScreenRecording ? screenMediaStream.current?.getVideoTracks() : []) ?? []),
-      ...((currentComponentHasAudioRecording ? audioMediaStream.current?.getAudioTracks() : []) ?? []),
-    ]);
-
-    const stream = currentMediaStream.current;
+  const attachSaveHandler = useCallback((
+    recorder: MediaRecorder,
+    saveBlob: ((blob: Blob, trialName: string) => Promise<void>) | undefined,
+    trialName: string,
+    errorLabel: string,
+  ) => {
+    let chunks: Blob[] = [];
 
-    stream.getAudioTracks().forEach((track) => {
-      track.enabled = !isMuted;
+    recorder.addEventListener('start', () => {
+      chunks = [];
     });
-
-    const mediaRecorder = new MediaRecorder(stream);
-
-    currentMediaRecorder.current = mediaRecorder;
-
-    const audioRecorder = (currentComponentHasAudioRecording && audioMediaStream.current) ? new MediaRecorder(audioMediaStream.current) : null;
-    audioMediaRecorder.current = audioRecorder;
-
-    let chunks: Blob[] = [];
-    mediaRecorder.addEventListener('dataavailable', (event: BlobEvent) => {
+    recorder.addEventListener('dataavailable', (event: BlobEvent) => {
       if (event.data && event.data.size > 0) {
         chunks.push(event.data);
       }
     });
-
-    let audioChunks: Blob[] = [];
-    audioRecorder?.addEventListener('dataavailable', (event: BlobEvent) => {
-      if (event.data && event.data.size > 0) {
-        audioChunks.push(event.data);
+    recorder.addEventListener('stop', () => {
+      if (!saveBlob) {
+        return;
       }
+      saveBlob(new Blob(chunks, { type: recorder.mimeType }), trialName).catch((error) => {
+        console.error(`Error saving ${errorLabel}:`, error);
+      });
     });
+  }, []);
 
-    mediaRecorder.addEventListener('start', () => {
-      chunks = [];
-    });
-
-    audioRecorder?.addEventListener('start', () => {
-      audioChunks = [];
-    });
-
-    if (currentComponentHasScreenRecording) {
-      mediaRecorder.addEventListener('stop', () => {
-        const { mimeType } = mediaRecorder;
+  // Start separate per-trial screen, webcam, and audio recordings from persistent capture streams.
+  const startScreenRecording = useCallback((trialName: string) => {
+    const wantsScreen = currentComponentHasScreenRecording;
+    const wantsAudio = currentComponentHasAudioRecording;
+    const wantsWebcam = currentComponentHasWebcamRecording;
 
-        const blob = new Blob(chunks, { type: mimeType });
-        storageEngine?.saveScreenRecording(blob, trialName).catch((error) => {
-          console.error('Error saving screen recording:', error);
-        });
-      });
+    if (!dataCollectionEnabled || !(wantsScreen || wantsAudio || wantsWebcam)) {
+      return;
+    }
+    if ((wantsScreen && !screenMediaStream.current)
+      || (wantsWebcam && !webcamMediaStream.current)
+      || (wantsAudio && !audioMediaStream.current)) {
+      return;
+    }
 
-      audioRecorder?.addEventListener('stop', () => {
-        const { mimeType } = audioRecorder;
+    if (wantsScreen && screenMediaStream.current) {
+      const screenStream = new MediaStream([
+        ...screenMediaStream.current.getVideoTracks(),
+        ...(wantsAudio ? audioMediaStream.current?.getAudioTracks() ?? [] : []),
+      ]);
+      currentMediaStream.current = screenStream;
+      const recorder = new MediaRecorder(screenStream);
+      currentMediaRecorder.current = recorder;
+      attachSaveHandler(
+        recorder,
+        storageEngine ? storageEngine.saveScreenRecording.bind(storageEngine) : undefined,
+        trialName,
+        'screen recording',
+      );
+      recorder.start(1000);
+    }
 
-        const blob = new Blob(audioChunks, { type: mimeType });
-        storageEngine?.saveAudioRecording(blob, trialName).catch((error) => {
-          console.error('Error saving audio recording:', error);
-        });
-      });
-    } else {
-      mediaRecorder.addEventListener('stop', () => {
-        const { mimeType } = mediaRecorder;
+    if (wantsWebcam && webcamMediaStream.current) {
+      const webcamStream = new MediaStream(webcamMediaStream.current.getVideoTracks());
+      const recorder = new MediaRecorder(webcamStream);
+      webcamMediaRecorder.current = recorder;
+      currentMediaRecorder.current ??= recorder;
+      attachSaveHandler(
+        recorder,
+        storageEngine ? storageEngine.saveWebcamRecording.bind(storageEngine) : undefined,
+        trialName,
+        'webcam recording',
+      );
+      recorder.start(1000);
+    }
 
-        const blob = new Blob(chunks, { type: mimeType });
-        storageEngine?.saveAudioRecording(blob, trialName).catch((error) => {
-          console.error('Error saving audio recording:', error);
-        });
-      });
+    if (wantsAudio && audioMediaStream.current) {
+      const audioStream = new MediaStream(audioMediaStream.current.getAudioTracks());
+      const recorder = new MediaRecorder(audioStream);
+      audioMediaRecorder.current = recorder;
+      currentMediaRecorder.current ??= recorder;
+      attachSaveHandler(
+        recorder,
+        storageEngine ? storageEngine.saveAudioRecording.bind(storageEngine) : undefined,
+        trialName,
+        'audio recording',
+      );
+      recorder.start(1000);
     }
 
-    setIsScreenCapturing(true);
-    setScreenCaptureStarted(true);
-    setScreenWithAudioRecording(currentComponentHasAudioRecording);
+    setScreenWithAudioRecording(wantsScreen && wantsAudio);
     setRecordingError(null);
-
-    setIsAudioRecording(currentComponentHasAudioRecording);
-    setIsScreenRecording(currentComponentHasScreenRecording);
-
-    mediaRecorder.start(1000); // 1s chunks
-    audioRecorder?.start(1000);
-  }, [currentComponentHasAudioRecording, currentComponentHasScreenRecording, storageEngine, isMuted]);
+    setIsAudioRecording(wantsAudio);
+    setIsScreenRecording(wantsScreen);
+    setIsWebcamRecording(wantsWebcam);
+  }, [
+    attachSaveHandler,
+    currentComponentHasAudioRecording,
+    currentComponentHasScreenRecording,
+    currentComponentHasWebcamRecording,
+    dataCollectionEnabled,
+    storageEngine,
+  ]);
 
   // Stop screen recording. This does not stop screen capture.
   const stopScreenRecording = useCallback(() => {
     setIsScreenRecording(false);
+    setIsAudioRecording(false);
+    setIsWebcamRecording(false);
     setScreenWithAudioRecording(false);
-    currentMediaRecorder.current?.stop();
-    audioMediaRecorder.current?.stop();
+    stopRecorder(currentMediaRecorder.current);
+    stopRecorder(webcamMediaRecorder.current);
+    stopRecorder(audioMediaRecorder.current);
+    currentMediaRecorder.current = null;
+    webcamMediaRecorder.current = null;
+    audioMediaRecorder.current = null;
   }, []);
 
   const stopAudioRecording = useCallback(() => {
@@ -236,23 +265,38 @@ export function useRecording() {
     setScreenWithAudioRecording(false);
     setIsAudioRecording(false);
 
-    currentMediaRecorder.current?.stop();
+    stopRecorder(currentMediaRecorder.current);
     if (audioMediaRecorder.current) {
       audioMediaRecorder.current.stream.getTracks().forEach((track) => { track.stop(); audioMediaRecorder.current?.stream.removeTrack(track); });
       audioMediaRecorder.current.stream.getAudioTracks().forEach((track) => { track.stop(); audioMediaRecorder.current?.stream.removeTrack(track); });
-      audioMediaRecorder.current.stop();
+      stopRecorder(audioMediaRecorder.current);
       audioMediaRecorder.current = null;
     }
-    analysisAudioStream.current?.getTracks().forEach((t) => t.stop());
+    stopMediaTracks(analysisAudioStream.current);
     analysisAudioStream.current = null;
     setAnalysisStreamReady(false);
   }, []);
 
   useEffect(() => {
-    if (currentComponent !== '$screen-recording.components.screenRecordingPermission' && currentComponent !== 'end' && screenCaptureStarted && !isScreenCapturing) {
+    const isPermissionComponent = currentComponent === SCREEN_PERMISSION_COMPONENT
+      || currentComponent === WEBCAM_PERMISSION_COMPONENT;
+    const missingRequiredCapture = (studyHasScreenRecording && !isScreenCapturing)
+      || (studyHasWebcamRecording && !isWebcamCapturing)
+      || ((studyHasScreenRecording || studyHasWebcamRecording) && studyHasAudioRecording && !isAudioCapturing);
+
+    if (!isPermissionComponent && currentComponent !== 'end' && mediaCaptureStarted && missingRequiredCapture) {
       setIsRejected(true);
     }
-  }, [currentComponent, isScreenCapturing, screenCaptureStarted]);
+  }, [
+    currentComponent,
+    isAudioCapturing,
+    isScreenCapturing,
+    isWebcamCapturing,
+    mediaCaptureStarted,
+    studyHasAudioRecording,
+    studyHasScreenRecording,
+    studyHasWebcamRecording,
+  ]);
 
   const startAudioRecording = useCallback((trialName: string) => {
     if (!dataCollectionEnabled) {
@@ -306,7 +350,7 @@ export function useRecording() {
       setAudioRecordingError('Microphone permission denied');
       setIsAudioRecording(false);
     });
-  }, [dataCollectionEnabled, isMuted, storageEngine]);
+  }, [dataCollectionEnabled, storageEngine, isMuted]);
 
   // For study with just audio recording
   useEffect(() => {
@@ -317,7 +361,7 @@ export function useRecording() {
       return;
     }
 
-    if (!studyConfig || studyHasScreenRecording || !studyHasAudioRecording || !storageEngine || (status && status.endTime > 0) || isAnalysis) {
+    if (!studyConfig || studyHasScreenRecording || studyHasWebcamRecording || !studyHasAudioRecording || !storageEngine || (status && status.endTime > 0) || isAnalysis) {
       return;
     }
 
@@ -334,18 +378,18 @@ export function useRecording() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentComponent, identifier, currentComponentHasAudioRecording]);
 
-  // For study with screen recording
+  // For studies with screen or webcam recording.
   useEffect(() => {
-    if (!studyConfig || !(studyHasScreenRecording) || !storageEngine || (status && status.endTime > 0) || isAnalysis) {
+    if (!studyConfig || !(studyHasScreenRecording || studyHasWebcamRecording) || !storageEngine || (status && status.endTime > 0) || isAnalysis) {
       return;
     }
 
-    if (currentMediaRecorder.current) {
+    if (currentMediaRecorder.current || webcamMediaRecorder.current || audioMediaRecorder.current) {
       stopScreenRecording();
       currentTrialName.current = null;
     }
 
-    if (currentComponent !== 'end' && isMediaCapturing && currentTrialName.current !== identifier && (currentComponentHasAudioRecording || currentComponentHasScreenRecording)) {
+    if (currentComponent !== 'end' && isMediaCapturing && currentTrialName.current !== identifier && (currentComponentHasAudioRecording || currentComponentHasScreenRecording || currentComponentHasWebcamRecording)) {
       currentTrialName.current = identifier;
       startScreenRecording(identifier);
     }
@@ -355,83 +399,118 @@ export function useRecording() {
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentComponent, identifier, currentComponentHasAudioRecording, currentComponentHasScreenRecording, isMediaCapturing]);
+  }, [currentComponent, identifier, currentComponentHasAudioRecording, currentComponentHasScreenRecording, currentComponentHasWebcamRecording, isMediaCapturing]);
+
+  // Start persistent capture. Per-trial recording begins in the navigation effect above.
+  const startMediaCapture = useCallback(async ({
+    includeScreen,
+    includeAudio,
+    includeWebcam,
+  }: {
+    includeScreen: boolean;
+    includeAudio: boolean;
+    includeWebcam: boolean;
+  }) => {
+    if (!dataCollectionEnabled) {
+      return;
+    }
 
-  // Start screen capture. This does not begin recording.
-  const startScreenCapture = useCallback(() => {
-    if (!dataCollectionEnabled) return;
-
-    const captureFn = async () => {
-      document.title = `RECORD THIS TAB: ${pageTitle}`;
-
-      try {
-        setRecordingError(null);
-        setAudioRecordingError(null);
-
-        const screenStream = (studyHasScreenRecording) ? await navigator.mediaDevices.getDisplayMedia({
-          video: { displaySurface: 'browser', ...(recordScreenFPS ? { frameRate: { ideal: recordScreenFPS } } : {}) },
-          audio: false,
-          // @ts-expect-error: experimental (selfBrowserSurface and preferCurrentTab are not yet standardized)
-          // https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia#selfbrowsersurface
-          selfBrowserSurface: 'include',
-          preferCurrentTab: true,
-        }) : null;
-
-        screenMediaStream.current = screenStream;
-
-        let micStream: MediaStream | null = null;
-        if (studyHasAudioRecording && dataCollectionEnabled) {
-          try {
-            micStream = await navigator.mediaDevices.getUserMedia({
-              audio: true,
-              video: false,
-            });
-          } catch (err) {
-            console.error('Error accessing microphone:', err);
-            setAudioRecordingError('Microphone permission denied');
-          }
-        }
+    document.title = includeScreen ? `RECORD THIS TAB: ${pageTitle}` : pageTitle;
 
-        audioMediaStream.current = micStream;
+    try {
+      setRecordingError(null);
+      setAudioRecordingError(null);
 
-        const analysisTrack = micStream?.getAudioTracks()[0]?.clone();
-        if (analysisTrack) {
-          analysisAudioStream.current = new MediaStream([analysisTrack]);
-          setAnalysisStreamReady(true);
+      const screenStream = includeScreen ? await navigator.mediaDevices.getDisplayMedia({
+        video: { displaySurface: 'browser', ...(recordScreenFPS ? { frameRate: { ideal: recordScreenFPS } } : {}) },
+        audio: false,
+        // @ts-expect-error: experimental (selfBrowserSurface and preferCurrentTab are not yet standardized)
+        // https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia#selfbrowsersurface
+        selfBrowserSurface: 'include',
+        preferCurrentTab: true,
+      }) : null;
+
+      const webcamStream = includeWebcam ? await navigator.mediaDevices.getUserMedia({
+        video: true,
+        audio: false,
+      }) : null;
+
+      let micStream: MediaStream | null = null;
+      if (includeAudio) {
+        try {
+          micStream = await navigator.mediaDevices.getUserMedia({
+            audio: true,
+            video: false,
+          });
+        } catch (err) {
+          console.error('Error accessing microphone:', err);
+          setAudioRecordingError('Microphone permission denied');
         }
+      }
 
-        const combinedStream = new MediaStream([
-          ...screenStream?.getVideoTracks() || [],
-          ...(micStream?.getAudioTracks() ?? []),
-        ]);
+      screenMediaStream.current = screenStream;
+      webcamMediaStream.current = webcamStream;
+      audioMediaStream.current = micStream;
 
-        currentMediaStream.current = combinedStream;
+      const analysisTrack = micStream?.getAudioTracks()[0]?.clone();
+      if (analysisTrack) {
+        analysisAudioStream.current = new MediaStream([analysisTrack]);
+        setAnalysisStreamReady(true);
+      }
 
-        if (recordVideoRef.current) {
-          recordVideoRef.current.srcObject = combinedStream;
-          recordVideoRef.current.play();
+      if (recordVideoRef.current) {
+        recordVideoRef.current.srcObject = screenStream;
+        if (screenStream) {
+          recordVideoRef.current.play().catch(() => undefined);
         }
+      }
+      if (webcamVideoRef.current) {
+        webcamVideoRef.current.srcObject = webcamStream;
+        if (webcamStream) {
+          webcamVideoRef.current.play().catch(() => undefined);
+        }
+      }
 
-        combinedStream.getTracks().forEach((track) => {
-          track.addEventListener('ended', () => {
-            stopScreenCapture();
-          });
-        });
+      const stopOnEnded = () => {
+        if (!isStoppingCapture.current) {
+          stopScreenCapture();
+        }
+      };
+      [screenStream, webcamStream, micStream].forEach((stream) => {
+        stream?.getTracks().forEach((track) => track.addEventListener('ended', stopOnEnded));
+      });
 
-        setIsScreenCapturing(screenStream !== null);
-        setIsAudioCapturing(micStream !== null);
-        setIsMediaCapturing(screenStream !== null || micStream !== null);
-        setScreenCaptureStarted(true);
-        setScreenWithAudioRecording(micStream !== null && !!recordAudio);
-      } catch (err) {
-        console.error('Error accessing screen:', err);
-        setRecordingError('Recording permission denied');
-      } finally {
-        document.title = pageTitle;
-      }
-    };
-    captureFn();
-  }, [pageTitle, recordAudio, recordScreenFPS, stopScreenCapture, studyHasAudioRecording, studyHasScreenRecording, dataCollectionEnabled]);
+      setIsScreenCapturing(!!screenStream);
+      setIsWebcamCapturing(!!webcamStream);
+      setIsAudioCapturing(!!micStream);
+      setIsMediaCapturing(!!(screenStream || webcamStream || micStream));
+      setMediaCaptureStarted(true);
+      setScreenWithAudioRecording(!!(screenStream && micStream && recordAudio));
+      setIsRejected(false);
+    } catch (err) {
+      console.error('Error accessing recording media:', err);
+      setRecordingError('Recording permission denied');
+      stopScreenCapture();
+    } finally {
+      document.title = pageTitle;
+    }
+  }, [dataCollectionEnabled, pageTitle, recordAudio, recordScreenFPS, stopScreenCapture]);
+
+  const startScreenCapture = useCallback(() => {
+    startMediaCapture({
+      includeScreen: studyHasScreenRecording,
+      includeAudio: studyHasAudioRecording,
+      includeWebcam: studyHasWebcamRecording,
+    });
+  }, [startMediaCapture, studyHasAudioRecording, studyHasScreenRecording, studyHasWebcamRecording]);
+
+  const startWebcamCapture = useCallback(() => {
+    startMediaCapture({
+      includeScreen: false,
+      includeAudio: studyHasAudioRecording,
+      includeWebcam: true,
+    });
+  }, [startMediaCapture, studyHasAudioRecording]);
 
   useEffect(() => {
     audioMediaStream.current?.getAudioTracks().forEach((track) => {
@@ -510,13 +589,17 @@ export function useRecording() {
 
   return {
     recordVideoRef,
+    webcamVideoRef,
     studyHasScreenRecording,
     studyHasAudioRecording,
+    studyHasWebcamRecording,
     currentComponentHasAudioRecording,
+    currentComponentHasWebcamRecording,
     isMuted,
     setIsMuted,
     recordAudio,
     startScreenCapture,
+    startWebcamCapture,
     stopScreenCapture,
     startScreenRecording,
     stopScreenRecording,
@@ -524,8 +607,10 @@ export function useRecording() {
     audioRecordingError,
     isScreenRecording,
     isAudioRecording,
+    isWebcamRecording,
     isScreenCapturing,
     isAudioCapturing,
+    isWebcamCapturing,
     isMediaCapturing,
     combinedMediaRecorder: currentMediaRecorder,
     audioMediaStream,
diff --git a/src/store/hooks/useRecordingConfig.ts b/src/store/hooks/useRecordingConfig.ts
index 77d4cff7e0..097e1e3c65 100644
--- a/src/store/hooks/useRecordingConfig.ts
+++ b/src/store/hooks/useRecordingConfig.ts
@@ -9,12 +9,19 @@ export function useRecordingConfig() {
   const currentComponent = useCurrentComponent();
   const stepConfig = studyConfig.components[currentComponent];
 
-  const { recordScreen, recordAudio, clickToRecord } = studyConfig.uiConfig;
+  const {
+    recordScreen,
+    recordAudio,
+    recordWebcam,
+    clickToRecord,
+  } = studyConfig.uiConfig;
 
   const studyHasScreenRecording = useMemo(() => (recordScreen || participantSequence.some((comp) => studyConfig.components[comp]?.recordScreen)), [participantSequence, studyConfig, recordScreen]);
 
   const studyHasAudioRecording = useMemo(() => (recordAudio || participantSequence.some((comp) => studyConfig.components[comp]?.recordAudio)), [participantSequence, studyConfig, recordAudio]);
 
+  const studyHasWebcamRecording = useMemo(() => (recordWebcam || participantSequence.some((comp) => studyConfig.components[comp]?.recordWebcam)), [participantSequence, studyConfig, recordWebcam]);
+
   const currentComponentHasScreenRecording = useMemo(
     () => stepConfig?.recordScreen ?? !!recordScreen,
     [recordScreen, stepConfig],
@@ -25,6 +32,11 @@ export function useRecordingConfig() {
     [recordAudio, stepConfig],
   );
 
+  const currentComponentHasWebcamRecording = useMemo(
+    () => stepConfig?.recordWebcam ?? !!recordWebcam,
+    [recordWebcam, stepConfig],
+  );
+
   const currentComponentHasClickToRecord = useMemo(
     () => stepConfig?.clickToRecord ?? !!clickToRecord,
     [clickToRecord, stepConfig],
@@ -33,8 +45,10 @@ export function useRecordingConfig() {
   return {
     studyHasAudioRecording,
     studyHasScreenRecording,
+    studyHasWebcamRecording,
     currentComponentHasAudioRecording,
     currentComponentHasScreenRecording,
+    currentComponentHasWebcamRecording,
     currentComponentHasClickToRecord,
   };
 }
diff --git a/src/store/hooks/useReplay.ts b/src/store/hooks/useReplay.ts
index f723844028..ce6c6eda11 100644
--- a/src/store/hooks/useReplay.ts
+++ b/src/store/hooks/useReplay.ts
@@ -22,6 +22,7 @@ function mediaIncludesTime(media: HTMLMediaElement, time: number) {
  */
 export function useReplay() {
   const videoRef = useRef<HTMLVideoElement | null>(null);
+  const webcamVideoRef = useRef<HTMLVideoElement | null>(null);
   const audioRef = useRef<HTMLAudioElement | null>(null);
   const isMountedRef = useRef(true);
 
@@ -45,6 +46,31 @@ export function useReplay() {
   const internalIsPlaying = useRef(false);
   const timerValue = useRef<number>(0);
 
+  const getMediaElements = useCallback(() => (
+    [videoRef.current, webcamVideoRef.current, audioRef.current]
+      .filter((media): media is HTMLMediaElement => !!media)
+  ), []);
+
+  const getActiveMediaElements = useCallback(() => (
+    getMediaElements().filter((media) => !!media.src)
+  ), [getMediaElements]);
+
+  const getSecondaryMediaElements = useCallback(() => (
+    getActiveMediaElements().filter((media) => media !== replayRef.current)
+  ), [getActiveMediaElements]);
+
+  const updateMutedState = useCallback(() => {
+    if (videoRef.current) {
+      videoRef.current.muted = !isMasterPlayer || replayRef.current !== videoRef.current;
+    }
+    if (webcamVideoRef.current) {
+      webcamVideoRef.current.muted = true;
+    }
+    if (audioRef.current) {
+      audioRef.current.muted = !isMasterPlayer || replayRef.current === videoRef.current;
+    }
+  }, [isMasterPlayer]);
+
   const updateIsPlaying = useCallback((playing: boolean) => {
     internalIsPlaying.current = playing;
     _setIsPlaying(playing);
@@ -116,19 +142,14 @@ export function useReplay() {
   }, [seekTime, isPlaying, speed, isMasterPlayer]);
 
   useEffect(() => {
-    const muted = !isMasterPlayer;
-    if (videoRef.current) videoRef.current.muted = muted;
-    if (audioRef.current) audioRef.current.muted = muted;
-  }, [isMasterPlayer]);
+    updateMutedState();
+  }, [updateMutedState]);
 
   useEffect(() => {
-    if (videoRef.current) {
-      videoRef.current.playbackRate = speed;
-    }
-    if (audioRef.current) {
-      audioRef.current.playbackRate = speed;
-    }
-  }, [speed]);
+    getMediaElements().forEach((media) => {
+      media.playbackRate = speed;
+    });
+  }, [getMediaElements, speed]);
 
   const handlePlay = useCallback(() => {
     if (!isMountedRef.current) {
@@ -140,15 +161,11 @@ export function useReplay() {
     const t = replayRef.current?.currentTime || 0;
     emitterRef.current.emit('play', t);
 
-    if (videoRef.current === replayRef.current) {
-      if (audioRef.current) {
-        audioRef.current.muted = true;
-        audioRef.current.play();
-      }
-    } else {
-      videoRef.current?.play();
-    }
-  }, [updateIsPlaying]);
+    updateMutedState();
+    getSecondaryMediaElements().forEach((media) => {
+      media.play().catch(() => undefined);
+    });
+  }, [getSecondaryMediaElements, updateIsPlaying, updateMutedState]);
 
   const handleSeeked = useCallback(() => {
     // Media may clamp a task-level seek to its shorter duration. Keep the task
@@ -160,12 +177,7 @@ export function useReplay() {
     setIsMasterPlayer(!isRemoteTriggered);
     _setSeekTime(time);
     timerValue.current = time;
-    if (videoRef.current) {
-      seekMedia(videoRef.current, time);
-    }
-    if (audioRef.current) {
-      seekMedia(audioRef.current, time);
-    }
+    getMediaElements().forEach((media) => seekMedia(media, time));
     if (
       internalIsPlaying.current
       && replayRef.current?.paused
@@ -175,7 +187,7 @@ export function useReplay() {
     }
     emitterRef.current.emit('timeupdate', time);
     setHasEnded(internalDuration.current > 0 && time >= internalDuration.current);
-  }, [requestReplayPlayback]);
+  }, [getMediaElements, requestReplayPlayback]);
 
   const handlePause = useCallback(() => {
     if (!isMountedRef.current) {
@@ -196,14 +208,8 @@ export function useReplay() {
 
     emitterRef.current.emit('pause', timerValue.current);
 
-    if (videoRef.current === replayRef.current) {
-      if (audioRef.current) {
-        audioRef.current.pause();
-      }
-    } else {
-      videoRef.current?.pause();
-    }
-  }, [updateIsPlaying]);
+    getSecondaryMediaElements().forEach((media) => media.pause());
+  }, [getSecondaryMediaElements, updateIsPlaying]);
 
   const handleEnded = useCallback(() => {
     const mediaTime = replayRef.current?.currentTime;
@@ -231,25 +237,21 @@ export function useReplay() {
    */
   const updateReplayRef = useCallback(() => {
     const previousReplay = replayRef.current;
-    const originalVideo = videoRef.current;
-    const originalAudio = audioRef.current;
+    const mediaElements = getMediaElements();
 
     previousReplay?.removeEventListener('play', handlePlay);
     previousReplay?.removeEventListener('pause', handlePause);
     previousReplay?.removeEventListener('seeked', handleSeeked);
     previousReplay?.removeEventListener('ended', handleEnded);
 
-    if (originalVideo) {
-      originalVideo.playbackRate = internalSpeed.current;
-      seekMedia(originalVideo, timerValue.current);
-    }
-
-    if (originalAudio) {
-      originalAudio.playbackRate = internalSpeed.current;
-      seekMedia(originalAudio, timerValue.current);
-    }
+    mediaElements.forEach((media) => {
+      media.playbackRate = internalSpeed.current;
+      seekMedia(media, timerValue.current);
+    });
 
-    replayRef.current = (videoRef.current?.src ? videoRef.current : null) ?? (audioRef.current?.src ? audioRef.current : null);
+    replayRef.current = (videoRef.current?.src ? videoRef.current : null)
+      ?? (webcamVideoRef.current?.src ? webcamVideoRef.current : null)
+      ?? (audioRef.current?.src ? audioRef.current : null);
 
     if (replayRef.current) {
       replayRef.current.addEventListener('play', handlePlay);
@@ -257,8 +259,9 @@ export function useReplay() {
       replayRef.current.addEventListener('seeked', handleSeeked);
       replayRef.current.addEventListener('ended', handleEnded);
     }
+    updateMutedState();
     forceEmitTimeUpdate();
-  }, [handlePlay, handlePause, handleSeeked, handleEnded, forceEmitTimeUpdate]);
+  }, [forceEmitTimeUpdate, getMediaElements, handleEnded, handlePause, handlePlay, handleSeeked, updateMutedState]);
 
   // this should be the only way to start video/audio
   const setIsPlaying = useCallback((playing: boolean, isRemoteTriggered = false) => {
@@ -394,6 +397,8 @@ export function useReplay() {
     () => ({
       replayRef,
       videoRef,
+      screenVideoRef: videoRef,
+      webcamVideoRef,
       audioRef,
       updateReplayRef,
       seekTime,
diff --git a/src/store/store.tsx b/src/store/store.tsx
index 40544f53eb..df0541f3ae 100644
--- a/src/store/store.tsx
+++ b/src/store/store.tsx
@@ -175,6 +175,7 @@ export async function studyStoreCreator(
     analysisIsPlaying: false,
     analysisHasAudio: false,
     analysisHasScreenRecording: false,
+    analysisHasWebcamRecording: false,
     analysisCanPlayScreenRecording: true,
     analysisHasProvenance: false,
     provenanceJumpTime: 0,
@@ -274,6 +275,9 @@ export async function studyStoreCreator(
       setAnalysisHasScreenRecording(state, { payload }: PayloadAction<boolean>) {
         state.analysisHasScreenRecording = payload;
       },
+      setAnalysisHasWebcamRecording(state, { payload }: PayloadAction<boolean>) {
+        state.analysisHasWebcamRecording = payload;
+      },
       setAnalysisCanPlayScreenRecording(state, { payload }: PayloadAction<boolean>) {
         state.analysisCanPlayScreenRecording = payload;
       },
diff --git a/src/store/types.ts b/src/store/types.ts
index 8921ab73ed..ba1b4daf8f 100644
--- a/src/store/types.ts
+++ b/src/store/types.ts
@@ -270,6 +270,7 @@ export interface StoreState {
   analysisIsPlaying: boolean;
   analysisHasAudio: boolean;
   analysisHasScreenRecording: boolean;
+  analysisHasWebcamRecording: boolean;
   analysisCanPlayScreenRecording: boolean;
   provenanceJumpTime: number;
   analysisHasProvenance: boolean;
diff --git a/src/tests/utils.ts b/src/tests/utils.ts
index c608fab21d..f56b490e9b 100644
--- a/src/tests/utils.ts
+++ b/src/tests/utils.ts
@@ -81,6 +81,8 @@ class TestStorageEngine extends StorageEngine {
 
   protected _getScreenRecordingUrl = vi.fn(async () => null);
 
+  protected _getWebcamRecordingUrl = vi.fn(async () => null);
+
   protected _testingReset = vi.fn(async () => { });
 
   protected _directoryExists = vi.fn(async () => false);
@@ -122,6 +124,8 @@ class TestStorageEngine extends StorageEngine {
 
   getScreenRecording = vi.fn(async () => null);
 
+  getWebcamRecording = vi.fn(async () => null);
+
   saveAnswers = vi.fn(async () => { });
 
   constructor() {
diff --git a/src/utils/handleDownloadFiles.ts b/src/utils/handleDownloadFiles.ts
index 8bcac482b7..ec874c418a 100644
--- a/src/utils/handleDownloadFiles.ts
+++ b/src/utils/handleDownloadFiles.ts
@@ -44,30 +44,77 @@ export async function handleTaskAudio({
   }
 }
 
-export async function handleTaskScreenRecording({
+type RecordingType = 'screenRecording' | 'webcamRecording';
+
+async function getTaskRecordingUrl({
+  storageEngine,
+  participantId,
+  identifier,
+  recordingType,
+  recordingUrl,
+}: {
+  storageEngine: StorageEngine;
+  participantId: string;
+  identifier: string;
+  recordingType: RecordingType;
+  recordingUrl?: string | null;
+}) {
+  if (recordingUrl) {
+    return recordingUrl;
+  }
+  return recordingType === 'screenRecording'
+    ? storageEngine.getScreenRecording(identifier, participantId)
+    : storageEngine.getWebcamRecording(identifier, participantId);
+}
+
+export async function handleTaskRecordings({
   storageEngine,
   participantId,
   identifier,
+  includeScreen,
+  includeWebcam,
   screenRecordingUrl,
+  webcamRecordingUrl,
 }: {
   storageEngine: StorageEngine;
   participantId: string;
   identifier: string;
+  includeScreen: boolean;
+  includeWebcam: boolean;
   screenRecordingUrl?: string | null;
+  webcamRecordingUrl?: string | null;
 }) {
-  const finalScreenRecordingUrl = screenRecordingUrl || await storageEngine.getScreenRecording(identifier, participantId);
+  const recordings: Array<{ type: RecordingType; url?: string | null }> = [
+    ...(includeScreen ? [{ type: 'screenRecording' as const, url: screenRecordingUrl }] : []),
+    ...(includeWebcam ? [{ type: 'webcamRecording' as const, url: webcamRecordingUrl }] : []),
+  ];
+
+  await Promise.all(recordings.map(async ({ type, url: providedUrl }) => {
+    try {
+      const recordingUrl = await getTaskRecordingUrl({
+        storageEngine,
+        participantId,
+        identifier,
+        recordingType: type,
+        recordingUrl: providedUrl,
+      });
+      if (!recordingUrl) {
+        return;
+      }
 
-  if (finalScreenRecordingUrl) {
-    const blob = await (await fetch(finalScreenRecordingUrl)).blob();
-    const url = URL.createObjectURL(blob);
+      const blob = await (await fetch(recordingUrl)).blob();
+      const objectUrl = URL.createObjectURL(blob);
 
-    Object.assign(document.createElement('a'), {
-      href: url,
-      download: `${participantId}_${identifier}_screenRecording.webm`,
-    }).click();
+      Object.assign(document.createElement('a'), {
+        href: objectUrl,
+        download: `${participantId}_${identifier}_${type}.webm`,
+      }).click();
 
-    URL.revokeObjectURL(url);
-  }
+      URL.revokeObjectURL(objectUrl);
+    } catch (error) {
+      console.warn(`Failed to fetch ${type} for ${identifier}:`, error);
+    }
+  }));
 }
 
 async function loadAssetToZip(zip: JSZip, fileName: string, assetUrl: string | null) {
@@ -191,48 +238,67 @@ export async function downloadParticipantsAudioZip({
   await downloadZip(zip, `${namePrefix}_audio.zip`);
 }
 
-async function downloadParticipantsScreenRecording({
+async function downloadParticipantsRecordings({
   storageEngine,
   participantId,
   identifier,
   namePrefix,
+  includeScreen,
+  includeWebcam,
   zip,
 }: {
   storageEngine: StorageEngine;
   participantId: string;
   identifier: string;
   namePrefix: string;
+  includeScreen: boolean;
+  includeWebcam: boolean;
   zip?: JSZip;
 }) {
-  const screenRecordingZip = zip || new JSZip();
-
-  try {
-    const screenRecordingUrl = await storageEngine.getScreenRecording(identifier, participantId);
-    await loadAssetToZip(screenRecordingZip, `${namePrefix}_${participantId}_${identifier}.webm`, screenRecordingUrl);
-
-    if (!zip) {
-      downloadZip(screenRecordingZip, `${namePrefix}_${participantId}_${identifier}_screenRecording.zip`);
+  const recordingsZip = zip || new JSZip();
+  const recordingTypes: RecordingType[] = [
+    ...(includeScreen ? ['screenRecording' as const] : []),
+    ...(includeWebcam ? ['webcamRecording' as const] : []),
+  ];
+
+  await Promise.all(recordingTypes.map(async (recordingType) => {
+    try {
+      const recordingUrl = await getTaskRecordingUrl({
+        storageEngine,
+        participantId,
+        identifier,
+        recordingType,
+      });
+      await loadAssetToZip(recordingsZip, `${namePrefix}_${participantId}_${identifier}_${recordingType}.webm`, recordingUrl);
+    } catch (error) {
+      console.warn(`Failed to fetch ${recordingType} for ${identifier}:`, error);
     }
-  } catch (error) {
-    console.warn(`Failed to fetch files for ${identifier}:`, error);
+  }));
+
+  if (!zip) {
+    downloadZip(recordingsZip, `${namePrefix}_${participantId}_${identifier}_recordings.zip`);
   }
 }
 
-export async function downloadParticipantsScreenRecordingZip({
+export async function downloadParticipantsRecordingsZip({
   storageEngine,
   participants,
   studyId,
+  includeScreen,
+  includeWebcam,
   fileName,
 }: {
   storageEngine: StorageEngine;
   participants: Array<{ participantId: string; answers: Record<string, { endTime: number; startTime: number; componentName: string; trialOrder: string }> }>;
   studyId: string;
+  includeScreen: boolean;
+  includeWebcam: boolean;
   fileName?: string | null;
 }) {
   const namePrefix = fileName || studyId;
   const zip = new JSZip();
 
-  const screenRecordingPromises = participants.flatMap((participant) => {
+  const recordingPromises = participants.flatMap((participant) => {
     const entries = Object.values(participant.answers)
       .filter((ans) => ans.endTime > 0)
       .sort((a, b) => a.startTime - b.startTime);
@@ -240,19 +306,21 @@ export async function downloadParticipantsScreenRecordingZip({
     return entries.map(async (ans) => {
       const identifier = `${ans.componentName}_${ans.trialOrder}`;
 
-      await downloadParticipantsScreenRecording({
+      await downloadParticipantsRecordings({
         storageEngine,
         participantId: participant.participantId,
         identifier,
         namePrefix,
+        includeScreen,
+        includeWebcam,
         zip,
       });
     });
   });
 
-  await Promise.all(screenRecordingPromises);
+  await Promise.all(recordingPromises);
 
-  await downloadZip(zip, `${namePrefix}_screenRecording.zip`);
+  await downloadZip(zip, `${namePrefix}_recordings.zip`);
 }
 
 export async function downloadParticipantsProvenanceZip({
diff --git a/src/utils/tests/handleDownloadFiles.spec.ts b/src/utils/tests/handleDownloadFiles.spec.ts
index e9c2cd2e86..153449efe7 100644
--- a/src/utils/tests/handleDownloadFiles.spec.ts
+++ b/src/utils/tests/handleDownloadFiles.spec.ts
@@ -5,9 +5,9 @@ import {
   downloadConfigFile,
   downloadConfigFilesZip,
   downloadParticipantsAudioZip,
-  downloadParticipantsScreenRecordingZip,
+  downloadParticipantsRecordingsZip,
   handleTaskAudio,
-  handleTaskScreenRecording,
+  handleTaskRecordings,
 } from '../handleDownloadFiles';
 import { makeStudyConfig, makeStorageEngine } from '../../tests/utils';
 
@@ -74,13 +74,15 @@ describe('handleTaskAudio', () => {
   });
 });
 
-describe('handleTaskScreenRecording', () => {
+describe('handleTaskRecordings', () => {
   test('fetches the provided screenRecordingUrl and triggers a click', async () => {
     const storageEngine = makeStorageEngine();
-    await handleTaskScreenRecording({
+    await handleTaskRecordings({
       storageEngine,
       participantId: 'p1',
       identifier: 'trial_0',
+      includeScreen: true,
+      includeWebcam: false,
       screenRecordingUrl: 'https://example.com/recording.webm',
     });
 
@@ -93,7 +95,9 @@ describe('handleTaskScreenRecording', () => {
       getScreenRecording: vi.fn(async () => 'https://example.com/rec.webm'),
     });
 
-    await handleTaskScreenRecording({ storageEngine, participantId: 'p2', identifier: 'trial_1' });
+    await handleTaskRecordings({
+      storageEngine, participantId: 'p2', identifier: 'trial_1', includeScreen: true, includeWebcam: false,
+    });
 
     expect((storageEngine.getScreenRecording as ReturnType<typeof vi.fn>)).toHaveBeenCalledWith('trial_1', 'p2');
     expect(clickSpy).toHaveBeenCalled();
@@ -101,9 +105,25 @@ describe('handleTaskScreenRecording', () => {
 
   test('skips download when screen recording URL is null', async () => {
     const storageEngine = makeStorageEngine();
-    await handleTaskScreenRecording({ storageEngine, participantId: 'p3', identifier: 'trial_2' });
+    await handleTaskRecordings({
+      storageEngine, participantId: 'p3', identifier: 'trial_2', includeScreen: true, includeWebcam: false,
+    });
     expect(clickSpy).not.toHaveBeenCalled();
   });
+
+  test('downloads screen and webcam assets through the shared control', async () => {
+    const storageEngine = makeStorageEngine();
+    await handleTaskRecordings({
+      storageEngine,
+      participantId: 'p4',
+      identifier: 'trial_3',
+      includeScreen: true,
+      includeWebcam: true,
+      screenRecordingUrl: 'https://example.com/screen.webm',
+      webcamRecordingUrl: 'https://example.com/webcam.webm',
+    });
+    expect(clickSpy).toHaveBeenCalledTimes(2);
+  });
 });
 
 describe('downloadConfigFile', () => {
@@ -224,7 +244,7 @@ describe('downloadParticipantsAudioZip', () => {
   });
 });
 
-describe('downloadParticipantsScreenRecordingZip', () => {
+describe('downloadParticipantsRecordingsZip', () => {
   test('fetches screen recordings for each completed trial and downloads zip', async () => {
     const screenUrl = 'https://example.com/recording.webm';
     const storageEngine = makeStorageEngine({
@@ -239,7 +259,9 @@ describe('downloadParticipantsScreenRecordingZip', () => {
       },
     }];
 
-    await downloadParticipantsScreenRecordingZip({ storageEngine, participants, studyId: 'my-study' });
+    await downloadParticipantsRecordingsZip({
+      storageEngine, participants, studyId: 'my-study', includeScreen: true, includeWebcam: false,
+    });
 
     expect((storageEngine.getScreenRecording as ReturnType<typeof vi.fn>)).toHaveBeenCalled();
     expect(URL.createObjectURL).toHaveBeenCalledWith(expect.any(Blob));
@@ -259,7 +281,9 @@ describe('downloadParticipantsScreenRecordingZip', () => {
       },
     }];
 
-    await downloadParticipantsScreenRecordingZip({ storageEngine, participants, studyId: 'my-study' });
+    await downloadParticipantsRecordingsZip({
+      storageEngine, participants, studyId: 'my-study', includeScreen: true, includeWebcam: false,
+    });
 
     expect((storageEngine.getScreenRecording as ReturnType<typeof vi.fn>)).not.toHaveBeenCalled();
     expect(clickSpy).toHaveBeenCalledOnce();
@@ -268,8 +292,8 @@ describe('downloadParticipantsScreenRecordingZip', () => {
   test('uses the provided fileName as zip name prefix', async () => {
     const storageEngine = makeStorageEngine();
 
-    await downloadParticipantsScreenRecordingZip({
-      storageEngine, participants: [], studyId: 'study', fileName: 'custom-name',
+    await downloadParticipantsRecordingsZip({
+      storageEngine, participants: [], studyId: 'study', fileName: 'custom-name', includeScreen: true, includeWebcam: false,
     });
 
     expect(clickSpy).toHaveBeenCalledOnce();
@@ -289,8 +313,37 @@ describe('downloadParticipantsScreenRecordingZip', () => {
     }];
 
     await expect(
-      downloadParticipantsScreenRecordingZip({ storageEngine, participants, studyId: 'my-study' }),
+      downloadParticipantsRecordingsZip({
+        storageEngine, participants, studyId: 'my-study', includeScreen: true, includeWebcam: false,
+      }),
     ).resolves.not.toThrow();
     expect(clickSpy).toHaveBeenCalledOnce();
   });
+
+  test('fetches webcam recordings into the same recordings zip', async () => {
+    const storageEngine = makeStorageEngine({
+      getScreenRecording: vi.fn(async () => 'https://example.com/screen.webm'),
+      getWebcamRecording: vi.fn(async () => 'https://example.com/webcam.webm'),
+    });
+    const participants = [{
+      participantId: 'p1',
+      answers: {
+        trial_0: {
+          endTime: 1000, startTime: 0, componentName: 'trial', trialOrder: '0',
+        },
+      },
+    }];
+
+    await downloadParticipantsRecordingsZip({
+      storageEngine,
+      participants,
+      studyId: 'my-study',
+      includeScreen: true,
+      includeWebcam: true,
+    });
+
+    expect(storageEngine.getScreenRecording).toHaveBeenCalledWith('trial_0', 'p1');
+    expect(storageEngine.getWebcamRecording).toHaveBeenCalledWith('trial_0', 'p1');
+    expect(clickSpy).toHaveBeenCalledOnce();
+  });
 });
diff --git a/src/utils/tests/useStudyRecordings.spec.ts b/src/utils/tests/useStudyRecordings.spec.ts
index 7c9e39f9b3..86de56d7c7 100644
--- a/src/utils/tests/useStudyRecordings.spec.ts
+++ b/src/utils/tests/useStudyRecordings.spec.ts
@@ -18,6 +18,7 @@ describe('useStudyRecordings', () => {
     await waitFor(() => {
       expect(result.current.hasAudioRecording).toBe(false);
       expect(result.current.hasScreenRecording).toBe(false);
+      expect(result.current.hasWebcamRecording).toBe(false);
     });
   });
 
@@ -27,6 +28,7 @@ describe('useStudyRecordings', () => {
     await waitFor(() => {
       expect(result.current.hasAudioRecording).toBe(false);
       expect(result.current.hasScreenRecording).toBe(false);
+      expect(result.current.hasWebcamRecording).toBe(false);
     });
   });
 
@@ -49,12 +51,26 @@ describe('useStudyRecordings', () => {
     await waitFor(() => expect(result.current.hasScreenRecording).toBe(true));
   });
 
+  test('hasWebcamRecording is true when webcam recording is configured', async () => {
+    const config = makeStudyConfig({ uiConfig: { recordWebcam: true } });
+    const { result } = renderHook(() => useStudyRecordings(config));
+    await waitFor(() => expect(result.current.hasWebcamRecording).toBe(true));
+    expect(result.current.hasScreenRecording).toBe(false);
+  });
+
+  test('hasWebcamRecording is true when a component enables it', async () => {
+    const config = makeStudyConfig({ components: { trial1: { recordWebcam: true } } });
+    const { result } = renderHook(() => useStudyRecordings(config));
+    await waitFor(() => expect(result.current.hasWebcamRecording).toBe(true));
+  });
+
   test('both flags are false when config has no recording options', async () => {
     const config = makeStudyConfig({ components: { trial1: { recordScreen: false } } });
     const { result } = renderHook(() => useStudyRecordings(config));
     await waitFor(() => {
       expect(result.current.hasScreenRecording).toBe(false);
       expect(result.current.hasAudioRecording).toBe(false);
+      expect(result.current.hasWebcamRecording).toBe(false);
     });
   });
 });
diff --git a/src/utils/useStudyRecordings.ts b/src/utils/useStudyRecordings.ts
index ceb7c38f5a..133081f3f8 100644
--- a/src/utils/useStudyRecordings.ts
+++ b/src/utils/useStudyRecordings.ts
@@ -2,30 +2,43 @@ import { useEffect, useState } from 'react';
 import { StudyConfig } from '../parser/types';
 import { studyComponentToIndividualComponent } from './handleComponentInheritance';
 
+export function getStudyRecordings(studyConfig: StudyConfig | undefined) {
+  if (!studyConfig?.uiConfig || !studyConfig.components) {
+    return {
+      hasAudioRecording: false,
+      hasScreenRecording: false,
+      hasWebcamRecording: false,
+    };
+  }
+
+  const { recordAudio, recordScreen, recordWebcam } = studyConfig.uiConfig;
+  const componentConfig = Object.keys(studyConfig.components).map((componentId) => studyComponentToIndividualComponent(studyConfig.components[componentId], studyConfig));
+
+  return {
+    hasAudioRecording: !!recordAudio || componentConfig.some((component) => component.recordAudio),
+    hasScreenRecording: !!recordScreen || componentConfig.some((component) => component.recordScreen),
+    hasWebcamRecording: !!recordWebcam || componentConfig.some((component) => component.recordWebcam),
+  };
+}
+
 /**
- * Determines if the study has audio and screen recordings.
+ * Determines if the study has audio, screen, and webcam recordings.
  */
 export function useStudyRecordings(studyConfig: StudyConfig | undefined) {
   const [hasAudioRecording, setHasAudioRecording] = useState(false);
   const [hasScreenRecording, setHasScreenRecording] = useState(false);
+  const [hasWebcamRecording, setHasWebcamRecording] = useState(false);
 
   useEffect(() => {
-    if (!studyConfig?.uiConfig || !studyConfig.components) {
-      setHasAudioRecording(false);
-      setHasScreenRecording(false);
-      return;
-    }
-
-    const { recordAudio, recordScreen } = studyConfig.uiConfig;
-
-    const componentConfig = Object.keys(studyConfig.components).map((componentId) => studyComponentToIndividualComponent(studyConfig.components[componentId], studyConfig));
-
-    setHasAudioRecording(recordAudio || componentConfig.some((a) => a.recordAudio));
-    setHasScreenRecording(recordScreen || componentConfig.some((a) => a.recordScreen));
+    const recordings = getStudyRecordings(studyConfig);
+    setHasAudioRecording(recordings.hasAudioRecording);
+    setHasScreenRecording(recordings.hasScreenRecording);
+    setHasWebcamRecording(recordings.hasWebcamRecording);
   }, [studyConfig]);
 
   return {
     hasAudioRecording,
     hasScreenRecording,
+    hasWebcamRecording,
   };
 }

From 13b6bd59a5e07ff5f53c4504e3ff82038d7bde3c Mon Sep 17 00:00:00 2001
From: Jack Wilburn <jackwilburn@tutanota.com>
Date: Mon, 24 Aug 2026 12:40:03 -0400
Subject: [PATCH 02/12] Harden webcam recording lifecycle and replay

---
 .../assets/webcam-recording.md                |   2 +-
 public/library-webcam-recording/config.json   |   2 +-
 .../tests/ThinkAloudAnalysis.spec.tsx         |  12 +-
 .../audioAnalysis/AudioProvenanceVis.tsx      |  31 +++-
 src/components/interface/AnalysisFooter.tsx   |   6 +-
 src/components/interface/AppHeader.tsx        |  28 +++-
 .../interface/ScreenRecordingRejection.tsx    |   4 +-
 .../interface/tests/AnalysisFooter.spec.tsx   |   1 +
 .../interface/tests/AppHeader.spec.tsx        |   2 +
 .../tests/ScreenRecordingRejection.spec.tsx   |   4 +-
 .../screenRecording/ScreenRecordingReplay.tsx |  44 +++++-
 src/components/tests/StepRenderer.spec.tsx    |   1 +
 .../assets/ScreenRecording.tsx                |   9 +-
 .../assets/WebcamRecording.tsx                |  10 +-
 src/storage/engines/types.ts                  |  19 ++-
 src/storage/tests/highLevel.spec.ts           |   8 ++
 src/store/hooks/tests/useRecording.spec.ts    | 134 +++++++++++++++++-
 src/store/hooks/tests/useReplay.spec.tsx      |  60 ++++++++
 src/store/hooks/useRecording.ts               |  86 ++++++++---
 src/store/hooks/useReplay.ts                  |  40 ++++--
 src/utils/handleDownloadFiles.ts              |  15 +-
 src/utils/tests/handleDownloadFiles.spec.ts   |  29 ++++
 22 files changed, 489 insertions(+), 58 deletions(-)

diff --git a/public/library-webcam-recording/assets/webcam-recording.md b/public/library-webcam-recording/assets/webcam-recording.md
index 39e245a024..d0a151dc98 100644
--- a/public/library-webcam-recording/assets/webcam-recording.md
+++ b/public/library-webcam-recording/assets/webcam-recording.md
@@ -1,4 +1,4 @@
-# Webcam Recording
+# WCR: Webcam Recording
 
 This is a demo of the library `webcam-recording`.
 
diff --git a/public/library-webcam-recording/config.json b/public/library-webcam-recording/config.json
index 599d5d7138..ab78ae9a0f 100644
--- a/public/library-webcam-recording/config.json
+++ b/public/library-webcam-recording/config.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/revisit-studies/study/dev/src/parser/StudyConfigSchema.json",
   "studyMetadata": {
-    "title": "Webcam Recording",
+    "title": "WCR: Webcam Recording",
     "version": "1.0.0",
     "authors": [
       "The reVISit Team"
diff --git a/src/analysis/individualStudy/thinkAloud/tests/ThinkAloudAnalysis.spec.tsx b/src/analysis/individualStudy/thinkAloud/tests/ThinkAloudAnalysis.spec.tsx
index 77bf51fb54..7b610551b4 100644
--- a/src/analysis/individualStudy/thinkAloud/tests/ThinkAloudAnalysis.spec.tsx
+++ b/src/analysis/individualStudy/thinkAloud/tests/ThinkAloudAnalysis.spec.tsx
@@ -15,7 +15,7 @@ import { makeParticipant, makeStoredAnswer as makeStoredAnswerBase, makeStorageE
 import type { FirebaseStorageEngine } from '../../../../storage/engines/FirebaseStorageEngine';
 import { useAsync } from '../../../../store/hooks/useAsync';
 import { useReplayContext } from '../../../../store/hooks/useReplay';
-import { handleTaskScreenRecording } from '../../../../utils/handleDownloadFiles';
+import { handleTaskRecordings } from '../../../../utils/handleDownloadFiles';
 import { Pills } from '../tags/Pills';
 import { AddTagDropdown } from '../tags/AddTagDropdown';
 import { TagEditor } from '../tags/TagEditor';
@@ -624,7 +624,7 @@ describe('ThinkAloudFooter', () => {
       execute: vi.fn(),
       error: null,
     }));
-    vi.mocked(handleTaskScreenRecording).mockClear();
+    vi.mocked(handleTaskRecordings).mockClear();
 
     const view = render(<RealThinkAloudFooter {...footerDefaultProps} storageEngine={storageEngine} />);
     await waitFor(() => expect(storageEngine.getAudioUrl).toHaveBeenCalledWith('trial_0', 'p1'));
@@ -641,13 +641,17 @@ describe('ThinkAloudFooter', () => {
     screenP2.resolve('screen-p2');
     const screenIcon = await waitFor(() => view.getByTestId('screen-recording-icon'));
     fireEvent.click(screenIcon.closest('button')!);
-    expect(handleTaskScreenRecording).toHaveBeenLastCalledWith(expect.objectContaining({ screenRecordingUrl: 'screen-p2' }));
+    expect(handleTaskRecordings).toHaveBeenLastCalledWith(expect.objectContaining({
+      includeScreen: true,
+      includeWebcam: false,
+      screenRecordingUrl: 'screen-p2',
+    }));
 
     screenP1.resolve('screen-p1');
     await act(async () => { await screenP1.promise; });
     const liveScreenIcon = view.getByTestId('screen-recording-icon');
     fireEvent.click(liveScreenIcon.closest('button')!);
-    expect(handleTaskScreenRecording).toHaveBeenLastCalledWith(expect.objectContaining({
+    expect(handleTaskRecordings).toHaveBeenLastCalledWith(expect.objectContaining({
       participantId: 'p2', identifier: 'trial_0', screenRecordingUrl: 'screen-p2',
     }));
   });
diff --git a/src/components/audioAnalysis/AudioProvenanceVis.tsx b/src/components/audioAnalysis/AudioProvenanceVis.tsx
index c535549f2d..a0685b67a1 100644
--- a/src/components/audioAnalysis/AudioProvenanceVis.tsx
+++ b/src/components/audioAnalysis/AudioProvenanceVis.tsx
@@ -97,6 +97,8 @@ export function AudioProvenanceVis({
   const [playTime, setPlayTime] = useState<number>(0);
 
   const wavesurfer = useRef<WaveSurferType | null>(null);
+  const loadedAnalysisUrls = useRef<string[]>([]);
+  const analysisLoadGeneration = useRef(0);
 
   const waveSurferDiv = useRef(null);
 
@@ -107,6 +109,12 @@ export function AudioProvenanceVis({
   const trrackForTrial = useRef<Trrack<object, string> | null>(null);
   const hasLoadableTask = Boolean(participantId && taskName && answers[taskName]);
 
+  useEffect(() => () => {
+    analysisLoadGeneration.current += 1;
+    loadedAnalysisUrls.current.forEach((url) => URL.revokeObjectURL(url));
+    loadedAnalysisUrls.current = [];
+  }, []);
+
   useEffect(() => {
     let canceled = false;
 
@@ -297,6 +305,10 @@ export function AudioProvenanceVis({
 
   const handleWSMount = useEvent(
     async (waveSurfer: WaveSurferType | null) => {
+      const loadGeneration = analysisLoadGeneration.current + 1;
+      analysisLoadGeneration.current = loadGeneration;
+      loadedAnalysisUrls.current.forEach((url) => URL.revokeObjectURL(url));
+      loadedAnalysisUrls.current = [];
       wavesurfer.current = waveSurfer;
 
       audioRef.current = null;
@@ -308,13 +320,19 @@ export function AudioProvenanceVis({
             throw new Error('Participant ID is required to load audio');
           }
 
-          const [audioUrl, screenUrl, webcamUrl] = await Promise.all([
+          const [audioUrl, screenUrl] = await Promise.all([
             safe(storageEngine.getAudio(taskName, participantId)),
             safe(storageEngine.getScreenRecording(taskName, participantId)),
-            safe(storageEngine.getWebcamRecording(taskName, participantId)),
           ]);
+          const loadedUrls = [audioUrl, screenUrl]
+            .filter((url): url is string => !!url && url.startsWith('blob:'));
+          if (loadGeneration !== analysisLoadGeneration.current) {
+            loadedUrls.forEach((url) => URL.revokeObjectURL(url));
+            return;
+          }
+          loadedAnalysisUrls.current = loadedUrls;
 
-          const url = screenUrl ?? audioUrl ?? webcamUrl ?? null;
+          const url = screenUrl ?? audioUrl ?? null;
           const hasAudioSource = !!(screenUrl ?? audioUrl);
 
           if (!url) {
@@ -325,6 +343,10 @@ export function AudioProvenanceVis({
           }
 
           await waveSurfer.load(url!, undefined, duration);
+          if (loadGeneration !== analysisLoadGeneration.current) {
+            loadedUrls.forEach((loadedUrl) => URL.revokeObjectURL(loadedUrl));
+            return;
+          }
           setWaveSurferLoading(false);
 
           audioRef.current = waveSurfer.getMediaElement();
@@ -335,6 +357,9 @@ export function AudioProvenanceVis({
           waveSurfer.seekTo(0);
           waveSurfer.on('redrawcomplete', () => setWaveSurferWidth(waveSurfer.getWidth()));
         } catch (error: unknown) {
+          if (loadGeneration !== analysisLoadGeneration.current) {
+            return;
+          }
           setAnalysisHasAudio(false);
           setWaveSurferLoading(false);
           audioRef.current = null;
diff --git a/src/components/interface/AnalysisFooter.tsx b/src/components/interface/AnalysisFooter.tsx
index 5c499f9c6c..a3cb4f302c 100644
--- a/src/components/interface/AnalysisFooter.tsx
+++ b/src/components/interface/AnalysisFooter.tsx
@@ -1,4 +1,4 @@
-import { useParams } from 'react-router';
+import { useParams, useSearchParams } from 'react-router';
 
 import { useCallback } from 'react';
 import { useAsync } from '../../store/hooks/useAsync';
@@ -22,6 +22,8 @@ export function AnalysisFooter({ setHasAudio }: {setHasAudio: (b: boolean) => vo
   const { value: allParticipants } = useAsync(getAllParticipantsNames, [storageEngine]);
 
   const identifier = useCurrentIdentifier();
+  const [searchParams] = useSearchParams();
+  const participantId = searchParams.get('participantId') || '';
 
   const storeDispatch = useStoreDispatch();
 
@@ -35,6 +37,6 @@ export function AnalysisFooter({ setHasAudio }: {setHasAudio: (b: boolean) => vo
   const saveProvenance = useCallback((prov: any) => storeDispatch(saveAnalysisState(prov)), [storeDispatch, saveAnalysisState]);
 
   return (
-    <ThinkAloudFooter storageEngine={storageEngine} setHasAudio={setHasAudio} studyId={studyId || ''} currentTrial={identifier} isReplay visibleParticipants={allParticipants || []} rawTranscript={null} currentShownTranscription={null} width={3000} onTimeUpdate={() => {}} saveProvenance={saveProvenance} />
+    <ThinkAloudFooter key={`${participantId}-${identifier}`} storageEngine={storageEngine} setHasAudio={setHasAudio} studyId={studyId || ''} currentTrial={identifier} isReplay visibleParticipants={allParticipants || []} rawTranscript={null} currentShownTranscription={null} width={3000} onTimeUpdate={() => {}} saveProvenance={saveProvenance} />
   );
 }
diff --git a/src/components/interface/AppHeader.tsx b/src/components/interface/AppHeader.tsx
index c65c5aa952..7e515fe7d9 100644
--- a/src/components/interface/AppHeader.tsx
+++ b/src/components/interface/AppHeader.tsx
@@ -111,6 +111,7 @@ export function AppHeader({
   const {
     isScreenRecording,
     isAudioRecording,
+    isWebcamRecording,
     setIsMuted,
     isMuted,
     clickToRecord,
@@ -135,13 +136,21 @@ export function AppHeader({
   const showAudioStatus = currentComponentHasAudioRecording
     || isAudioRecording
     || (isScreenRecordingPermission && audioStatus !== 'idle');
-  const showRecordingStatus = showAudioStatus || isScreenRecording || !!screenRecordingError;
+  const showRecordingStatus = showAudioStatus || isScreenRecording || isWebcamRecording || !!screenRecordingError;
   const isAudioActivelyRecording = audioStatus === 'recording' && !isMuted;
   let recordingLabel = '';
-  if (isScreenRecording && isAudioActivelyRecording) {
+  if (isScreenRecording && isWebcamRecording && isAudioActivelyRecording) {
+    recordingLabel = 'Recording screen, webcam, and audio';
+  } else if (isScreenRecording && isWebcamRecording) {
+    recordingLabel = 'Recording screen and webcam';
+  } else if (isScreenRecording && isAudioActivelyRecording) {
     recordingLabel = 'Recording screen and audio';
   } else if (isScreenRecording) {
     recordingLabel = 'Recording screen';
+  } else if (isWebcamRecording && isAudioActivelyRecording) {
+    recordingLabel = 'Recording webcam and audio';
+  } else if (isWebcamRecording) {
+    recordingLabel = 'Recording webcam';
   } else if (isAudioActivelyRecording) {
     recordingLabel = 'Recording audio';
   }
@@ -259,7 +268,20 @@ export function AppHeader({
                   </Tooltip>
                 ) : (
                   <Tooltip label={showMutedWarning ? 'You are still muted. Press and hold to unmute.' : 'Press and hold to unmute.'} opened={showMutedWarning || undefined}>
-                    <ActionIcon className={showMutedWarning ? classes.micBlink : undefined} color="blue" variant="light" size="md" aria-label="Click and hold to unmute microphone" onMouseDown={() => setIsMuted(false)} onMouseUp={() => setIsMuted(true)} onTouchStart={() => setIsMuted(false)} onTouchEnd={() => setIsMuted(true)}>
+                    <ActionIcon
+                      className={showMutedWarning ? classes.micBlink : undefined}
+                      color="blue"
+                      variant="light"
+                      size="md"
+                      aria-label="Click and hold to unmute microphone"
+                      onPointerDown={(event) => {
+                        event.currentTarget.setPointerCapture(event.pointerId);
+                        setIsMuted(false);
+                      }}
+                      onPointerUp={() => setIsMuted(true)}
+                      onPointerCancel={() => setIsMuted(true)}
+                      onLostPointerCapture={() => setIsMuted(true)}
+                    >
                       {isMuted ? <IconMicrophoneOff style={{ width: '70%', height: '70%' }} stroke={1.5} /> : <IconMicrophone style={{ width: '70%', height: '70%' }} stroke={1.5} />}
                     </ActionIcon>
                   </Tooltip>
diff --git a/src/components/interface/ScreenRecordingRejection.tsx b/src/components/interface/ScreenRecordingRejection.tsx
index 8ee390ffeb..8acde08f6f 100644
--- a/src/components/interface/ScreenRecordingRejection.tsx
+++ b/src/components/interface/ScreenRecordingRejection.tsx
@@ -8,10 +8,10 @@ export function ScreenRecordingRejection() {
     <Modal opened onClose={() => {}} fullScreen withCloseButton={false}>
       <Stack align="center" justify="center">
         <IconAlertTriangle size={64} color="orange" />
-        <Title order={3}> Screen Recording Stopped </Title>
+        <Title order={3}> Recording Stopped </Title>
         <Text size="md" ta="center">
           <>
-            Thank you for participating in this study. Screen recording was stopped and you will not be able to continue.
+            Thank you for participating in this study. Recording was stopped and you will not be able to continue.
             <br />
             You may now close this page.
           </>
diff --git a/src/components/interface/tests/AnalysisFooter.spec.tsx b/src/components/interface/tests/AnalysisFooter.spec.tsx
index 1b743a3ebf..2cf99be15c 100644
--- a/src/components/interface/tests/AnalysisFooter.spec.tsx
+++ b/src/components/interface/tests/AnalysisFooter.spec.tsx
@@ -32,6 +32,7 @@ vi.mock('../../../store/store', () => ({
 
 vi.mock('react-router', () => ({
   useParams: () => ({ studyId: 'test-study' }),
+  useSearchParams: () => [new URLSearchParams(), vi.fn()],
 }));
 
 vi.mock('../../../analysis/individualStudy/thinkAloud/ThinkAloudFooter', () => ({
diff --git a/src/components/interface/tests/AppHeader.spec.tsx b/src/components/interface/tests/AppHeader.spec.tsx
index cdfde63faf..9dcf2d47ec 100644
--- a/src/components/interface/tests/AppHeader.spec.tsx
+++ b/src/components/interface/tests/AppHeader.spec.tsx
@@ -17,6 +17,7 @@ let mockIsAnalysis = false;
 
 let mockedRecordingContext = {
   isScreenRecording: false,
+  isWebcamRecording: false,
   isAudioRecording: false,
   setIsMuted: vi.fn(),
   isMuted: false,
@@ -212,6 +213,7 @@ describe('AppHeader', () => {
     mockedCurrentComponent = 'componentA';
     mockedRecordingContext = {
       isScreenRecording: false,
+      isWebcamRecording: false,
       isAudioRecording: false,
       setIsMuted: vi.fn(),
       isMuted: false,
diff --git a/src/components/interface/tests/ScreenRecordingRejection.spec.tsx b/src/components/interface/tests/ScreenRecordingRejection.spec.tsx
index f3931c213f..7d7d5e50a9 100644
--- a/src/components/interface/tests/ScreenRecordingRejection.spec.tsx
+++ b/src/components/interface/tests/ScreenRecordingRejection.spec.tsx
@@ -19,12 +19,12 @@ vi.mock('@tabler/icons-react', () => ({
 describe('ScreenRecordingRejection', () => {
   test('renders the stopped title', () => {
     const html = renderToStaticMarkup(<ScreenRecordingRejection />);
-    expect(html).toContain('Screen Recording Stopped');
+    expect(html).toContain('Recording Stopped');
   });
 
   test('renders the explanation text', () => {
     const html = renderToStaticMarkup(<ScreenRecordingRejection />);
-    expect(html).toContain('Screen recording was stopped');
+    expect(html).toContain('Recording was stopped');
   });
 
   test('renders the close page instruction', () => {
diff --git a/src/components/screenRecording/ScreenRecordingReplay.tsx b/src/components/screenRecording/ScreenRecordingReplay.tsx
index a0ef743243..d3f7b5abd8 100644
--- a/src/components/screenRecording/ScreenRecordingReplay.tsx
+++ b/src/components/screenRecording/ScreenRecordingReplay.tsx
@@ -49,6 +49,28 @@ export function ScreenRecordingReplay() {
 
   useEffect(
     () => {
+      let cancelled = false;
+      let loadedUrls: string[] = [];
+
+      const releaseUrl = (url: string | null) => {
+        if (url?.startsWith('blob:')) {
+          URL.revokeObjectURL(url);
+        }
+      };
+      const clearVideoSource = (video: HTMLVideoElement | null) => {
+        video?.removeAttribute('src');
+      };
+      const screenVideo = screenVideoRef.current;
+      const webcamVideo = webcamVideoRef.current;
+      clearVideoSource(screenVideo);
+      clearVideoSource(webcamVideo);
+      updateReplayRef();
+      setHasScreenVideo(false);
+      setHasWebcamVideo(false);
+      storeDispatch(setAnalysisHasScreenRecording(false));
+      storeDispatch(setAnalysisHasWebcamRecording(false));
+      storeDispatch(setAnalysisCanPlayScreenRecording(false));
+
       async function getVideoURLs() {
         if (isAnalysis && identifier && storageEngine) {
           try {
@@ -68,6 +90,13 @@ export function ScreenRecordingReplay() {
               safeGetRecording(() => storageEngine.getWebcamRecording(identifier, participantId)),
             ]);
 
+            if (cancelled) {
+              releaseUrl(screenUrl);
+              releaseUrl(webcamUrl);
+              return;
+            }
+            loadedUrls = [screenUrl, webcamUrl].filter((url): url is string => !!url);
+
             const hasScreenRecording = !!screenUrl;
             const hasWebcamRecording = !!webcamUrl;
             const hasVideoRecording = hasScreenRecording || hasWebcamRecording;
@@ -80,16 +109,17 @@ export function ScreenRecordingReplay() {
 
             if (screenVideoRef.current) {
               screenVideoRef.current.preload = 'metadata';
-              screenVideoRef.current.src = screenUrl || '';
+              if (screenUrl) screenVideoRef.current.src = screenUrl;
             }
 
             if (webcamVideoRef.current) {
               webcamVideoRef.current.preload = 'metadata';
-              webcamVideoRef.current.src = webcamUrl || '';
+              if (webcamUrl) webcamVideoRef.current.src = webcamUrl;
             }
 
             updateReplayRef();
           } catch {
+            if (cancelled) return;
             setHasScreenVideo(false);
             setHasWebcamVideo(false);
             storeDispatch(setAnalysisHasScreenRecording(false));
@@ -106,6 +136,15 @@ export function ScreenRecordingReplay() {
       }
 
       getVideoURLs();
+
+      return () => {
+        cancelled = true;
+        loadedUrls.forEach(releaseUrl);
+        loadedUrls = [];
+        clearVideoSource(screenVideo);
+        clearVideoSource(webcamVideo);
+        updateReplayRef();
+      };
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
@@ -117,6 +156,7 @@ export function ScreenRecordingReplay() {
       setAnalysisHasScreenRecording,
       setAnalysisHasWebcamRecording,
       setAnalysisCanPlayScreenRecording,
+      updateReplayRef,
     ],
   );
 
diff --git a/src/components/tests/StepRenderer.spec.tsx b/src/components/tests/StepRenderer.spec.tsx
index 5cdd712e5d..f718a94494 100644
--- a/src/components/tests/StepRenderer.spec.tsx
+++ b/src/components/tests/StepRenderer.spec.tsx
@@ -220,6 +220,7 @@ vi.mock('../../utils/notifications', () => ({
 
 vi.mock('react-router', () => ({
   Outlet: () => <div data-testid="outlet" />,
+  useSearchParams: () => [new URLSearchParams(), vi.fn()],
 }));
 
 vi.mock('@mantine/core', () => ({
diff --git a/src/public/libraries/screen-recording/assets/ScreenRecording.tsx b/src/public/libraries/screen-recording/assets/ScreenRecording.tsx
index cd5b8b84f1..59e9bb5d91 100644
--- a/src/public/libraries/screen-recording/assets/ScreenRecording.tsx
+++ b/src/public/libraries/screen-recording/assets/ScreenRecording.tsx
@@ -29,9 +29,10 @@ function ScreenRecordingPermission({ setAnswer }: StimulusParams<undefined>) {
   const setupComplete = useMemo(
     () => screenCapturing
       && (!studyHasWebcamRecording || webcamCapturing)
-      && (!studyHasAudioRecording || audioCapturingSuccess),
+      && (!studyHasAudioRecording || (audioCapturing && audioCapturingSuccess)),
     [
       audioCapturingSuccess,
+      audioCapturing,
       screenCapturing,
       studyHasAudioRecording,
       studyHasWebcamRecording,
@@ -57,6 +58,12 @@ function ScreenRecordingPermission({ setAnswer }: StimulusParams<undefined>) {
     });
   }, [dataCollectionEnabled, screenCapturing, setAnswer, setupComplete]);
 
+  useEffect(() => {
+    if (!audioCapturing) {
+      setAudioCapturingSuccess(false);
+    }
+  }, [audioCapturing]);
+
   useEffect(() => {
     if (!audioCapturing || !studyHasAudioRecording || !audioMediaStream.current) {
       return undefined;
diff --git a/src/public/libraries/webcam-recording/assets/WebcamRecording.tsx b/src/public/libraries/webcam-recording/assets/WebcamRecording.tsx
index b1fb2cdf3a..4861712464 100644
--- a/src/public/libraries/webcam-recording/assets/WebcamRecording.tsx
+++ b/src/public/libraries/webcam-recording/assets/WebcamRecording.tsx
@@ -22,10 +22,16 @@ function WebcamRecordingPermission({ setAnswer }: StimulusParams<undefined>) {
   const [audioCapturingSuccess, setAudioCapturingSuccess] = useState(false);
 
   const setupComplete = useMemo(
-    () => isWebcamCapturing && (!studyHasAudioRecording || audioCapturingSuccess),
-    [audioCapturingSuccess, isWebcamCapturing, studyHasAudioRecording],
+    () => isWebcamCapturing && (!studyHasAudioRecording || (isAudioCapturing && audioCapturingSuccess)),
+    [audioCapturingSuccess, isAudioCapturing, isWebcamCapturing, studyHasAudioRecording],
   );
 
+  useEffect(() => {
+    if (!isAudioCapturing) {
+      setAudioCapturingSuccess(false);
+    }
+  }, [isAudioCapturing]);
+
   useEffect(() => {
     setAnswer({
       status: setupComplete,
diff --git a/src/storage/engines/types.ts b/src/storage/engines/types.ts
index 713adf4f28..d675a63127 100644
--- a/src/storage/engines/types.ts
+++ b/src/storage/engines/types.ts
@@ -1563,15 +1563,24 @@ export abstract class StorageEngine {
       return null;
     }
 
-    const asset = new Promise<string>((resolve) => {
+    const asset = new Promise<string>((resolve, reject) => {
       const xhr = new XMLHttpRequest();
       xhr.responseType = 'blob';
       xhr.onload = () => {
         const blob = xhr.response;
-
-        const _url = URL.createObjectURL(blob);
-
-        resolve(_url);
+        try {
+          resolve(URL.createObjectURL(blob));
+        } finally {
+          if (url.startsWith('blob:')) {
+            URL.revokeObjectURL(url);
+          }
+        }
+      };
+      xhr.onerror = () => {
+        if (url.startsWith('blob:')) {
+          URL.revokeObjectURL(url);
+        }
+        reject(new Error(`Failed to load asset: ${url}`));
       };
       xhr.open('GET', url);
       xhr.send();
diff --git a/src/storage/tests/highLevel.spec.ts b/src/storage/tests/highLevel.spec.ts
index 7020f9b0bd..3b66de2925 100644
--- a/src/storage/tests/highLevel.spec.ts
+++ b/src/storage/tests/highLevel.spec.ts
@@ -1415,6 +1415,14 @@ describe.each([
     expect(finalizeResult.status).toBe('complete');
   });
 
+  test('saveWebcamRecording persists a webcam asset for the current participant', async () => {
+    await storageEngine.initializeParticipantSession({}, configSimple, participantMetadata);
+
+    await expect(
+      storageEngine.saveWebcamRecording(new Blob(['webcam'], { type: 'video/webm' }), 'intro_0'),
+    ).resolves.toBeUndefined();
+  });
+
   // getAudio and saveAudio untestable due to browser-specific implementation
 
   test('getSequenceArray returns the sequence array', async () => {
diff --git a/src/store/hooks/tests/useRecording.spec.ts b/src/store/hooks/tests/useRecording.spec.ts
index 8abeaa655a..b185088a1a 100644
--- a/src/store/hooks/tests/useRecording.spec.ts
+++ b/src/store/hooks/tests/useRecording.spec.ts
@@ -26,6 +26,7 @@ let mockCurrentComponent = 'intro';
 let mockStorageEngine: Record<string, ReturnType<typeof vi.fn>> | null = null;
 let mockStoredAnswer: { endTime: number } | null = null;
 let mockModes = { dataCollectionEnabled: true, developmentModeEnabled: false, dataSharingEnabled: false };
+const mockRecorderStartAudioStates: boolean[][] = [];
 
 // ── media mocks ────────────────────────────────────────────────────────────────
 
@@ -38,7 +39,11 @@ const mockTrackFactory = () => ({
 });
 
 class MockMediaStream {
-  _tracks = [mockTrackFactory()];
+  _tracks: ReturnType<typeof mockTrackFactory>[];
+
+  constructor(tracks: ReturnType<typeof mockTrackFactory>[] = [mockTrackFactory()]) {
+    this._tracks = tracks;
+  }
 
   getTracks = vi.fn(() => this._tracks);
 
@@ -63,6 +68,7 @@ class MockMediaRecorder {
   constructor(s: MockMediaStream) { this.stream = s; }
 
   start = vi.fn(() => {
+    mockRecorderStartAudioStates.push(this.stream.getAudioTracks().map((track) => track.enabled));
     this.state = 'recording';
     this._listeners.start?.({});
   });
@@ -155,6 +161,7 @@ beforeEach(() => {
   mockStorageEngine = null;
   mockStoredAnswer = null;
   mockModes = { dataCollectionEnabled: true, developmentModeEnabled: false, dataSharingEnabled: false };
+  mockRecorderStartAudioStates.length = 0;
 
   vi.stubGlobal('MediaStream', MockMediaStream);
   vi.stubGlobal('MediaRecorder', MockMediaRecorder);
@@ -309,6 +316,131 @@ describe('useRecording startScreenCapture', () => {
     expect(result.current.isScreenCapturing).toBe(false);
     expect(navigator.mediaDevices.getDisplayMedia).not.toHaveBeenCalled();
   });
+
+  test('stops an already-granted screen stream when webcam permission is denied', async () => {
+    mockRecordingConfig = {
+      ...mockRecordingConfig,
+      studyHasScreenRecording: true,
+      studyHasWebcamRecording: true,
+    };
+    const screenStream = new MockMediaStream();
+    vi.mocked(navigator.mediaDevices.getDisplayMedia).mockResolvedValue(screenStream as unknown as MediaStream);
+    vi.mocked(navigator.mediaDevices.getUserMedia).mockRejectedValue(new Error('denied'));
+    const { result } = renderHook(() => useRecording());
+
+    act(() => { result.current.startScreenCapture(); });
+    await waitFor(() => expect(result.current.screenRecordingError).toBe('Recording permission denied'));
+    expect(screenStream.getTracks()[0].stop).toHaveBeenCalled();
+  });
+
+  test('does not start overlapping capture requests', async () => {
+    mockRecordingConfig = { ...mockRecordingConfig, studyHasScreenRecording: true };
+    let resolveCapture: ((stream: MediaStream) => void) | undefined;
+    vi.mocked(navigator.mediaDevices.getDisplayMedia).mockImplementation(() => new Promise<MediaStream>((resolve) => {
+      resolveCapture = resolve;
+    }));
+    const { result } = renderHook(() => useRecording());
+
+    act(() => {
+      result.current.startScreenCapture();
+      result.current.startScreenCapture();
+    });
+    expect(navigator.mediaDevices.getDisplayMedia).toHaveBeenCalledOnce();
+    await act(async () => { resolveCapture?.(new MockMediaStream() as unknown as MediaStream); });
+  });
+
+  test('cleans up persistent capture on unmount', async () => {
+    mockRecordingConfig = { ...mockRecordingConfig, studyHasScreenRecording: true };
+    const screenStream = new MockMediaStream();
+    vi.mocked(navigator.mediaDevices.getDisplayMedia).mockResolvedValue(screenStream as unknown as MediaStream);
+    const { result, unmount } = renderHook(() => useRecording());
+    act(() => { result.current.startScreenCapture(); });
+    await waitFor(() => expect(result.current.isMediaCapturing).toBe(true));
+    unmount();
+    expect(screenStream.getTracks()[0].stop).toHaveBeenCalled();
+  });
+
+  test('initializes the persistent microphone track with the current mute state', async () => {
+    mockRecordingConfig = {
+      ...mockRecordingConfig,
+      studyHasScreenRecording: true,
+      studyHasAudioRecording: true,
+      currentComponentHasClickToRecord: true,
+    };
+    const micStream = new MockMediaStream();
+    vi.mocked(navigator.mediaDevices.getUserMedia).mockResolvedValue(micStream as unknown as MediaStream);
+    const { result } = renderHook(() => useRecording());
+    act(() => { result.current.startScreenCapture(); });
+    await waitFor(() => expect(result.current.isAudioCapturing).toBe(true));
+    expect(micStream.getAudioTracks()[0].enabled).toBe(false);
+  });
+
+  test('stops screen and webcam streams when required microphone permission is denied', async () => {
+    mockRecordingConfig = {
+      ...mockRecordingConfig,
+      studyHasScreenRecording: true,
+      studyHasWebcamRecording: true,
+      studyHasAudioRecording: true,
+    };
+    const screenStream = new MockMediaStream();
+    const webcamStream = new MockMediaStream();
+    vi.mocked(navigator.mediaDevices.getDisplayMedia).mockResolvedValue(screenStream as unknown as MediaStream);
+    vi.mocked(navigator.mediaDevices.getUserMedia)
+      .mockResolvedValueOnce(webcamStream as unknown as MediaStream)
+      .mockRejectedValueOnce(new Error('denied'));
+    const { result } = renderHook(() => useRecording());
+
+    act(() => { result.current.startScreenCapture(); });
+    await waitFor(() => expect(result.current.audioRecordingError).toBe('Microphone permission denied'));
+    expect(result.current.isMediaCapturing).toBe(false);
+    expect(screenStream.getTracks()[0].stop).toHaveBeenCalled();
+    expect(webcamStream.getTracks()[0].stop).toHaveBeenCalled();
+  });
+
+  test('starts a click-to-record trial muted even if the prior component was not muted', async () => {
+    mockRecordingConfig = {
+      ...mockRecordingConfig,
+      studyHasScreenRecording: true,
+      studyHasAudioRecording: true,
+      currentComponentHasScreenRecording: true,
+      currentComponentHasAudioRecording: true,
+    };
+    const micStream = new MockMediaStream();
+    vi.mocked(navigator.mediaDevices.getUserMedia).mockResolvedValue(micStream as unknown as MediaStream);
+    mockStorageEngine = {
+      saveScreenRecording: vi.fn(async () => {}),
+      saveAudioRecording: vi.fn(async () => {}),
+    };
+    vi.stubGlobal('AudioContext', class {
+      createAnalyser() {
+        return {
+          fftSize: 0,
+          smoothingTimeConstant: 0,
+          getFloatTimeDomainData: vi.fn(),
+        };
+      }
+
+      createMediaStreamSource() {
+        return { connect: vi.fn() };
+      }
+
+      close = vi.fn(async () => {});
+    });
+    const { result, rerender } = renderHook(() => useRecording());
+    act(() => { result.current.startScreenCapture(); });
+    await waitFor(() => expect(result.current.isMediaCapturing).toBe(true));
+
+    mockRecordingConfig = {
+      ...mockRecordingConfig,
+      currentComponentHasClickToRecord: true,
+    };
+    act(() => { rerender(); });
+    await waitFor(() => expect(result.current.isMuted).toBe(true));
+    act(() => { result.current.startScreenRecording('trial_0'); });
+
+    expect(micStream.getAudioTracks()[0].enabled).toBe(false);
+    expect(mockRecorderStartAudioStates.some((states) => states.includes(false))).toBe(true);
+  });
 });
 
 // ── startScreenRecording tests ─────────────────────────────────────────────────
diff --git a/src/store/hooks/tests/useReplay.spec.tsx b/src/store/hooks/tests/useReplay.spec.tsx
index 1f3e69a938..43ceac9408 100644
--- a/src/store/hooks/tests/useReplay.spec.tsx
+++ b/src/store/hooks/tests/useReplay.spec.tsx
@@ -300,6 +300,66 @@ describe('useReplay — handlePlay/Seeked/Pause via video element events', () =>
     expect(webcam.muted).toBe(true);
   });
 
+  test('does not select an empty screen source over an available webcam source', () => {
+    const { result } = renderHook(() => useReplay());
+    const screen = document.createElement('video');
+    const webcam = makeVideoWithSrc();
+    screen.setAttribute('src', '');
+
+    act(() => {
+      result.current.videoRef.current = screen;
+      result.current.webcamVideoRef.current = webcam;
+      result.current.updateReplayRef();
+    });
+
+    expect(result.current.replayRef.current).toBe(webcam);
+  });
+
+  test('uses audio as the authoritative source when replaying webcam and audio', () => {
+    const { result } = renderHook(() => useReplay());
+    const webcam = makeVideoWithSrc();
+    const audio = document.createElement('audio');
+    Object.defineProperty(audio, 'src', { value: 'fake.mp3', writable: true, configurable: true });
+
+    act(() => {
+      result.current.webcamVideoRef.current = webcam;
+      result.current.audioRef.current = audio;
+      result.current.updateReplayRef();
+    });
+
+    expect(result.current.replayRef.current).toBe(audio);
+  });
+
+  test('stops playback when a newly available source replaces the master', () => {
+    const { result } = renderHook(() => useReplay());
+    const screen = makeVideoWithSrc();
+    screen.play = vi.fn(async () => {});
+    screen.pause = vi.fn();
+    const webcam = makeVideoWithSrc();
+    webcam.pause = vi.fn();
+    const audio = document.createElement('audio');
+    Object.defineProperty(audio, 'src', { value: 'fake.mp3', writable: true, configurable: true });
+
+    act(() => {
+      result.current.videoRef.current = screen;
+      result.current.webcamVideoRef.current = webcam;
+      result.current.updateReplayRef();
+      result.current.setIsPlaying(true);
+    });
+    expect(result.current.isPlaying).toBe(true);
+
+    act(() => {
+      screen.removeAttribute('src');
+      Object.defineProperty(screen, 'src', { value: '', writable: true, configurable: true });
+      result.current.audioRef.current = audio;
+      result.current.updateReplayRef();
+    });
+
+    expect(result.current.isPlaying).toBe(false);
+    expect(screen.pause).toHaveBeenCalled();
+    expect(webcam.pause).toHaveBeenCalled();
+  });
+
   test('screen playback starts and seeks the webcam recording', () => {
     const { result } = renderHook(() => useReplay());
     const screenVideo = makeVideoWithSrc();
diff --git a/src/store/hooks/useRecording.ts b/src/store/hooks/useRecording.ts
index 3592472cf3..3039225ee5 100644
--- a/src/store/hooks/useRecording.ts
+++ b/src/store/hooks/useRecording.ts
@@ -1,5 +1,5 @@
 import {
-  createContext, useCallback, useContext, useEffect, useRef, useState,
+  createContext, useCallback, useContext, useEffect, useLayoutEffect, useRef, useState,
 } from 'react';
 import { useStudyConfig } from './useStudyConfig';
 import { useCurrentComponent, useCurrentIdentifier } from '../../routes/utils';
@@ -61,8 +61,6 @@ export function useRecording() {
   const [analysisStreamReady, setAnalysisStreamReady] = useState(false);
   const [showMutedWarning, setShowMutedWarning] = useState(false);
 
-  // currentMediaStream and recorder can be just screen, just audio, or screen and audio combined.
-  const currentMediaStream = useRef<MediaStream>(null);
   const currentMediaRecorder = useRef<MediaRecorder | null>(null);
   const audioMediaStream = useRef<MediaStream | null>(null);
   const audioMediaRecorder = useRef<MediaRecorder | null>(null); // recorder for audio. Necessary to save audio file to get transcription.
@@ -70,6 +68,9 @@ export function useRecording() {
   const webcamMediaStream = useRef<MediaStream | null>(null);
   const webcamMediaRecorder = useRef<MediaRecorder | null>(null);
   const isStoppingCapture = useRef(false);
+  const captureAttempt = useRef(0);
+  const isStartingCapture = useRef(false);
+  const isMounted = useRef(true);
 
   const currentTrialName = useRef<string | null>(null);
   const identifier = useCurrentIdentifier();
@@ -93,9 +94,9 @@ export function useRecording() {
     currentComponentHasClickToRecord,
   } = useRecordingConfig();
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     setIsMuted(currentComponentHasClickToRecord);
-  }, [currentComponentHasClickToRecord]);
+  }, [currentComponentHasClickToRecord, identifier]);
 
   // Screen capture starts once and stops at the end of the study.
   // At the beginning of each stimulus, recording starts by calling `startScreenRecording`.
@@ -187,12 +188,17 @@ export function useRecording() {
       return;
     }
 
+    if (wantsAudio && audioMediaStream.current) {
+      audioMediaStream.current.getAudioTracks().forEach((track) => {
+        track.enabled = !currentComponentHasClickToRecord;
+      });
+    }
+
     if (wantsScreen && screenMediaStream.current) {
       const screenStream = new MediaStream([
         ...screenMediaStream.current.getVideoTracks(),
         ...(wantsAudio ? audioMediaStream.current?.getAudioTracks() ?? [] : []),
       ]);
-      currentMediaStream.current = screenStream;
       const recorder = new MediaRecorder(screenStream);
       currentMediaRecorder.current = recorder;
       attachSaveHandler(
@@ -240,6 +246,7 @@ export function useRecording() {
   }, [
     attachSaveHandler,
     currentComponentHasAudioRecording,
+    currentComponentHasClickToRecord,
     currentComponentHasScreenRecording,
     currentComponentHasWebcamRecording,
     dataCollectionEnabled,
@@ -307,8 +314,6 @@ export function useRecording() {
       audio: true,
     }).then((s) => {
       audioMediaStream.current = s;
-      currentMediaStream.current = s;
-
       const analysisTrack = s.getAudioTracks()[0]?.clone();
       if (analysisTrack) {
         analysisAudioStream.current = new MediaStream([analysisTrack]);
@@ -316,7 +321,7 @@ export function useRecording() {
       }
 
       s.getAudioTracks().forEach((track) => {
-        track.enabled = !isMuted;
+        track.enabled = !currentComponentHasClickToRecord;
       });
 
       const recorder = new MediaRecorder(s);
@@ -350,7 +355,7 @@ export function useRecording() {
       setAudioRecordingError('Microphone permission denied');
       setIsAudioRecording(false);
     });
-  }, [dataCollectionEnabled, storageEngine, isMuted]);
+  }, [currentComponentHasClickToRecord, dataCollectionEnabled, storageEngine]);
 
   // For study with just audio recording
   useEffect(() => {
@@ -415,13 +420,32 @@ export function useRecording() {
       return;
     }
 
+    if (isStartingCapture.current) {
+      return;
+    }
+
+    isStartingCapture.current = true;
+    const attempt = captureAttempt.current + 1;
+    captureAttempt.current = attempt;
+    let screenStream: MediaStream | null = null;
+    let webcamStream: MediaStream | null = null;
+    let micStream: MediaStream | null = null;
+
+    const isCurrentAttempt = () => isMounted.current && captureAttempt.current === attempt;
+    const stopAcquiredStreams = () => {
+      [micStream, webcamStream, screenStream].forEach(stopMediaTracks);
+      if (screenMediaStream.current === screenStream) screenMediaStream.current = null;
+      if (webcamMediaStream.current === webcamStream) webcamMediaStream.current = null;
+      if (audioMediaStream.current === micStream) audioMediaStream.current = null;
+    };
+
     document.title = includeScreen ? `RECORD THIS TAB: ${pageTitle}` : pageTitle;
 
     try {
       setRecordingError(null);
       setAudioRecordingError(null);
 
-      const screenStream = includeScreen ? await navigator.mediaDevices.getDisplayMedia({
+      screenStream = includeScreen ? await navigator.mediaDevices.getDisplayMedia({
         video: { displaySurface: 'browser', ...(recordScreenFPS ? { frameRate: { ideal: recordScreenFPS } } : {}) },
         audio: false,
         // @ts-expect-error: experimental (selfBrowserSurface and preferCurrentTab are not yet standardized)
@@ -429,13 +453,22 @@ export function useRecording() {
         selfBrowserSurface: 'include',
         preferCurrentTab: true,
       }) : null;
+      if (!isCurrentAttempt()) {
+        stopAcquiredStreams();
+        return;
+      }
+      screenMediaStream.current = screenStream;
 
-      const webcamStream = includeWebcam ? await navigator.mediaDevices.getUserMedia({
+      webcamStream = includeWebcam ? await navigator.mediaDevices.getUserMedia({
         video: true,
         audio: false,
       }) : null;
+      if (!isCurrentAttempt()) {
+        stopAcquiredStreams();
+        return;
+      }
+      webcamMediaStream.current = webcamStream;
 
-      let micStream: MediaStream | null = null;
       if (includeAudio) {
         try {
           micStream = await navigator.mediaDevices.getUserMedia({
@@ -445,12 +478,17 @@ export function useRecording() {
         } catch (err) {
           console.error('Error accessing microphone:', err);
           setAudioRecordingError('Microphone permission denied');
+          throw err;
         }
       }
-
-      screenMediaStream.current = screenStream;
-      webcamMediaStream.current = webcamStream;
+      if (!isCurrentAttempt()) {
+        stopAcquiredStreams();
+        return;
+      }
       audioMediaStream.current = micStream;
+      micStream?.getAudioTracks().forEach((track) => {
+        track.enabled = !currentComponentHasClickToRecord;
+      });
 
       const analysisTrack = micStream?.getAudioTracks()[0]?.clone();
       if (analysisTrack) {
@@ -489,12 +527,18 @@ export function useRecording() {
       setIsRejected(false);
     } catch (err) {
       console.error('Error accessing recording media:', err);
-      setRecordingError('Recording permission denied');
+      if (isCurrentAttempt()) {
+        setRecordingError('Recording permission denied');
+      }
+      stopAcquiredStreams();
       stopScreenCapture();
     } finally {
+      if (captureAttempt.current === attempt) {
+        isStartingCapture.current = false;
+      }
       document.title = pageTitle;
     }
-  }, [dataCollectionEnabled, pageTitle, recordAudio, recordScreenFPS, stopScreenCapture]);
+  }, [currentComponentHasClickToRecord, dataCollectionEnabled, pageTitle, recordAudio, recordScreenFPS, stopScreenCapture]);
 
   const startScreenCapture = useCallback(() => {
     startMediaCapture({
@@ -529,6 +573,12 @@ export function useRecording() {
     };
   }, [currentComponentHasAudioRecording, isMuted]);
 
+  useEffect(() => () => {
+    isMounted.current = false;
+    captureAttempt.current += 1;
+    stopScreenCapture();
+  }, [stopScreenCapture]);
+
   useEffect(() => {
     if (!shouldMonitorMutedAudio(isMuted, currentComponentHasAudioRecording) || !analysisStreamReady || !analysisAudioStream.current) return undefined;
 
diff --git a/src/store/hooks/useReplay.ts b/src/store/hooks/useReplay.ts
index ce6c6eda11..143e972aab 100644
--- a/src/store/hooks/useReplay.ts
+++ b/src/store/hooks/useReplay.ts
@@ -17,6 +17,16 @@ function mediaIncludesTime(media: HTMLMediaElement, time: number) {
   return !Number.isFinite(media.duration) || media.duration <= 0 || time < media.duration;
 }
 
+function hasMediaSource(media: HTMLMediaElement) {
+  const sourceAttribute = media.getAttribute('src');
+  if (sourceAttribute !== null) {
+    return !!sourceAttribute;
+  }
+  return !!media.src
+    && media.src !== document.baseURI
+    && media.src !== window.location.href;
+}
+
 /**
  * Hook to subscribe to video/audio/provenance timing events for replay
  */
@@ -52,7 +62,7 @@ export function useReplay() {
   ), []);
 
   const getActiveMediaElements = useCallback(() => (
-    getMediaElements().filter((media) => !!media.src)
+    getMediaElements().filter(hasMediaSource)
   ), [getMediaElements]);
 
   const getSecondaryMediaElements = useCallback(() => (
@@ -159,6 +169,9 @@ export function useReplay() {
     updateIsPlaying(true);
 
     const t = replayRef.current?.currentTime || 0;
+    getSecondaryMediaElements().forEach((media) => {
+      seekMedia(media, timerValue.current);
+    });
     emitterRef.current.emit('play', t);
 
     updateMutedState();
@@ -249,9 +262,14 @@ export function useReplay() {
       seekMedia(media, timerValue.current);
     });
 
-    replayRef.current = (videoRef.current?.src ? videoRef.current : null)
-      ?? (webcamVideoRef.current?.src ? webcamVideoRef.current : null)
-      ?? (audioRef.current?.src ? audioRef.current : null);
+    replayRef.current = (videoRef.current && hasMediaSource(videoRef.current) ? videoRef.current : null)
+      ?? (audioRef.current && hasMediaSource(audioRef.current) ? audioRef.current : null)
+      ?? (webcamVideoRef.current && hasMediaSource(webcamVideoRef.current) ? webcamVideoRef.current : null);
+
+    if (previousReplay !== replayRef.current && internalIsPlaying.current) {
+      getMediaElements().forEach((media) => media.pause());
+      updateIsPlaying(false);
+    }
 
     if (replayRef.current) {
       replayRef.current.addEventListener('play', handlePlay);
@@ -261,7 +279,7 @@ export function useReplay() {
     }
     updateMutedState();
     forceEmitTimeUpdate();
-  }, [forceEmitTimeUpdate, getMediaElements, handleEnded, handlePause, handlePlay, handleSeeked, updateMutedState]);
+  }, [forceEmitTimeUpdate, getMediaElements, handleEnded, handlePause, handlePlay, handleSeeked, updateIsPlaying, updateMutedState]);
 
   // this should be the only way to start video/audio
   const setIsPlaying = useCallback((playing: boolean, isRemoteTriggered = false) => {
@@ -286,9 +304,9 @@ export function useReplay() {
     ) {
       requestReplayPlayback(replayRef.current);
     } else {
-      replayRef.current?.pause();
+      getActiveMediaElements().forEach((media) => media.pause());
     }
-  }, [requestReplayPlayback, setSeekTime, updateIsPlaying]);
+  }, [getActiveMediaElements, requestReplayPlayback, setSeekTime, updateIsPlaying]);
 
   useEffect(() => {
     isMountedRef.current = true;
@@ -339,6 +357,12 @@ export function useReplay() {
         timerValue.current = internalDuration.current > 0
           ? Math.min(nextTime, internalDuration.current)
           : nextTime;
+        getSecondaryMediaElements().forEach((secondary) => {
+          if (!Number.isFinite(secondary.currentTime)
+            || Math.abs(secondary.currentTime - timerValue.current) > 0.15) {
+            seekMedia(secondary, timerValue.current);
+          }
+        });
         emitterRef.current.emit('timeupdate', timerValue.current);
 
         if (internalDuration.current > 0 && timerValue.current >= internalDuration.current) {
@@ -362,7 +386,7 @@ export function useReplay() {
         syntheticReplayTimer.current = null;
       }
     };
-  }, [isPlaying, setIsPlaying]);
+  }, [getSecondaryMediaElements, isPlaying, setIsPlaying]);
 
   useEffect(() => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/src/utils/handleDownloadFiles.ts b/src/utils/handleDownloadFiles.ts
index ec874c418a..1dd008cad1 100644
--- a/src/utils/handleDownloadFiles.ts
+++ b/src/utils/handleDownloadFiles.ts
@@ -46,6 +46,12 @@ export async function handleTaskAudio({
 
 type RecordingType = 'screenRecording' | 'webcamRecording';
 
+function recordingArchiveName(includeScreen: boolean, includeWebcam: boolean) {
+  if (includeScreen && !includeWebcam) return 'screenRecording';
+  if (includeWebcam && !includeScreen) return 'webcamRecording';
+  return 'recordings';
+}
+
 async function getTaskRecordingUrl({
   storageEngine,
   participantId,
@@ -269,14 +275,17 @@ async function downloadParticipantsRecordings({
         identifier,
         recordingType,
       });
-      await loadAssetToZip(recordingsZip, `${namePrefix}_${participantId}_${identifier}_${recordingType}.webm`, recordingUrl);
+      const memberName = includeScreen && !includeWebcam
+        ? `${namePrefix}_${participantId}_${identifier}.webm`
+        : `${namePrefix}_${participantId}_${identifier}_${recordingType}.webm`;
+      await loadAssetToZip(recordingsZip, memberName, recordingUrl);
     } catch (error) {
       console.warn(`Failed to fetch ${recordingType} for ${identifier}:`, error);
     }
   }));
 
   if (!zip) {
-    downloadZip(recordingsZip, `${namePrefix}_${participantId}_${identifier}_recordings.zip`);
+    downloadZip(recordingsZip, `${namePrefix}_${participantId}_${identifier}_${recordingArchiveName(includeScreen, includeWebcam)}.zip`);
   }
 }
 
@@ -320,7 +329,7 @@ export async function downloadParticipantsRecordingsZip({
 
   await Promise.all(recordingPromises);
 
-  await downloadZip(zip, `${namePrefix}_recordings.zip`);
+  await downloadZip(zip, `${namePrefix}_${recordingArchiveName(includeScreen, includeWebcam)}.zip`);
 }
 
 export async function downloadParticipantsProvenanceZip({
diff --git a/src/utils/tests/handleDownloadFiles.spec.ts b/src/utils/tests/handleDownloadFiles.spec.ts
index 153449efe7..3866801f0c 100644
--- a/src/utils/tests/handleDownloadFiles.spec.ts
+++ b/src/utils/tests/handleDownloadFiles.spec.ts
@@ -1,6 +1,7 @@
 import {
   afterEach, beforeEach, describe, expect, test, vi,
 } from 'vitest';
+import JSZip from 'jszip';
 import {
   downloadConfigFile,
   downloadConfigFilesZip,
@@ -268,6 +269,34 @@ describe('downloadParticipantsRecordingsZip', () => {
     expect(clickSpy).toHaveBeenCalledOnce();
   });
 
+  test('keeps the legacy screen-only archive and member names', async () => {
+    const storageEngine = makeStorageEngine({
+      getScreenRecording: vi.fn(async () => 'https://example.com/recording.webm'),
+    });
+    const participants = [{
+      participantId: 'p1',
+      answers: {
+        trial_0: {
+          endTime: 1000, startTime: 0, componentName: 'trial', trialOrder: '0',
+        },
+      },
+    }];
+
+    const zipFile = vi.spyOn(JSZip.prototype, 'file');
+    const anchorDownloads: string[] = [];
+    clickSpy.mockImplementation(function click(this: HTMLAnchorElement) {
+      anchorDownloads.push(this.download);
+    });
+
+    await downloadParticipantsRecordingsZip({
+      storageEngine, participants, studyId: 'study', includeScreen: true, includeWebcam: false,
+    });
+
+    expect(zipFile).toHaveBeenCalledWith('study_p1_trial_0.webm', expect.any(Blob));
+    expect(anchorDownloads).toContain('study_screenRecording.zip');
+    zipFile.mockRestore();
+  });
+
   test('skips trials where endTime is 0 (not completed)', async () => {
     const storageEngine = makeStorageEngine({
       getScreenRecording: vi.fn(async () => 'https://example.com/rec.webm'),

From d79e7ed9a98114c6a43388fe3650bf21417a3d3f Mon Sep 17 00:00:00 2001
From: Jack Wilburn <jackwilburn@tutanota.com>
Date: Tue, 8 Sep 2026 19:32:16 -0600
Subject: [PATCH 03/12] Fix webcam recording review findings

---
 public/global.json                            |  5 +++
 public/libraries/screen-recording/config.json |  1 +
 public/libraries/webcam-recording/config.json |  1 +
 .../replay/AllTasksTimeline.tsx               |  3 +-
 .../individualStudy/replay/SingleTask.tsx     | 12 +++++-
 .../replay/tests/AllTasksTimeline.spec.tsx    | 24 +++++++++++-
 .../thinkAloud/ThinkAloudFooter.tsx           |  4 +-
 .../screenRecording/ScreenRecordingReplay.tsx |  1 -
 .../tests/ScreenRecordingReplay.spec.tsx      | 18 +++++++++
 src/store/hooks/tests/useRecording.spec.ts    |  6 +++
 .../hooks/tests/useRecordingConfig.spec.ts    | 26 ++++++-------
 src/store/hooks/useRecordingConfig.ts         | 33 +++++++++-------
 src/utils/handleDownloadFiles.ts              | 29 ++++++++------
 src/utils/tests/handleDownloadFiles.spec.ts   | 39 +++++++++++++++++++
 14 files changed, 155 insertions(+), 47 deletions(-)

diff --git a/public/global.json b/public/global.json
index b0f14b000d..59a5ca3875 100644
--- a/public/global.json
+++ b/public/global.json
@@ -49,6 +49,7 @@
     "library-quis",
     "library-sam",
     "library-screen-recording",
+    "library-webcam-recording",
     "library-smeq",
     "library-sus",
     "library-ueq",
@@ -223,6 +224,10 @@
       "path": "library-screen-recording/config.json",
       "test": true
     },
+    "library-webcam-recording": {
+      "path": "library-webcam-recording/config.json",
+      "test": true
+    },
     "library-smeq": {
       "path": "library-smeq/config.json",
       "test": true
diff --git a/public/libraries/screen-recording/config.json b/public/libraries/screen-recording/config.json
index b2f9c922c3..8adc0c3660 100644
--- a/public/libraries/screen-recording/config.json
+++ b/public/libraries/screen-recording/config.json
@@ -9,6 +9,7 @@
       "nextButtonLocation": "belowStimulus",
       "nextButtonText": "Continue",
       "recordScreen": true,
+      "clickToRecord": false,
       "response": [
         {
           "hidden": true,
diff --git a/public/libraries/webcam-recording/config.json b/public/libraries/webcam-recording/config.json
index 9d331cdebd..736bcb4ef7 100644
--- a/public/libraries/webcam-recording/config.json
+++ b/public/libraries/webcam-recording/config.json
@@ -9,6 +9,7 @@
       "nextButtonLocation": "belowStimulus",
       "nextButtonText": "Continue",
       "recordAudio": false,
+      "clickToRecord": false,
       "response": [{
         "hidden": true,
         "type": "reactive",
diff --git a/src/analysis/individualStudy/replay/AllTasksTimeline.tsx b/src/analysis/individualStudy/replay/AllTasksTimeline.tsx
index f9fae0fda3..49e2498261 100644
--- a/src/analysis/individualStudy/replay/AllTasksTimeline.tsx
+++ b/src/analysis/individualStudy/replay/AllTasksTimeline.tsx
@@ -217,6 +217,7 @@ export function AllTasksTimeline({
       const answerStatus = getComponentAnswerStatus(answer, correctAnswers, resolvedComponent?.response);
       const hasAudio = resolvedComponent?.recordAudio ?? studyConfig?.uiConfig?.recordAudio ?? false;
       const hasScreenRecording = resolvedComponent?.recordScreen ?? studyConfig?.uiConfig?.recordScreen ?? false;
+      const hasWebcamRecording = resolvedComponent?.recordWebcam ?? studyConfig?.uiConfig?.recordWebcam ?? false;
 
       return {
         identifier,
@@ -246,7 +247,7 @@ export function AllTasksTimeline({
             )}
           >
             <g>
-              <SingleTask incomplete={answer.startTime === 0} answerStatus={answerStatus} hasAudio={hasAudio} hasScreenRecording={hasScreenRecording} key={identifier} labelHeight={currentHeight * LABEL_GAP} height={maxHeight} identifier={identifier} xScale={scale} scaleStart={scaleStart} scaleEnd={scaleEnd} trialOrder={answer.trialOrder} participantId={participantData.participantId} studyId={studyId} condition={conditionParam} isHovered={hoveredTaskIdentifier === identifier} isDimmed={hoveredTaskIdentifier !== null && hoveredTaskIdentifier !== identifier} onHover={() => setHoveredTaskIdentifier(identifier)} onHoverEnd={() => setHoveredTaskIdentifier(null)} />
+              <SingleTask incomplete={answer.startTime === 0} answerStatus={answerStatus} hasAudio={hasAudio} hasScreenRecording={hasScreenRecording} hasWebcamRecording={hasWebcamRecording} key={identifier} labelHeight={currentHeight * LABEL_GAP} height={maxHeight} identifier={identifier} xScale={scale} scaleStart={scaleStart} scaleEnd={scaleEnd} trialOrder={answer.trialOrder} participantId={participantData.participantId} studyId={studyId} condition={conditionParam} isHovered={hoveredTaskIdentifier === identifier} isDimmed={hoveredTaskIdentifier !== null && hoveredTaskIdentifier !== identifier} onHover={() => setHoveredTaskIdentifier(identifier)} onHoverEnd={() => setHoveredTaskIdentifier(null)} />
             </g>
           </Tooltip>),
       };
diff --git a/src/analysis/individualStudy/replay/SingleTask.tsx b/src/analysis/individualStudy/replay/SingleTask.tsx
index a0e16c7180..eccc541394 100644
--- a/src/analysis/individualStudy/replay/SingleTask.tsx
+++ b/src/analysis/individualStudy/replay/SingleTask.tsx
@@ -3,7 +3,7 @@ import * as d3 from 'd3';
 
 import { useResizeObserver } from '@mantine/hooks';
 import {
-  IconCheck, IconDeviceDesktop, IconMicrophone, IconProgress, IconX,
+  IconCamera, IconCheck, IconDeviceDesktop, IconMicrophone, IconProgress, IconX,
 } from '@tabler/icons-react';
 import { useNavigateToTrial } from '../../../utils/useNavigateToTrial';
 import type { ComponentAnswerStatus } from '../../../utils/correctAnswer';
@@ -48,6 +48,7 @@ export function SingleTask({
   answerStatus,
   hasAudio,
   hasScreenRecording,
+  hasWebcamRecording,
   scaleStart,
   scaleEnd,
   incomplete,
@@ -67,6 +68,7 @@ export function SingleTask({
   answerStatus: ComponentAnswerStatus | null,
   hasAudio: boolean,
   hasScreenRecording: boolean,
+  hasWebcamRecording: boolean,
   scaleStart: number,
   scaleEnd: number,
   incomplete: boolean,
@@ -82,7 +84,7 @@ export function SingleTask({
   const [ref, { width: labelWidth }] = useResizeObserver();
 
   const navigateToTrial = useNavigateToTrial();
-  const iconCount = (incomplete || answerStatus ? 1 : 0) + (hasAudio ? 1 : 0) + (hasScreenRecording ? 1 : 0);
+  const iconCount = (incomplete || answerStatus ? 1 : 0) + (hasAudio ? 1 : 0) + (hasScreenRecording ? 1 : 0) + (hasWebcamRecording ? 1 : 0);
   const iconsWidth = iconCount * (ICON_SIZE + ICON_GAP);
   const labelOpacity = isDimmed ? 0.35 : 1;
 
@@ -165,6 +167,12 @@ export function SingleTask({
                 size="14"
               />
             )}
+            {hasWebcamRecording && (
+              <IconCamera
+                color="orange"
+                size="14"
+              />
+            )}
             {incomplete ? (
               <IconProgress
                 color="orange"
diff --git a/src/analysis/individualStudy/replay/tests/AllTasksTimeline.spec.tsx b/src/analysis/individualStudy/replay/tests/AllTasksTimeline.spec.tsx
index 8c1991dc66..7aea0401dc 100644
--- a/src/analysis/individualStudy/replay/tests/AllTasksTimeline.spec.tsx
+++ b/src/analysis/individualStudy/replay/tests/AllTasksTimeline.spec.tsx
@@ -8,7 +8,7 @@ import { StudyConfig } from '../../../../parser/types';
 import { ParticipantData } from '../../../../storage/types';
 import type { StoredAnswer } from '../../../../store/types';
 import { createMockStudyConfig } from '../../../tests/testUtils';
-import { makeStoredAnswer, makeParticipant as _makeParticipant } from '../../../../tests/utils';
+import { makeStudyConfig, makeStoredAnswer, makeParticipant as _makeParticipant } from '../../../../tests/utils';
 import { AllTasksTimeline } from '../AllTasksTimeline';
 import { SingleTask } from '../SingleTask';
 import { SingleTaskLabelLines } from '../SingleTaskLabelLines';
@@ -37,6 +37,7 @@ vi.mock('@tabler/icons-react', () => ({
     'aria-label'?: string;
     color?: string;
   }) => <span aria-label={ariaLabel} data-color={color}>icon-check</span>,
+  IconCamera: () => <span>icon-camera</span>,
   IconMicrophone: () => <span>icon-microphone</span>,
   IconProgress: () => <span>icon-progress</span>,
   IconX: () => <span>icon-x</span>,
@@ -126,6 +127,7 @@ describe('SingleTask', () => {
     answerStatus: null,
     hasAudio: false,
     hasScreenRecording: false,
+    hasWebcamRecording: false,
   };
 
   test('renders task name', () => {
@@ -166,6 +168,13 @@ describe('SingleTask', () => {
     expect(html).toContain('icon-microphone');
   });
 
+  test('shows camera icon when hasWebcamRecording', () => {
+    const html = renderToStaticMarkup(
+      <svg><SingleTask {...baseProps} hasWebcamRecording /></svg>,
+    );
+    expect(html).toContain('icon-camera');
+  });
+
   test('shows progress icon when incomplete', () => {
     const html = renderToStaticMarkup(
       <svg><SingleTask {...baseProps} incomplete /></svg>,
@@ -210,6 +219,19 @@ describe('AllTasksTimeline', () => {
     expect(html).toContain('trial1_0');
   });
 
+  test('shows the webcam icon for a webcam-recorded task', () => {
+    const html = renderToStaticMarkup(
+      <AllTasksTimeline
+        participantData={makeParticipant()}
+        width={600}
+        studyId="test-study"
+        studyConfig={makeStudyConfig({ components: { trial1: { recordWebcam: true } } })}
+        maxLength={undefined}
+      />,
+    );
+    expect(html).toContain('icon-camera');
+  });
+
   test('shows an unknown indicator and tooltip value for an answer without configured correctness', () => {
     const participant = makeParticipant({
       answers: {
diff --git a/src/analysis/individualStudy/thinkAloud/ThinkAloudFooter.tsx b/src/analysis/individualStudy/thinkAloud/ThinkAloudFooter.tsx
index a6f4787fe8..c0abaa59ca 100644
--- a/src/analysis/individualStudy/thinkAloud/ThinkAloudFooter.tsx
+++ b/src/analysis/individualStudy/thinkAloud/ThinkAloudFooter.tsx
@@ -463,7 +463,7 @@ export function ThinkAloudFooter({
   const [browserWarningDismissed, setBrowserWarningDismissed] = useState(false);
   useEffect(() => {
     setBrowserWarningDismissed(false);
-  }, [participantId, screenRecordingUrl]);
+  }, [participantId, screenRecordingUrl, webcamRecordingUrl]);
 
   return (
     <AppShell.Footer zIndex={101} withBorder={false}>
@@ -475,7 +475,7 @@ export function ThinkAloudFooter({
           <Alert variant="filled" color="red" title="Participant hasn&apos;t completed any tasks." icon={<IconInfoCircle />} />
         </div>
       )}
-      {participantMatchesSelection && screenRecordingUrl && !participantUsedSameBrowser && !browserWarningDismissed && (
+      {participantMatchesSelection && (screenRecordingUrl || webcamRecordingUrl) && !participantUsedSameBrowser && !browserWarningDismissed && (
         <div style={{
           position: 'absolute', top: -5, left: 5, transform: 'translateY(-100%)',
         }}
diff --git a/src/components/screenRecording/ScreenRecordingReplay.tsx b/src/components/screenRecording/ScreenRecordingReplay.tsx
index d3f7b5abd8..d1b8cb7b7d 100644
--- a/src/components/screenRecording/ScreenRecordingReplay.tsx
+++ b/src/components/screenRecording/ScreenRecordingReplay.tsx
@@ -69,7 +69,6 @@ export function ScreenRecordingReplay() {
       setHasWebcamVideo(false);
       storeDispatch(setAnalysisHasScreenRecording(false));
       storeDispatch(setAnalysisHasWebcamRecording(false));
-      storeDispatch(setAnalysisCanPlayScreenRecording(false));
 
       async function getVideoURLs() {
         if (isAnalysis && identifier && storageEngine) {
diff --git a/src/components/screenRecording/tests/ScreenRecordingReplay.spec.tsx b/src/components/screenRecording/tests/ScreenRecordingReplay.spec.tsx
index ab119d5fca..c24b44a7d7 100644
--- a/src/components/screenRecording/tests/ScreenRecordingReplay.spec.tsx
+++ b/src/components/screenRecording/tests/ScreenRecordingReplay.spec.tsx
@@ -75,6 +75,9 @@ describe('ScreenRecordingReplay', () => {
     mockVideoRef = { current: null };
     mockWebcamVideoRef = { current: null };
     mockDispatch.mockClear();
+    mockSetAnalysisHasScreenRecording.mockClear();
+    mockSetAnalysisHasWebcamRecording.mockClear();
+    mockSetAnalysisCanPlayScreenRecording.mockClear();
   });
 
   afterEach(() => { cleanup(); });
@@ -114,6 +117,21 @@ describe('ScreenRecordingReplay', () => {
     expect(mockDispatch).toHaveBeenCalledWith(mockSetAnalysisHasScreenRecording(true));
   });
 
+  test('does not clear the replay mount gate while recordings are loading', async () => {
+    mockIsAnalysis = true;
+    let resolveScreen!: (url: string | null) => void;
+    mockStorageEngine = {
+      getScreenRecording: vi.fn(() => new Promise<string | null>((resolve) => { resolveScreen = resolve; })),
+      getWebcamRecording: vi.fn().mockResolvedValue(null),
+    };
+    mockSearchParams = new URLSearchParams({ participantId: 'p1' });
+
+    await act(async () => { render(<ScreenRecordingReplay />); });
+    expect(mockSetAnalysisCanPlayScreenRecording).not.toHaveBeenCalled();
+
+    await act(async () => { resolveScreen(null); });
+  });
+
   // Error-path tests (missing participantId, getScreenRecording rejection) omitted
   // because the component re-throws in the catch block, producing unhandled promise
   // rejections that vitest flags as test instability.
diff --git a/src/store/hooks/tests/useRecording.spec.ts b/src/store/hooks/tests/useRecording.spec.ts
index b185088a1a..2a5728e12e 100644
--- a/src/store/hooks/tests/useRecording.spec.ts
+++ b/src/store/hooks/tests/useRecording.spec.ts
@@ -521,12 +521,17 @@ describe('useRecording startScreenRecording after startScreenCapture', () => {
       currentComponentHasScreenRecording: true,
       currentComponentHasAudioRecording: true,
       currentComponentHasWebcamRecording: true,
+      currentComponentHasClickToRecord: false,
     };
+    const micStream = new MockMediaStream();
     mockStorageEngine = {
       saveScreenRecording: vi.fn(async () => {}),
       saveAudioRecording: vi.fn(async () => {}),
       saveWebcamRecording: vi.fn(async () => {}),
     };
+    vi.mocked(navigator.mediaDevices.getUserMedia)
+      .mockResolvedValueOnce(new MockMediaStream() as unknown as MediaStream)
+      .mockResolvedValueOnce(micStream as unknown as MediaStream);
     const { result } = renderHook(() => useRecording());
 
     act(() => { result.current.startScreenCapture(); });
@@ -536,6 +541,7 @@ describe('useRecording startScreenRecording after startScreenCapture', () => {
       expect(result.current.isWebcamRecording).toBe(true);
       expect(result.current.isAudioRecording).toBe(true);
     });
+    expect(micStream.getAudioTracks()[0].enabled).toBe(true);
   });
 });
 
diff --git a/src/store/hooks/tests/useRecordingConfig.spec.ts b/src/store/hooks/tests/useRecordingConfig.spec.ts
index df5f75b680..8af26111a0 100644
--- a/src/store/hooks/tests/useRecordingConfig.spec.ts
+++ b/src/store/hooks/tests/useRecordingConfig.spec.ts
@@ -4,7 +4,6 @@ import {
 } from 'vitest';
 
 import { useStudyConfig } from '../useStudyConfig';
-import { useFlatSequence } from '../../store';
 import { useRecordingConfig } from '../useRecordingConfig';
 import { makeStudyConfig } from '../../../tests/utils';
 
@@ -17,10 +16,6 @@ vi.mock('../useStudyConfig', () => ({
   })),
 }));
 
-vi.mock('../../store', () => ({
-  useFlatSequence: vi.fn(() => []),
-}));
-
 vi.mock('../../../routes/utils', () => ({
   useCurrentComponent: vi.fn(() => 'trial1'),
 }));
@@ -45,13 +40,20 @@ describe('useRecordingConfig', () => {
     expect(result.current.studyHasScreenRecording).toBe(true);
   });
 
-  test('studyHasScreenRecording is true when a participant sequence component has recordScreen', () => {
+  test('resolves recording options inherited by a component', () => {
     vi.mocked(useStudyConfig).mockReturnValueOnce(
-      makeStudyConfig({ components: { trial1: { recordScreen: true } } }),
+      makeStudyConfig({
+        uiConfig: { clickToRecord: true },
+        baseComponents: { recorded: { recordScreen: true, recordWebcam: true } },
+        components: { trial1: { baseComponent: 'recorded', clickToRecord: false } },
+      }),
     );
-    vi.mocked(useFlatSequence).mockReturnValueOnce(['trial1']);
     const { result } = renderHook(() => useRecordingConfig());
     expect(result.current.studyHasScreenRecording).toBe(true);
+    expect(result.current.studyHasWebcamRecording).toBe(true);
+    expect(result.current.currentComponentHasScreenRecording).toBe(true);
+    expect(result.current.currentComponentHasWebcamRecording).toBe(true);
+    expect(result.current.currentComponentHasClickToRecord).toBe(false);
   });
 
   test('studyHasAudioRecording is true when uiConfig.recordAudio is set', () => {
@@ -67,13 +69,11 @@ describe('useRecordingConfig', () => {
     expect(result.current.currentComponentHasWebcamRecording).toBe(true);
   });
 
-  test('webcam recording can be enabled for one sequence component', () => {
+  test('finds recording options on components inside dynamic blocks', () => {
     vi.mocked(useStudyConfig).mockReturnValueOnce(
-      makeStudyConfig({ components: { trial1: { recordWebcam: true } } }),
+      makeStudyConfig({ components: { dynamicTrial: { recordAudio: true } } }),
     );
-    vi.mocked(useFlatSequence).mockReturnValueOnce(['trial1']);
     const { result } = renderHook(() => useRecordingConfig());
-    expect(result.current.studyHasWebcamRecording).toBe(true);
-    expect(result.current.currentComponentHasWebcamRecording).toBe(true);
+    expect(result.current.studyHasAudioRecording).toBe(true);
   });
 });
diff --git a/src/store/hooks/useRecordingConfig.ts b/src/store/hooks/useRecordingConfig.ts
index 097e1e3c65..b91b7c96c4 100644
--- a/src/store/hooks/useRecordingConfig.ts
+++ b/src/store/hooks/useRecordingConfig.ts
@@ -1,13 +1,16 @@
 import { useMemo } from 'react';
 import { useStudyConfig } from './useStudyConfig';
-import { useFlatSequence } from '../store';
 import { useCurrentComponent } from '../../routes/utils';
+import { studyComponentToIndividualComponent } from '../../utils/handleComponentInheritance';
+import { getStudyRecordings } from '../../utils/useStudyRecordings';
 
 export function useRecordingConfig() {
   const studyConfig = useStudyConfig();
-  const participantSequence = useFlatSequence();
   const currentComponent = useCurrentComponent();
   const stepConfig = studyConfig.components[currentComponent];
+  const resolvedStepConfig = stepConfig
+    ? studyComponentToIndividualComponent(stepConfig, studyConfig)
+    : undefined;
 
   const {
     recordScreen,
@@ -16,30 +19,30 @@ export function useRecordingConfig() {
     clickToRecord,
   } = studyConfig.uiConfig;
 
-  const studyHasScreenRecording = useMemo(() => (recordScreen || participantSequence.some((comp) => studyConfig.components[comp]?.recordScreen)), [participantSequence, studyConfig, recordScreen]);
-
-  const studyHasAudioRecording = useMemo(() => (recordAudio || participantSequence.some((comp) => studyConfig.components[comp]?.recordAudio)), [participantSequence, studyConfig, recordAudio]);
-
-  const studyHasWebcamRecording = useMemo(() => (recordWebcam || participantSequence.some((comp) => studyConfig.components[comp]?.recordWebcam)), [participantSequence, studyConfig, recordWebcam]);
+  const {
+    hasAudioRecording: studyHasAudioRecording,
+    hasScreenRecording: studyHasScreenRecording,
+    hasWebcamRecording: studyHasWebcamRecording,
+  } = useMemo(() => getStudyRecordings(studyConfig), [studyConfig]);
 
   const currentComponentHasScreenRecording = useMemo(
-    () => stepConfig?.recordScreen ?? !!recordScreen,
-    [recordScreen, stepConfig],
+    () => resolvedStepConfig?.recordScreen ?? !!recordScreen,
+    [recordScreen, resolvedStepConfig],
   );
 
   const currentComponentHasAudioRecording = useMemo(
-    () => stepConfig?.recordAudio ?? !!recordAudio,
-    [recordAudio, stepConfig],
+    () => resolvedStepConfig?.recordAudio ?? !!recordAudio,
+    [recordAudio, resolvedStepConfig],
   );
 
   const currentComponentHasWebcamRecording = useMemo(
-    () => stepConfig?.recordWebcam ?? !!recordWebcam,
-    [recordWebcam, stepConfig],
+    () => resolvedStepConfig?.recordWebcam ?? !!recordWebcam,
+    [recordWebcam, resolvedStepConfig],
   );
 
   const currentComponentHasClickToRecord = useMemo(
-    () => stepConfig?.clickToRecord ?? !!clickToRecord,
-    [clickToRecord, stepConfig],
+    () => resolvedStepConfig?.clickToRecord ?? !!clickToRecord,
+    [clickToRecord, resolvedStepConfig],
   );
 
   return {
diff --git a/src/utils/handleDownloadFiles.ts b/src/utils/handleDownloadFiles.ts
index 1dd008cad1..6bbf936c27 100644
--- a/src/utils/handleDownloadFiles.ts
+++ b/src/utils/handleDownloadFiles.ts
@@ -4,6 +4,9 @@ import { StudyConfig } from '../parser/types';
 import { getLegacyStoredAnswerProvenance } from '../store/provenance';
 import type { StoredAnswer } from '../store/types';
 
+type DownloadAnswer = Pick<StoredAnswer, 'endTime' | 'startTime' | 'componentName' | 'trialOrder'>
+  & Partial<Pick<StoredAnswer, 'identifier'>>;
+
 export async function handleTaskAudio({
   storageEngine,
   participantId,
@@ -214,7 +217,7 @@ export async function downloadParticipantsAudioZip({
   fileName,
 }: {
   storageEngine: StorageEngine;
-  participants: Array<{ participantId: string; answers: Record<string, { endTime: number; startTime: number; componentName: string; trialOrder: string }> }>;
+  participants: Array<{ participantId: string; answers: Record<string, DownloadAnswer> }>;
   studyId: string;
   fileName?: string | null;
 }) {
@@ -222,12 +225,13 @@ export async function downloadParticipantsAudioZip({
   const zip = new JSZip();
 
   const audioPromises = participants.flatMap((participant) => {
-    const entries = Object.values(participant.answers)
-      .filter((ans) => ans.endTime > 0)
-      .sort((a, b) => a.startTime - b.startTime);
+    const entries = Object.entries(participant.answers)
+      .map(([storedIdentifier, answer]) => ({ storedIdentifier, answer }))
+      .filter(({ answer }) => answer.endTime > 0)
+      .sort((a, b) => a.answer.startTime - b.answer.startTime);
 
-    return entries.map(async (ans) => {
-      const identifier = `${ans.componentName}_${ans.trialOrder}`;
+    return entries.map(async ({ storedIdentifier, answer }) => {
+      const identifier = answer.identifier || storedIdentifier;
 
       await downloadParticipantsAudio({
         storageEngine,
@@ -298,7 +302,7 @@ export async function downloadParticipantsRecordingsZip({
   fileName,
 }: {
   storageEngine: StorageEngine;
-  participants: Array<{ participantId: string; answers: Record<string, { endTime: number; startTime: number; componentName: string; trialOrder: string }> }>;
+  participants: Array<{ participantId: string; answers: Record<string, DownloadAnswer> }>;
   studyId: string;
   includeScreen: boolean;
   includeWebcam: boolean;
@@ -308,12 +312,13 @@ export async function downloadParticipantsRecordingsZip({
   const zip = new JSZip();
 
   const recordingPromises = participants.flatMap((participant) => {
-    const entries = Object.values(participant.answers)
-      .filter((ans) => ans.endTime > 0)
-      .sort((a, b) => a.startTime - b.startTime);
+    const entries = Object.entries(participant.answers)
+      .map(([storedIdentifier, answer]) => ({ storedIdentifier, answer }))
+      .filter(({ answer }) => answer.endTime > 0)
+      .sort((a, b) => a.answer.startTime - b.answer.startTime);
 
-    return entries.map(async (ans) => {
-      const identifier = `${ans.componentName}_${ans.trialOrder}`;
+    return entries.map(async ({ storedIdentifier, answer }) => {
+      const identifier = answer.identifier || storedIdentifier;
 
       await downloadParticipantsRecordings({
         storageEngine,
diff --git a/src/utils/tests/handleDownloadFiles.spec.ts b/src/utils/tests/handleDownloadFiles.spec.ts
index 3866801f0c..3617a65624 100644
--- a/src/utils/tests/handleDownloadFiles.spec.ts
+++ b/src/utils/tests/handleDownloadFiles.spec.ts
@@ -193,6 +193,25 @@ describe('downloadParticipantsAudioZip', () => {
     expect(clickSpy).toHaveBeenCalledOnce();
   });
 
+  test('uses the stored identifier for dynamic audio tasks', async () => {
+    const storageEngine = makeStorageEngine({
+      getAudioUrl: vi.fn(async () => 'https://example.com/audio.webm'),
+      getTranscriptUrl: vi.fn(async () => null),
+    });
+    const participants = [{
+      participantId: 'p1',
+      answers: {
+        stored_dynamic_id: {
+          endTime: 1000, startTime: 0, componentName: 'dynamic', trialOrder: '0', identifier: 'dynamic_generated_0',
+        },
+      },
+    }];
+
+    await downloadParticipantsAudioZip({ storageEngine, participants, studyId: 'my-study' });
+
+    expect(storageEngine.getAudioUrl).toHaveBeenCalledWith('dynamic_generated_0', 'p1');
+  });
+
   test('skips trials where endTime is 0 (not yet completed)', async () => {
     const storageEngine = makeStorageEngine({
       getAudioUrl: vi.fn(async () => 'https://example.com/audio.webm'),
@@ -297,6 +316,26 @@ describe('downloadParticipantsRecordingsZip', () => {
     zipFile.mockRestore();
   });
 
+  test('uses the stored identifier for dynamic recording tasks', async () => {
+    const storageEngine = makeStorageEngine({
+      getScreenRecording: vi.fn(async () => 'https://example.com/recording.webm'),
+    });
+    const participants = [{
+      participantId: 'p1',
+      answers: {
+        stored_dynamic_id: {
+          endTime: 1000, startTime: 0, componentName: 'dynamic', trialOrder: '0', identifier: 'dynamic_generated_0',
+        },
+      },
+    }];
+
+    await downloadParticipantsRecordingsZip({
+      storageEngine, participants, studyId: 'my-study', includeScreen: true, includeWebcam: false,
+    });
+
+    expect(storageEngine.getScreenRecording).toHaveBeenCalledWith('dynamic_generated_0', 'p1');
+  });
+
   test('skips trials where endTime is 0 (not completed)', async () => {
     const storageEngine = makeStorageEngine({
       getScreenRecording: vi.fn(async () => 'https://example.com/rec.webm'),

From 8343dd55931960e6fad2c9cbe0d9a423cb7853ab Mon Sep 17 00:00:00 2001
From: Jack Wilburn <jackwilburn@tutanota.com>
Date: Tue, 8 Sep 2026 20:40:10 -0600
Subject: [PATCH 04/12] Harden recording capture lifecycle

---
 .../assets/WebcamRecording.tsx                |  13 ++-
 src/store/hooks/tests/useRecording.spec.ts    | 109 ++++++++++++++++++
 src/store/hooks/useRecording.ts               |  50 ++++----
 3 files changed, 147 insertions(+), 25 deletions(-)

diff --git a/src/public/libraries/webcam-recording/assets/WebcamRecording.tsx b/src/public/libraries/webcam-recording/assets/WebcamRecording.tsx
index 4861712464..6b4e1caf1b 100644
--- a/src/public/libraries/webcam-recording/assets/WebcamRecording.tsx
+++ b/src/public/libraries/webcam-recording/assets/WebcamRecording.tsx
@@ -5,6 +5,7 @@ import { useEffect, useMemo, useState } from 'react';
 import { useRecordingContext } from '../../../../store/hooks/useRecording';
 import { StimulusParams } from '../../../../store/types';
 import { RecordingAudioWaveform } from '../../../../components/interface/RecordingAudioWaveform';
+import { useStoreSelector } from '../../../../store/store';
 
 function WebcamRecordingPermission({ setAnswer }: StimulusParams<undefined>) {
   const {
@@ -20,10 +21,12 @@ function WebcamRecordingPermission({ setAnswer }: StimulusParams<undefined>) {
   } = useRecordingContext();
 
   const [audioCapturingSuccess, setAudioCapturingSuccess] = useState(false);
+  const { dataCollectionEnabled } = useStoreSelector((state) => state.modes);
 
   const setupComplete = useMemo(
-    () => isWebcamCapturing && (!studyHasAudioRecording || (isAudioCapturing && audioCapturingSuccess)),
-    [audioCapturingSuccess, isAudioCapturing, isWebcamCapturing, studyHasAudioRecording],
+    () => !dataCollectionEnabled
+      || (isWebcamCapturing && (!studyHasAudioRecording || (isAudioCapturing && audioCapturingSuccess))),
+    [audioCapturingSuccess, dataCollectionEnabled, isAudioCapturing, isWebcamCapturing, studyHasAudioRecording],
   );
 
   useEffect(() => {
@@ -37,10 +40,10 @@ function WebcamRecordingPermission({ setAnswer }: StimulusParams<undefined>) {
       status: setupComplete,
       provenanceGraph: undefined,
       answers: {
-        webcamRecordingPermission: isWebcamCapturing,
+        webcamRecordingPermission: dataCollectionEnabled ? isWebcamCapturing : true,
       },
     });
-  }, [isWebcamCapturing, setAnswer, setupComplete]);
+  }, [dataCollectionEnabled, isWebcamCapturing, setAnswer, setupComplete]);
 
   useEffect(() => {
     if (!isWebcamCapturing || !studyHasAudioRecording) {
@@ -117,7 +120,7 @@ function WebcamRecordingPermission({ setAnswer }: StimulusParams<undefined>) {
           <strong>Click the button below</strong>
           {' '}
           to enable webcam recording.
-          <Button type="button" onClick={isWebcamCapturing ? stopScreenCapture : startWebcamCapture} display="block" mt="sm">
+          <Button type="button" onClick={isWebcamCapturing ? stopScreenCapture : startWebcamCapture} disabled={!dataCollectionEnabled} display="block" mt="sm">
             {isWebcamCapturing ? 'Stop Recording' : 'Start Recording'}
           </Button>
           {error && <p style={{ color: 'red' }}>{error}</p>}
diff --git a/src/store/hooks/tests/useRecording.spec.ts b/src/store/hooks/tests/useRecording.spec.ts
index 2a5728e12e..b937d05d74 100644
--- a/src/store/hooks/tests/useRecording.spec.ts
+++ b/src/store/hooks/tests/useRecording.spec.ts
@@ -10,6 +10,7 @@ import * as recordingHooks from '../useRecording';
 import { useRecording, useRecordingContext } from '../useRecording';
 import type { StoreState } from '../../types';
 import ScreenRecordingPermission from '../../../public/libraries/screen-recording/assets/ScreenRecording';
+import WebcamRecordingPermission from '../../../public/libraries/webcam-recording/assets/WebcamRecording';
 
 // ── mutable state ─────────────────────────────────────────────────────────────
 
@@ -277,6 +278,52 @@ describe('useRecording startScreenCapture', () => {
     });
   });
 
+  test('does not stop the persistent microphone track when audio is disabled on one screen trial', async () => {
+    mockRecordingConfig = {
+      ...mockRecordingConfig,
+      studyHasScreenRecording: true,
+      studyHasAudioRecording: true,
+      currentComponentHasScreenRecording: true,
+      currentComponentHasAudioRecording: true,
+    };
+    const micStream = new MockMediaStream();
+    mockStorageEngine = { saveScreenRecording: vi.fn(async () => {}), saveAudioRecording: vi.fn(async () => {}) };
+    vi.mocked(navigator.mediaDevices.getUserMedia)
+      .mockResolvedValueOnce(micStream as unknown as MediaStream);
+    const { result, rerender } = renderHook(() => useRecording());
+
+    act(() => { result.current.startScreenCapture(); });
+    await waitFor(() => expect(result.current.isMediaCapturing).toBe(true));
+    await waitFor(() => expect(result.current.isAudioRecording).toBe(true));
+
+    mockCurrentComponent = 'audio-disabled';
+    mockRecordingConfig = {
+      ...mockRecordingConfig,
+      currentComponentHasAudioRecording: false,
+      currentComponentHasScreenRecording: true,
+    };
+    act(() => { rerender(); });
+
+    expect(micStream.getTracks()[0].stop).not.toHaveBeenCalled();
+  });
+
+  test('restores capture after Strict Mode effect replay', async () => {
+    mockRecordingConfig = {
+      ...mockRecordingConfig,
+      studyHasScreenRecording: true,
+    };
+    const wrapper = ({ children }: { children: React.ReactNode }) => React.createElement(
+      React.StrictMode,
+      null,
+      children,
+    );
+    const { result } = renderHook(() => useRecording(), { wrapper });
+
+    act(() => { result.current.startScreenCapture(); });
+
+    await waitFor(() => expect(result.current.isScreenCapturing).toBe(true));
+  });
+
   test('audio-only: getUserMedia called, isAudioCapturing true, isScreenCapturing false', async () => {
     mockRecordingConfig = {
       ...mockRecordingConfig,
@@ -333,6 +380,31 @@ describe('useRecording startScreenCapture', () => {
     expect(screenStream.getTracks()[0].stop).toHaveBeenCalled();
   });
 
+  test('stops an acquired screen stream when webcam permission is still pending', async () => {
+    mockRecordingConfig = {
+      ...mockRecordingConfig,
+      studyHasScreenRecording: true,
+      studyHasWebcamRecording: true,
+    };
+    const screenStream = new MockMediaStream();
+    let resolveWebcam: ((stream: MediaStream) => void) | undefined;
+    vi.mocked(navigator.mediaDevices.getDisplayMedia).mockResolvedValue(screenStream as unknown as MediaStream);
+    vi.mocked(navigator.mediaDevices.getUserMedia).mockImplementationOnce(() => new Promise<MediaStream>((resolve) => {
+      resolveWebcam = resolve;
+    }));
+    const { result } = renderHook(() => useRecording());
+
+    act(() => { result.current.startScreenCapture(); });
+    await waitFor(() => expect(screenStream.getTracks()[0].addEventListener).toHaveBeenCalledWith('ended', expect.any(Function)));
+
+    const endedHandler = screenStream.getTracks()[0].addEventListener.mock.calls[0][1] as () => void;
+    act(() => { endedHandler(); });
+    resolveWebcam?.(new MockMediaStream() as unknown as MediaStream);
+
+    await waitFor(() => expect(result.current.isScreenCapturing).toBe(false));
+    expect(screenStream.getTracks()[0].stop).toHaveBeenCalled();
+  });
+
   test('does not start overlapping capture requests', async () => {
     mockRecordingConfig = { ...mockRecordingConfig, studyHasScreenRecording: true };
     let resolveCapture: ((stream: MediaStream) => void) | undefined;
@@ -848,3 +920,40 @@ describe('ScreenRecordingPermission component', () => {
     expect(stopScreenCapture).not.toHaveBeenCalled();
   });
 });
+
+describe('WebcamRecordingPermission component', () => {
+  test('auto-completes and disables capture when data collection is off', () => {
+    mockModes = { ...mockModes, dataCollectionEnabled: false };
+    const startWebcamCapture = vi.fn();
+    const stopScreenCapture = vi.fn();
+    const setAnswer = vi.fn();
+    vi.spyOn(recordingHooks, 'useRecordingContext').mockReturnValue({
+      studyHasAudioRecording: false,
+      webcamVideoRef: { current: null },
+      startWebcamCapture,
+      stopScreenCapture,
+      isWebcamCapturing: false,
+      isAudioCapturing: false,
+      audioMediaStream: { current: null },
+    } as unknown as ReturnType<typeof recordingHooks.useRecordingContext>);
+
+    renderWithMantine(
+      React.createElement(WebcamRecordingPermission, {
+        setAnswer,
+        parameters: undefined,
+        answers: {},
+        useTrrack: vi.fn(),
+      } as React.ComponentProps<typeof WebcamRecordingPermission>),
+    );
+
+    expect(setAnswer).toHaveBeenCalledWith(expect.objectContaining({
+      status: true,
+      answers: { webcamRecordingPermission: true },
+    }));
+    const button = screen.getByRole('button', { name: 'Start Recording' });
+    expect((button as HTMLButtonElement).disabled).toBe(true);
+    fireEvent.click(button);
+    expect(startWebcamCapture).not.toHaveBeenCalled();
+    expect(stopScreenCapture).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/store/hooks/useRecording.ts b/src/store/hooks/useRecording.ts
index 3039225ee5..af524372dc 100644
--- a/src/store/hooks/useRecording.ts
+++ b/src/store/hooks/useRecording.ts
@@ -104,6 +104,8 @@ export function useRecording() {
 
   // Stop all persistent media capture streams.
   const stopScreenCapture = useCallback(() => {
+    captureAttempt.current += 1;
+    isStartingCapture.current = false;
     if (isStoppingCapture.current) {
       return;
     }
@@ -359,6 +361,10 @@ export function useRecording() {
 
   // For study with just audio recording
   useEffect(() => {
+    if (!studyConfig || studyHasScreenRecording || studyHasWebcamRecording || !studyHasAudioRecording || !storageEngine || (status && status.endTime > 0) || isAnalysis) {
+      return;
+    }
+
     // Always stop recording when navigating to a trial without audio recording
     if (!currentComponentHasAudioRecording && audioMediaRecorder.current) {
       stopAudioRecording();
@@ -366,10 +372,6 @@ export function useRecording() {
       return;
     }
 
-    if (!studyConfig || studyHasScreenRecording || studyHasWebcamRecording || !studyHasAudioRecording || !storageEngine || (status && status.endTime > 0) || isAnalysis) {
-      return;
-    }
-
     if (audioMediaRecorder.current) {
       stopAudioRecording();
       currentTrialName.current = null;
@@ -432,6 +434,17 @@ export function useRecording() {
     let micStream: MediaStream | null = null;
 
     const isCurrentAttempt = () => isMounted.current && captureAttempt.current === attempt;
+    const hasLiveTracks = (stream: MediaStream | null) => !!stream
+      && stream.getTracks().length > 0
+      && stream.getTracks().every((track) => track.readyState !== 'ended');
+    const stopOnEnded = () => {
+      if (!isStoppingCapture.current) {
+        stopScreenCapture();
+      }
+    };
+    const attachEndedHandler = (stream: MediaStream | null) => {
+      stream?.getTracks().forEach((track) => track.addEventListener('ended', stopOnEnded));
+    };
     const stopAcquiredStreams = () => {
       [micStream, webcamStream, screenStream].forEach(stopMediaTracks);
       if (screenMediaStream.current === screenStream) screenMediaStream.current = null;
@@ -453,7 +466,8 @@ export function useRecording() {
         selfBrowserSurface: 'include',
         preferCurrentTab: true,
       }) : null;
-      if (!isCurrentAttempt()) {
+      attachEndedHandler(screenStream);
+      if (!isCurrentAttempt() || (includeScreen && !hasLiveTracks(screenStream))) {
         stopAcquiredStreams();
         return;
       }
@@ -463,7 +477,8 @@ export function useRecording() {
         video: true,
         audio: false,
       }) : null;
-      if (!isCurrentAttempt()) {
+      attachEndedHandler(webcamStream);
+      if (!isCurrentAttempt() || (includeWebcam && !hasLiveTracks(webcamStream))) {
         stopAcquiredStreams();
         return;
       }
@@ -481,7 +496,8 @@ export function useRecording() {
           throw err;
         }
       }
-      if (!isCurrentAttempt()) {
+      attachEndedHandler(micStream);
+      if (!isCurrentAttempt() || (includeAudio && !hasLiveTracks(micStream))) {
         stopAcquiredStreams();
         return;
       }
@@ -509,15 +525,6 @@ export function useRecording() {
         }
       }
 
-      const stopOnEnded = () => {
-        if (!isStoppingCapture.current) {
-          stopScreenCapture();
-        }
-      };
-      [screenStream, webcamStream, micStream].forEach((stream) => {
-        stream?.getTracks().forEach((track) => track.addEventListener('ended', stopOnEnded));
-      });
-
       setIsScreenCapturing(!!screenStream);
       setIsWebcamCapturing(!!webcamStream);
       setIsAudioCapturing(!!micStream);
@@ -573,10 +580,13 @@ export function useRecording() {
     };
   }, [currentComponentHasAudioRecording, isMuted]);
 
-  useEffect(() => () => {
-    isMounted.current = false;
-    captureAttempt.current += 1;
-    stopScreenCapture();
+  useEffect(() => {
+    isMounted.current = true;
+
+    return () => {
+      isMounted.current = false;
+      stopScreenCapture();
+    };
   }, [stopScreenCapture]);
 
   useEffect(() => {

From 37ba8004ca6642eb249c415a14c3ae135e705326 Mon Sep 17 00:00:00 2001
From: Jack Wilburn <jackwilburn@tutanota.com>
Date: Tue, 8 Sep 2026 20:51:41 -0600
Subject: [PATCH 05/12] Keep synchronized replay callbacks stable

---
 src/store/hooks/tests/useReplay.spec.tsx |  9 ++++++++
 src/store/hooks/useReplay.ts             | 27 ++++++++++++++----------
 2 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/store/hooks/tests/useReplay.spec.tsx b/src/store/hooks/tests/useReplay.spec.tsx
index 43ceac9408..6b950a8e06 100644
--- a/src/store/hooks/tests/useReplay.spec.tsx
+++ b/src/store/hooks/tests/useReplay.spec.tsx
@@ -147,6 +147,15 @@ describe('useReplay — returned function invocation', () => {
     expect(result.current.seekTime).toBe(5);
   });
 
+  test('keeps updateReplayRef stable when replay control becomes remote', () => {
+    const { result } = renderHook(() => useReplay());
+    const initialUpdateReplayRef = result.current.updateReplayRef;
+
+    act(() => { result.current.setSeekTime(5, true); });
+
+    expect(result.current.updateReplayRef).toBe(initialUpdateReplayRef);
+  });
+
   test('setSpeed with isRemoteTriggered=true covers remote path', () => {
     const { result } = renderHook(() => useReplay());
     act(() => { result.current.setSpeed(1.5, true); });
diff --git a/src/store/hooks/useReplay.ts b/src/store/hooks/useReplay.ts
index 143e972aab..5f29f6131b 100644
--- a/src/store/hooks/useReplay.ts
+++ b/src/store/hooks/useReplay.ts
@@ -39,6 +39,11 @@ export function useReplay() {
   // isMasterplayer is true for the window where play button is clicked.
   // This is set to false when the video / provenance is initiated via different tab/window
   const [isMasterPlayer, setIsMasterPlayer] = useState(true);
+  const isMasterPlayerRef = useRef(isMasterPlayer);
+  const setMasterPlayer = useCallback((master: boolean) => {
+    isMasterPlayerRef.current = master;
+    setIsMasterPlayer(master);
+  }, []);
 
   const emitterRef = useRef(new EventEmitter());
 
@@ -71,15 +76,15 @@ export function useReplay() {
 
   const updateMutedState = useCallback(() => {
     if (videoRef.current) {
-      videoRef.current.muted = !isMasterPlayer || replayRef.current !== videoRef.current;
+      videoRef.current.muted = !isMasterPlayerRef.current || replayRef.current !== videoRef.current;
     }
     if (webcamVideoRef.current) {
       webcamVideoRef.current.muted = true;
     }
     if (audioRef.current) {
-      audioRef.current.muted = !isMasterPlayer || replayRef.current === videoRef.current;
+      audioRef.current.muted = !isMasterPlayerRef.current || replayRef.current === videoRef.current;
     }
-  }, [isMasterPlayer]);
+  }, []);
 
   const updateIsPlaying = useCallback((playing: boolean) => {
     internalIsPlaying.current = playing;
@@ -110,11 +115,11 @@ export function useReplay() {
   }, []);
 
   const setSpeed = useCallback((newSpeed: number, isRemoteTriggered = false) => {
-    setIsMasterPlayer(!isRemoteTriggered);
+    setMasterPlayer(!isRemoteTriggered);
     internalSpeed.current = newSpeed;
     _setSpeed(newSpeed);
     _setSeekTime(timerValue.current);
-  }, []);
+  }, [setMasterPlayer]);
 
   const syntheticReplayTimer = useRef<ReturnType<typeof setInterval> | null>(null);
 
@@ -187,7 +192,7 @@ export function useReplay() {
   }, []);
 
   const setSeekTime = useCallback((time: number, isRemoteTriggered = false) => {
-    setIsMasterPlayer(!isRemoteTriggered);
+    setMasterPlayer(!isRemoteTriggered);
     _setSeekTime(time);
     timerValue.current = time;
     getMediaElements().forEach((media) => seekMedia(media, time));
@@ -200,7 +205,7 @@ export function useReplay() {
     }
     emitterRef.current.emit('timeupdate', time);
     setHasEnded(internalDuration.current > 0 && time >= internalDuration.current);
-  }, [getMediaElements, requestReplayPlayback]);
+  }, [getMediaElements, requestReplayPlayback, setMasterPlayer]);
 
   const handlePause = useCallback(() => {
     if (!isMountedRef.current) {
@@ -287,7 +292,7 @@ export function useReplay() {
       return;
     }
 
-    setIsMasterPlayer(!isRemoteTriggered);
+    setMasterPlayer(!isRemoteTriggered);
     if (
       playing
       && internalDuration.current > 0
@@ -306,7 +311,7 @@ export function useReplay() {
     } else {
       getActiveMediaElements().forEach((media) => media.pause());
     }
-  }, [getActiveMediaElements, requestReplayPlayback, setSeekTime, updateIsPlaying]);
+  }, [getActiveMediaElements, requestReplayPlayback, setSeekTime, setMasterPlayer, updateIsPlaying]);
 
   useEffect(() => {
     isMountedRef.current = true;
@@ -394,7 +399,7 @@ export function useReplay() {
       const {
         seekTime: __seekTime, isPlaying: __isPlaying, speed: __speed,
       } = newValue || {};
-      setIsMasterPlayer(false);
+      setMasterPlayer(false);
       setSpeed(__speed, true);
       setSeekTime(__seekTime, true);
       setIsPlaying(__isPlaying, true);
@@ -405,7 +410,7 @@ export function useReplay() {
     return () => {
       syncEmitter.off('replaySync');
     };
-  }, [setIsPlaying, setSeekTime, setSpeed]);
+  }, [setIsPlaying, setSeekTime, setMasterPlayer, setSpeed]);
 
   useEffect(() => {
     setSeekTime(initialTimestamp);

From b163c0824e90e63e13ba2d3ec9e47ff23ab88fc2 Mon Sep 17 00:00:00 2001
From: Jack Wilburn <jackwilburn@tutanota.com>
Date: Tue, 8 Sep 2026 20:55:25 -0600
Subject: [PATCH 06/12] Refresh replay muting on ownership changes

---
 src/store/hooks/tests/useReplay.spec.tsx | 21 +++++++++++++++++++++
 src/store/hooks/useReplay.ts             |  2 +-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/store/hooks/tests/useReplay.spec.tsx b/src/store/hooks/tests/useReplay.spec.tsx
index 6b950a8e06..0cba811254 100644
--- a/src/store/hooks/tests/useReplay.spec.tsx
+++ b/src/store/hooks/tests/useReplay.spec.tsx
@@ -156,6 +156,27 @@ describe('useReplay — returned function invocation', () => {
     expect(result.current.updateReplayRef).toBe(initialUpdateReplayRef);
   });
 
+  test('updates muting when ownership changes during playback', () => {
+    const { result } = renderHook(() => useReplay());
+    const video = document.createElement('video');
+    Object.defineProperty(video, 'src', { value: 'fake.mp4', writable: true, configurable: true });
+    video.play = vi.fn(async () => {});
+    video.pause = vi.fn();
+
+    act(() => {
+      result.current.videoRef.current = video;
+      result.current.updateReplayRef();
+      result.current.setIsPlaying(true);
+    });
+    expect(video.muted).toBe(false);
+
+    act(() => { result.current.setSeekTime(5, true); });
+    expect(video.muted).toBe(true);
+
+    act(() => { result.current.setSeekTime(6); });
+    expect(video.muted).toBe(false);
+  });
+
   test('setSpeed with isRemoteTriggered=true covers remote path', () => {
     const { result } = renderHook(() => useReplay());
     act(() => { result.current.setSpeed(1.5, true); });
diff --git a/src/store/hooks/useReplay.ts b/src/store/hooks/useReplay.ts
index 5f29f6131b..71ce901ab2 100644
--- a/src/store/hooks/useReplay.ts
+++ b/src/store/hooks/useReplay.ts
@@ -158,7 +158,7 @@ export function useReplay() {
 
   useEffect(() => {
     updateMutedState();
-  }, [updateMutedState]);
+  }, [isMasterPlayer, updateMutedState]);
 
   useEffect(() => {
     getMediaElements().forEach((media) => {

From 872987912eb667e21434d3370e7e17b40d57dd5c Mon Sep 17 00:00:00 2001
From: Jack Wilburn <jackwilburn@tutanota.com>
Date: Tue, 8 Sep 2026 21:55:49 -0600
Subject: [PATCH 07/12] Fix scoped recording capture and replay startup

---
 .../hooks/tests/useRecordingConfig.spec.ts    | 40 ++++++++++++++++++-
 src/store/hooks/tests/useReplay.spec.tsx      | 24 +++++++++++
 src/store/hooks/useRecordingConfig.ts         | 37 ++++++++++++++++-
 src/store/hooks/useReplay.ts                  | 15 +++++--
 src/utils/useStudyRecordings.ts               |  7 +++-
 5 files changed, 116 insertions(+), 7 deletions(-)

diff --git a/src/store/hooks/tests/useRecordingConfig.spec.ts b/src/store/hooks/tests/useRecordingConfig.spec.ts
index 8af26111a0..5a3952b7ad 100644
--- a/src/store/hooks/tests/useRecordingConfig.spec.ts
+++ b/src/store/hooks/tests/useRecordingConfig.spec.ts
@@ -7,6 +7,16 @@ import { useStudyConfig } from '../useStudyConfig';
 import { useRecordingConfig } from '../useRecordingConfig';
 import { makeStudyConfig } from '../../../tests/utils';
 
+const mockStoreState = vi.hoisted(() => ({
+  sequence: {
+    order: 'fixed' as const,
+    orderPath: 'root',
+    components: ['trial1'] as (string | { order: 'dynamic', id: string, components: [] })[],
+    skip: [],
+  },
+  funcSequence: {} as Record<string, string[]>,
+}));
+
 vi.mock('../useStudyConfig', () => ({
   useStudyConfig: vi.fn(() => ({
     uiConfig: {
@@ -20,7 +30,15 @@ vi.mock('../../../routes/utils', () => ({
   useCurrentComponent: vi.fn(() => 'trial1'),
 }));
 
-afterEach(() => vi.restoreAllMocks());
+vi.mock('../../store', () => ({
+  useStoreSelector: (selector: (state: typeof mockStoreState) => unknown) => selector(mockStoreState),
+}));
+
+afterEach(() => {
+  mockStoreState.sequence.components = ['trial1'];
+  mockStoreState.funcSequence = {};
+  vi.restoreAllMocks();
+});
 
 describe('useRecordingConfig', () => {
   test('returns all false when uiConfig has no recording options', () => {
@@ -70,10 +88,30 @@ describe('useRecordingConfig', () => {
   });
 
   test('finds recording options on components inside dynamic blocks', () => {
+    mockStoreState.sequence.components = [{ order: 'dynamic', id: 'dynamicBlock', components: [] }];
+    mockStoreState.funcSequence = { dynamicBlock: ['dynamicTrial'] };
     vi.mocked(useStudyConfig).mockReturnValueOnce(
       makeStudyConfig({ components: { dynamicTrial: { recordAudio: true } } }),
     );
     const { result } = renderHook(() => useRecordingConfig());
     expect(result.current.studyHasAudioRecording).toBe(true);
   });
+
+  test('ignores recording options on components outside the assigned sequence', () => {
+    mockStoreState.sequence.components = ['webcamTrial'];
+    vi.mocked(useStudyConfig).mockReturnValueOnce(
+      makeStudyConfig({
+        components: {
+          webcamTrial: { recordWebcam: true },
+          screenTrial: { recordScreen: true },
+        },
+        sequence: {
+          order: 'fixed', orderPath: 'root', components: ['webcamTrial'], skip: [],
+        },
+      }),
+    );
+    const { result } = renderHook(() => useRecordingConfig());
+    expect(result.current.studyHasWebcamRecording).toBe(true);
+    expect(result.current.studyHasScreenRecording).toBe(false);
+  });
 });
diff --git a/src/store/hooks/tests/useReplay.spec.tsx b/src/store/hooks/tests/useReplay.spec.tsx
index 0cba811254..9842bf8b56 100644
--- a/src/store/hooks/tests/useReplay.spec.tsx
+++ b/src/store/hooks/tests/useReplay.spec.tsx
@@ -360,6 +360,30 @@ describe('useReplay — handlePlay/Seeked/Pause via video element events', () =>
     expect(result.current.replayRef.current).toBe(audio);
   });
 
+  test('starts a secondary webcam source added while audio playback is active', () => {
+    const { result } = renderHook(() => useReplay());
+    const audio = document.createElement('audio');
+    Object.defineProperty(audio, 'src', { value: 'fake.mp3', writable: true, configurable: true });
+    audio.play = vi.fn(async () => {});
+    const webcam = document.createElement('video');
+    webcam.play = vi.fn(async () => {});
+
+    act(() => {
+      result.current.audioRef.current = audio;
+      result.current.webcamVideoRef.current = webcam;
+      result.current.updateReplayRef();
+      result.current.setIsPlaying(true);
+    });
+    expect(result.current.replayRef.current).toBe(audio);
+
+    act(() => {
+      webcam.setAttribute('src', 'fake-webcam.mp4');
+      result.current.updateReplayRef();
+    });
+
+    expect(webcam.play).toHaveBeenCalled();
+  });
+
   test('stops playback when a newly available source replaces the master', () => {
     const { result } = renderHook(() => useReplay());
     const screen = makeVideoWithSrc();
diff --git a/src/store/hooks/useRecordingConfig.ts b/src/store/hooks/useRecordingConfig.ts
index b91b7c96c4..5854c9d990 100644
--- a/src/store/hooks/useRecordingConfig.ts
+++ b/src/store/hooks/useRecordingConfig.ts
@@ -1,11 +1,43 @@
 import { useMemo } from 'react';
 import { useStudyConfig } from './useStudyConfig';
 import { useCurrentComponent } from '../../routes/utils';
+import { useStoreSelector } from '../store';
+import { getSequenceFlatMap } from '../../utils/getSequenceFlatMap';
 import { studyComponentToIndividualComponent } from '../../utils/handleComponentInheritance';
 import { getStudyRecordings } from '../../utils/useStudyRecordings';
+import type { Sequence } from '../types';
+
+function getAssignedComponentNames(
+  participantSequence: Sequence,
+  funcSequence: Record<string, string[]>,
+) {
+  const componentNames = new Set(getSequenceFlatMap(participantSequence));
+
+  const collectDynamicComponents = (sequence: Sequence) => {
+    sequence.components.forEach((component) => {
+      if (typeof component === 'string') {
+        return;
+      }
+
+      if (component.order === 'dynamic') {
+        if (component.id) {
+          funcSequence[component.id]?.forEach((componentName) => componentNames.add(componentName));
+        }
+        return;
+      }
+
+      collectDynamicComponents(component);
+    });
+  };
+
+  collectDynamicComponents(participantSequence);
+  return Array.from(componentNames);
+}
 
 export function useRecordingConfig() {
   const studyConfig = useStudyConfig();
+  const participantSequence = useStoreSelector((state) => state.sequence);
+  const funcSequence = useStoreSelector((state) => state.funcSequence);
   const currentComponent = useCurrentComponent();
   const stepConfig = studyConfig.components[currentComponent];
   const resolvedStepConfig = stepConfig
@@ -23,7 +55,10 @@ export function useRecordingConfig() {
     hasAudioRecording: studyHasAudioRecording,
     hasScreenRecording: studyHasScreenRecording,
     hasWebcamRecording: studyHasWebcamRecording,
-  } = useMemo(() => getStudyRecordings(studyConfig), [studyConfig]);
+  } = useMemo(() => getStudyRecordings(
+    studyConfig,
+    getAssignedComponentNames(participantSequence, funcSequence),
+  ), [funcSequence, participantSequence, studyConfig]);
 
   const currentComponentHasScreenRecording = useMemo(
     () => resolvedStepConfig?.recordScreen ?? !!recordScreen,
diff --git a/src/store/hooks/useReplay.ts b/src/store/hooks/useReplay.ts
index 71ce901ab2..19d1c0e3f8 100644
--- a/src/store/hooks/useReplay.ts
+++ b/src/store/hooks/useReplay.ts
@@ -22,9 +22,11 @@ function hasMediaSource(media: HTMLMediaElement) {
   if (sourceAttribute !== null) {
     return !!sourceAttribute;
   }
+  const baseUri = typeof document !== 'undefined' ? document.baseURI : '';
+  const locationHref = typeof window !== 'undefined' ? window.location.href : '';
   return !!media.src
-    && media.src !== document.baseURI
-    && media.src !== window.location.href;
+    && (!baseUri || media.src !== baseUri)
+    && (!locationHref || media.src !== locationHref);
 }
 
 /**
@@ -274,6 +276,13 @@ export function useReplay() {
     if (previousReplay !== replayRef.current && internalIsPlaying.current) {
       getMediaElements().forEach((media) => media.pause());
       updateIsPlaying(false);
+    } else if (internalIsPlaying.current) {
+      getSecondaryMediaElements().forEach((media) => {
+        if (media.paused && mediaIncludesTime(media, timerValue.current)) {
+          seekMedia(media, timerValue.current);
+          media.play().catch(() => undefined);
+        }
+      });
     }
 
     if (replayRef.current) {
@@ -284,7 +293,7 @@ export function useReplay() {
     }
     updateMutedState();
     forceEmitTimeUpdate();
-  }, [forceEmitTimeUpdate, getMediaElements, handleEnded, handlePause, handlePlay, handleSeeked, updateIsPlaying, updateMutedState]);
+  }, [forceEmitTimeUpdate, getMediaElements, getSecondaryMediaElements, handleEnded, handlePause, handlePlay, handleSeeked, updateIsPlaying, updateMutedState]);
 
   // this should be the only way to start video/audio
   const setIsPlaying = useCallback((playing: boolean, isRemoteTriggered = false) => {
diff --git a/src/utils/useStudyRecordings.ts b/src/utils/useStudyRecordings.ts
index 133081f3f8..1d9f2b6c3e 100644
--- a/src/utils/useStudyRecordings.ts
+++ b/src/utils/useStudyRecordings.ts
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { StudyConfig } from '../parser/types';
 import { studyComponentToIndividualComponent } from './handleComponentInheritance';
 
-export function getStudyRecordings(studyConfig: StudyConfig | undefined) {
+export function getStudyRecordings(studyConfig: StudyConfig | undefined, componentNames?: string[]) {
   if (!studyConfig?.uiConfig || !studyConfig.components) {
     return {
       hasAudioRecording: false,
@@ -12,7 +12,10 @@ export function getStudyRecordings(studyConfig: StudyConfig | undefined) {
   }
 
   const { recordAudio, recordScreen, recordWebcam } = studyConfig.uiConfig;
-  const componentConfig = Object.keys(studyConfig.components).map((componentId) => studyComponentToIndividualComponent(studyConfig.components[componentId], studyConfig));
+  const componentConfig = (componentNames ?? Object.keys(studyConfig.components)).flatMap((componentId) => {
+    const component = studyConfig.components[componentId];
+    return component ? [studyComponentToIndividualComponent(component, studyConfig)] : [];
+  });
 
   return {
     hasAudioRecording: !!recordAudio || componentConfig.some((component) => component.recordAudio),

From d6e39a54b1044e300b249676b8346cf2140b31c9 Mon Sep 17 00:00:00 2001
From: Jack Wilburn <jackwilburn@tutanota.com>
Date: Wed, 9 Sep 2026 22:58:04 -0600
Subject: [PATCH 08/12] Add replay layout modes for webcam recordings

---
 .../screenRecording/ScreenRecordingReplay.tsx | 44 +++++++++++++++---
 .../tests/ScreenRecordingReplay.spec.tsx      | 45 ++++++++++++++++++-
 src/store/hooks/tests/useReplay.spec.tsx      |  7 +++
 src/store/hooks/useReplay.ts                  |  7 ++-
 4 files changed, 95 insertions(+), 8 deletions(-)

diff --git a/src/components/screenRecording/ScreenRecordingReplay.tsx b/src/components/screenRecording/ScreenRecordingReplay.tsx
index d1b8cb7b7d..6f45db8e5f 100644
--- a/src/components/screenRecording/ScreenRecordingReplay.tsx
+++ b/src/components/screenRecording/ScreenRecordingReplay.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
 import { useSearchParams } from 'react-router';
 import {
-  Box, Flex, Text,
+  Box, Flex, Group, SegmentedControl, Text,
 } from '@mantine/core';
 import { useStorageEngine } from '../../storage/storageEngineHooks';
 import {
@@ -10,7 +10,7 @@ import {
 } from '../../store/store';
 import { useCurrentIdentifier } from '../../routes/utils';
 import { useIsAnalysis } from '../../store/hooks/useIsAnalysis';
-import { useReplayContext } from '../../store/hooks/useReplay';
+import { ReplayLayout, useReplayContext } from '../../store/hooks/useReplay';
 
 export function ScreenRecordingReplay() {
   const [searchParams] = useSearchParams();
@@ -24,6 +24,8 @@ export function ScreenRecordingReplay() {
     webcamVideoRef,
     updateReplayRef,
     isPlaying,
+    replayLayout,
+    setReplayLayout,
   } = useReplayContext();
 
   const [hasScreenVideo, setHasScreenVideo] = useState(false);
@@ -170,14 +172,46 @@ export function ScreenRecordingReplay() {
     border: `5px solid ${isPlaying ? '#ccc' : 'black'}`,
   }), [isPlaying]);
 
+  const hasBothVideos = hasScreenVideo && hasWebcamVideo;
+  const layoutDirection = replayLayout === 'side-by-side' && hasBothVideos
+    ? { base: 'column' as const, md: 'row' as const }
+    : 'column' as const;
+  const screenContainerStyle = replayLayout === 'webcam-top' && hasBothVideos
+    ? { order: 2 }
+    : undefined;
+  const webcamContainerStyle = replayLayout === 'picture-in-picture' && hasBothVideos
+    ? {
+      position: 'absolute' as const, top: 16, right: 16, width: '28%', zIndex: 1,
+    }
+    : replayLayout === 'webcam-top' && hasBothVideos
+      ? { order: 1, width: '32%', alignSelf: 'center' as const }
+      : undefined;
+
   return (
     <Box pos="relative">
+      {hasBothVideos && (
+        <Group justify="center" mb="md">
+          <Text size="sm" fw={500}>Replay layout</Text>
+          <SegmentedControl
+            aria-label="Replay layout"
+            value={replayLayout}
+            onChange={(value) => setReplayLayout(value as ReplayLayout)}
+            data={[
+              { label: 'Side by side', value: 'side-by-side' },
+              { label: 'Picture in picture', value: 'picture-in-picture' },
+              { label: 'Webcam on top', value: 'webcam-top' },
+            ]}
+          />
+        </Group>
+      )}
       <Flex
+        data-replay-layout={replayLayout}
         gap="md"
-        direction={{ base: 'column', md: hasScreenVideo && hasWebcamVideo ? 'row' : 'column' }}
+        direction={layoutDirection}
         align="stretch"
+        style={replayLayout === 'picture-in-picture' && hasBothVideos ? { position: 'relative' } : undefined}
       >
-        <Box flex={hasScreenVideo && hasWebcamVideo ? 2 : 1}>
+        <Box flex={hasBothVideos ? 2 : 1} style={screenContainerStyle}>
           <Text fw={600} size="sm" ta="center" mb="xs" display={hasScreenVideo ? 'block' : 'none'}>
             Screen Recording
           </Text>
@@ -194,7 +228,7 @@ export function ScreenRecordingReplay() {
           </video>
         </Box>
 
-        <Box flex={1}>
+        <Box flex={1} style={webcamContainerStyle}>
           <Text fw={600} size="sm" ta="center" mb="xs" display={hasWebcamVideo ? 'block' : 'none'}>
             Webcam Recording
           </Text>
diff --git a/src/components/screenRecording/tests/ScreenRecordingReplay.spec.tsx b/src/components/screenRecording/tests/ScreenRecordingReplay.spec.tsx
index c24b44a7d7..869eb47d16 100644
--- a/src/components/screenRecording/tests/ScreenRecordingReplay.spec.tsx
+++ b/src/components/screenRecording/tests/ScreenRecordingReplay.spec.tsx
@@ -1,5 +1,5 @@
 import {
-  render, act, cleanup, waitFor,
+  render, act, cleanup, fireEvent, waitFor,
 } from '@testing-library/react';
 import {
   afterEach, beforeEach, describe, expect, test, vi,
@@ -13,6 +13,8 @@ let mockStorageEngine: Record<string, ReturnType<typeof vi.fn>> | null = null;
 let mockSearchParams = new URLSearchParams();
 let mockUpdateReplayRef = vi.fn();
 let mockIsPlaying = false;
+let mockReplayLayout = 'side-by-side';
+const mockSetReplayLayout = vi.fn();
 let mockVideoRef: { current: HTMLVideoElement | null } = { current: null };
 let mockWebcamVideoRef: { current: HTMLVideoElement | null } = { current: null };
 
@@ -24,7 +26,13 @@ vi.mock('react-router', () => ({
 
 vi.mock('@mantine/core', () => ({
   Box: ({ children }: { children?: React.ReactNode }) => <div>{children}</div>,
-  Flex: ({ children }: { children?: React.ReactNode }) => <div>{children}</div>,
+  Flex: ({ children, 'data-replay-layout': layout }: { children?: React.ReactNode; 'data-replay-layout'?: string }) => <div data-replay-layout={layout}>{children}</div>,
+  Group: ({ children }: { children?: React.ReactNode }) => <div>{children}</div>,
+  SegmentedControl: ({ data, value, onChange }: { data: { label: string; value: string }[]; value: string; onChange: (value: string) => void }) => (
+    <div role="radiogroup" aria-label="Replay layout">
+      {data.map((item) => <button type="button" key={item.value} aria-pressed={item.value === value} onClick={() => onChange(item.value)}>{item.label}</button>)}
+    </div>
+  ),
   Text: ({ children }: { children?: React.ReactNode }) => <span>{children}</span>,
 }));
 
@@ -60,6 +68,8 @@ vi.mock('../../../store/hooks/useReplay', () => ({
     webcamVideoRef: mockWebcamVideoRef,
     updateReplayRef: mockUpdateReplayRef,
     isPlaying: mockIsPlaying,
+    replayLayout: mockReplayLayout,
+    setReplayLayout: mockSetReplayLayout,
   }),
 }));
 
@@ -72,6 +82,8 @@ describe('ScreenRecordingReplay', () => {
     mockSearchParams = new URLSearchParams();
     mockUpdateReplayRef = vi.fn();
     mockIsPlaying = false;
+    mockReplayLayout = 'side-by-side';
+    mockSetReplayLayout.mockClear();
     mockVideoRef = { current: null };
     mockWebcamVideoRef = { current: null };
     mockDispatch.mockClear();
@@ -162,6 +174,35 @@ describe('ScreenRecordingReplay', () => {
     expect(mockDispatch).toHaveBeenCalledWith(mockSetAnalysisHasWebcamRecording(true));
   });
 
+  test('offers replay layout controls when both recordings exist', async () => {
+    mockIsAnalysis = true;
+    mockStorageEngine = {
+      getScreenRecording: vi.fn().mockResolvedValue('http://example.com/video.mp4'),
+      getWebcamRecording: vi.fn().mockResolvedValue('http://example.com/webcam.webm'),
+    };
+    mockSearchParams = new URLSearchParams({ participantId: 'p1' });
+    const view = await act(async () => render(<ScreenRecordingReplay />));
+
+    await waitFor(() => expect(view.container.querySelectorAll('video')[0].src).toBe('http://example.com/video.mp4'));
+    expect(view.getByRole('radiogroup', { name: 'Replay layout' })).toBeDefined();
+    expect(view.getByRole('button', { name: 'Side by side' })).toBeDefined();
+    expect(view.getByRole('button', { name: 'Picture in picture' })).toBeDefined();
+    expect(view.getByRole('button', { name: 'Webcam on top' })).toBeDefined();
+
+    fireEvent.click(view.getByRole('button', { name: 'Picture in picture' }));
+    expect(mockSetReplayLayout).toHaveBeenCalledWith('picture-in-picture');
+
+    fireEvent.click(view.getByRole('button', { name: 'Webcam on top' }));
+    expect(mockSetReplayLayout).toHaveBeenCalledWith('webcam-top');
+
+    fireEvent.click(view.getByRole('button', { name: 'Side by side' }));
+    expect(mockSetReplayLayout).toHaveBeenCalledWith('side-by-side');
+
+    mockReplayLayout = 'picture-in-picture';
+    view.rerender(<ScreenRecordingReplay />);
+    expect(view.container.querySelector('[data-replay-layout]')?.getAttribute('data-replay-layout')).toBe('picture-in-picture');
+  });
+
   test('video border is grey when isPlaying is true', async () => {
     mockIsPlaying = true;
     const { container } = await act(async () => render(<ScreenRecordingReplay />));
diff --git a/src/store/hooks/tests/useReplay.spec.tsx b/src/store/hooks/tests/useReplay.spec.tsx
index 9842bf8b56..9635916294 100644
--- a/src/store/hooks/tests/useReplay.spec.tsx
+++ b/src/store/hooks/tests/useReplay.spec.tsx
@@ -91,6 +91,13 @@ describe('useReplay — returned state defaults', () => {
     expect(result.current.speed).toBe(1);
   });
 
+  test('starts with the side-by-side replay layout and updates it locally', () => {
+    const { result } = renderHook(() => useReplay());
+    expect(result.current.replayLayout).toBe('side-by-side');
+    act(() => { result.current.setReplayLayout('picture-in-picture'); });
+    expect(result.current.replayLayout).toBe('picture-in-picture');
+  });
+
   test('starts with hasEnded false', () => {
     const { result } = renderHook(() => useReplay());
     expect(result.current.hasEnded).toBe(false);
diff --git a/src/store/hooks/useReplay.ts b/src/store/hooks/useReplay.ts
index 19d1c0e3f8..e7ffa0c117 100644
--- a/src/store/hooks/useReplay.ts
+++ b/src/store/hooks/useReplay.ts
@@ -6,6 +6,8 @@ import { syncChannel, syncEmitter } from '../../utils/syncReplay';
 import EventEmitter from '../../utils/EventEmitter';
 import { getNextSyntheticReplayTime } from './replayTimer';
 
+export type ReplayLayout = 'side-by-side' | 'picture-in-picture' | 'webcam-top';
+
 function seekMedia(media: HTMLMediaElement, time: number) {
   const mediaTime = Number.isFinite(media.duration) && media.duration > 0
     ? Math.min(time, media.duration)
@@ -60,6 +62,7 @@ export function useReplay() {
   const internalSpeed = useRef(1);
   const [speed, _setSpeed] = useState(1);
   const [isPlaying, _setIsPlaying] = useState(false);
+  const [replayLayout, setReplayLayout] = useState<ReplayLayout>('side-by-side');
   const internalIsPlaying = useRef(false);
   const timerValue = useRef<number>(0);
 
@@ -447,11 +450,13 @@ export function useReplay() {
       setSpeed,
       isPlaying,
       setIsPlaying,
+      replayLayout,
+      setReplayLayout,
       replayEvent,
       forceEmitTimeUpdate,
       hasEnded,
     }),
-    [replayEvent, seekTime, setSeekTime, duration, speed, isPlaying, setIsPlaying, updateReplayRef, setSpeed, forceEmitTimeUpdate, setDuration, hasEnded],
+    [replayEvent, seekTime, setSeekTime, duration, speed, isPlaying, setIsPlaying, replayLayout, updateReplayRef, setSpeed, forceEmitTimeUpdate, setDuration, hasEnded],
   );
 
   return value;

From 7b2419b7c954b1635785cea0cfb3e22d20e5123b Mon Sep 17 00:00:00 2001
From: Jack Wilburn <jackwilburn@tutanota.com>
Date: Wed, 9 Sep 2026 23:28:57 -0600
Subject: [PATCH 09/12] Add webcam capture to screen recording demo

---
 public/demo-screen-recording/assets/introduction.md |  4 ++--
 public/demo-screen-recording/config.json            | 12 ++++++++----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/public/demo-screen-recording/assets/introduction.md b/public/demo-screen-recording/assets/introduction.md
index 483f2f1a4f..44829491d8 100644
--- a/public/demo-screen-recording/assets/introduction.md
+++ b/public/demo-screen-recording/assets/introduction.md
@@ -1,8 +1,8 @@
-This example demonstrates how to capture screen recordings for components where provenance tracking is difficult to implement. In this case, we illustrate the process using simple website components that are recorded directly from the screen.
+This example demonstrates how to capture screen and webcam recordings for components where provenance tracking is difficult to implement. In this case, we illustrate the process using simple website components that are recorded directly from the screen and webcam.
 
 ## Relevant files:
  * [The Config](https://github.com/revisit-studies/study/blob/main/public/demo-screen-recording/config.json)
  * [bar-chart.html](https://github.com/revisit-studies/study/blob/main/public/demo-screen-recording/assets/bar-chart.html)
 
 ## Relevant documentation:
- * [Recording Screen and Audio](https://revisit.dev/docs/designing-studies/record-screen/)
+ * [Recording Screen, Webcam, and Audio](https://revisit.dev/docs/designing-studies/record-screen/)
diff --git a/public/demo-screen-recording/config.json b/public/demo-screen-recording/config.json
index 0dd160e64e..48c255c58c 100644
--- a/public/demo-screen-recording/config.json
+++ b/public/demo-screen-recording/config.json
@@ -7,7 +7,7 @@
       "The reVISit Team"
     ],
     "date": "2026-02-23",
-    "description": "A simple demo of using screen recording on stimuli that render an external website, where provenance tracking is difficult to implement.",
+    "description": "A simple demo of using screen and webcam recording on stimuli that render an external website, where provenance tracking is difficult to implement.",
     "organizations": [
       "University of Utah",
       "WPI"
@@ -23,6 +23,7 @@
     "windowEventDebounceTime": 200,
     "recordAudio": true,
     "recordScreen": true,
+    "recordWebcam": true,
     "recordScreenFPS": 30
   },
   "importedLibraries": [
@@ -40,15 +41,17 @@
       "response": [],
       "instruction": "On this page, only audio recording is enabled.",
       "recordAudio": true,
-      "recordScreen": false
+      "recordScreen": false,
+      "recordWebcam": false
     },
     "external_website_audio_screen": {
       "type": "website",
       "path": "https://www.revisit.dev",
       "response": [],
-      "instruction": "On this page, screen recording is enabled, and audio recording is only enabled while clicking and holding the mic icon.",
+      "instruction": "On this page, screen and webcam recording are enabled, and audio recording is only enabled while clicking and holding the mic icon.",
       "recordAudio": true,
       "recordScreen": true,
+      "recordWebcam": true,
       "clickToRecord": true
     },
     "barChart_audio_screen": {
@@ -58,7 +61,8 @@
         "difficulty": "hard"
       },
       "description": "Question that asks users to count the number of bars that have a value greater than 1.",
-      "instruction": "How many bars have a value greater than 1? (Both audio and screen recording are enabled on this page)",
+      "instruction": "How many bars have a value greater than 1? (Audio, screen, and webcam recording are enabled on this page)",
+      "recordWebcam": true,
       "path": "demo-screen-recording/assets/bar-chart.html",
       "response": [
         {

From 18845ecf608e07f38e11341116b2f21b5b8f3aa4 Mon Sep 17 00:00:00 2001
From: Jack Wilburn <jackwilburn@tutanota.com>
Date: Wed, 9 Sep 2026 23:40:22 -0600
Subject: [PATCH 10/12] Keep webcam-only replay beside stimulus

---
 .../screenRecording/ScreenRecordingReplay.tsx | 108 +++++++++++++++++-
 .../tests/ScreenRecordingReplay.spec.tsx      |  31 ++++-
 src/controllers/ComponentController.tsx       |  10 +-
 .../tests/ComponentController.spec.tsx        |  30 ++++-
 4 files changed, 174 insertions(+), 5 deletions(-)

diff --git a/src/components/screenRecording/ScreenRecordingReplay.tsx b/src/components/screenRecording/ScreenRecordingReplay.tsx
index 6f45db8e5f..5441737958 100644
--- a/src/components/screenRecording/ScreenRecordingReplay.tsx
+++ b/src/components/screenRecording/ScreenRecordingReplay.tsx
@@ -1,4 +1,7 @@
-import { useEffect, useMemo, useState } from 'react';
+import {
+  useCallback, useEffect, useMemo, useRef, useState,
+} from 'react';
+import type { PointerEvent as ReactPointerEvent } from 'react';
 import { useSearchParams } from 'react-router';
 import {
   Box, Flex, Group, SegmentedControl, Text,
@@ -12,7 +15,17 @@ import { useCurrentIdentifier } from '../../routes/utils';
 import { useIsAnalysis } from '../../store/hooks/useIsAnalysis';
 import { ReplayLayout, useReplayContext } from '../../store/hooks/useReplay';
 
-export function ScreenRecordingReplay() {
+type ScreenRecordingReplayProps = {
+  webcamOnly?: boolean;
+};
+
+type WebcamDrag = {
+  pointerId: number;
+  offsetX: number;
+  offsetY: number;
+};
+
+export function ScreenRecordingReplay({ webcamOnly = false }: ScreenRecordingReplayProps) {
   const [searchParams] = useSearchParams();
   const participantId = useMemo(
     () => searchParams.get('participantId') || undefined,
@@ -30,6 +43,42 @@ export function ScreenRecordingReplay() {
 
   const [hasScreenVideo, setHasScreenVideo] = useState(false);
   const [hasWebcamVideo, setHasWebcamVideo] = useState(false);
+  const webcamOverlayRef = useRef<HTMLDivElement>(null);
+  const webcamDragRef = useRef<WebcamDrag | null>(null);
+  const [webcamPosition, setWebcamPosition] = useState<{ left: number; top: number } | null>(null);
+
+  const handleWebcamPointerDown = useCallback((event: ReactPointerEvent<HTMLButtonElement>) => {
+    const overlay = webcamOverlayRef.current;
+    if (!overlay) return;
+
+    const rect = overlay.getBoundingClientRect();
+    webcamDragRef.current = {
+      pointerId: event.pointerId,
+      offsetX: event.clientX - rect.left,
+      offsetY: event.clientY - rect.top,
+    };
+    setWebcamPosition({ left: rect.left, top: rect.top });
+    event.currentTarget.setPointerCapture?.(event.pointerId);
+  }, []);
+
+  const handleWebcamPointerMove = useCallback((event: ReactPointerEvent<HTMLButtonElement>) => {
+    const drag = webcamDragRef.current;
+    const overlay = webcamOverlayRef.current;
+    if (!drag || !overlay || drag.pointerId !== event.pointerId) return;
+
+    const { width, height } = overlay.getBoundingClientRect();
+    const maxLeft = Math.max(0, window.innerWidth - width);
+    const maxTop = Math.max(0, window.innerHeight - height);
+    const left = Math.min(Math.max(event.clientX - drag.offsetX, 0), maxLeft);
+    const top = Math.min(Math.max(event.clientY - drag.offsetY, 0), maxTop);
+    setWebcamPosition({ left, top });
+  }, []);
+
+  const handleWebcamPointerUp = useCallback((event: ReactPointerEvent<HTMLButtonElement>) => {
+    if (webcamDragRef.current?.pointerId !== event.pointerId) return;
+    webcamDragRef.current = null;
+    event.currentTarget.releasePointerCapture?.(event.pointerId);
+  }, []);
 
   useEffect(() => {
     updateReplayRef();
@@ -187,6 +236,61 @@ export function ScreenRecordingReplay() {
       ? { order: 1, width: '32%', alignSelf: 'center' as const }
       : undefined;
 
+  if (webcamOnly) {
+    return (
+      <Box
+        ref={webcamOverlayRef}
+        role="group"
+        aria-label="Webcam recording replay"
+        data-replay-layout="webcam-only-overlay"
+        style={{
+          position: 'fixed',
+          width: 'min(320px, calc(100vw - 32px))',
+          zIndex: 1000,
+          background: 'black',
+          padding: '4px',
+          ...(webcamPosition || { right: 16, bottom: 80 }),
+        }}
+      >
+        <button
+          type="button"
+          aria-label="Move webcam replay"
+          onPointerDown={handleWebcamPointerDown}
+          onPointerMove={handleWebcamPointerMove}
+          onPointerUp={handleWebcamPointerUp}
+          onPointerCancel={handleWebcamPointerUp}
+          style={{
+            display: 'block',
+            width: '100%',
+            padding: '4px 8px',
+            border: 0,
+            color: 'white',
+            background: 'black',
+            textAlign: 'left',
+            cursor: 'move',
+            userSelect: 'none',
+          }}
+        >
+          Webcam Recording · Drag to move
+        </button>
+        <video
+          ref={webcamVideoRef}
+          width="100%"
+          style={{
+            ...videoStyle,
+            display: hasWebcamVideo ? 'block' : 'none',
+            margin: 0,
+            maxHeight: '35vh',
+            objectFit: 'cover',
+          }}
+        >
+          <source type="video/mp4" />
+          Your browser does not support the video tag.
+        </video>
+      </Box>
+    );
+  }
+
   return (
     <Box pos="relative">
       {hasBothVideos && (
diff --git a/src/components/screenRecording/tests/ScreenRecordingReplay.spec.tsx b/src/components/screenRecording/tests/ScreenRecordingReplay.spec.tsx
index 869eb47d16..0be2f3a1b6 100644
--- a/src/components/screenRecording/tests/ScreenRecordingReplay.spec.tsx
+++ b/src/components/screenRecording/tests/ScreenRecordingReplay.spec.tsx
@@ -18,6 +18,20 @@ const mockSetReplayLayout = vi.fn();
 let mockVideoRef: { current: HTMLVideoElement | null } = { current: null };
 let mockWebcamVideoRef: { current: HTMLVideoElement | null } = { current: null };
 
+type MockBoxProps = {
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+  role?: string;
+  'aria-label'?: string;
+  'data-replay-layout'?: string;
+};
+
+function MockBox({
+  children, style, role, 'aria-label': ariaLabel, 'data-replay-layout': layout,
+}: MockBoxProps) {
+  return <div style={style} role={role} aria-label={ariaLabel} data-replay-layout={layout}>{children}</div>;
+}
+
 // ── mocks ─────────────────────────────────────────────────────────────────────
 
 vi.mock('react-router', () => ({
@@ -25,7 +39,7 @@ vi.mock('react-router', () => ({
 }));
 
 vi.mock('@mantine/core', () => ({
-  Box: ({ children }: { children?: React.ReactNode }) => <div>{children}</div>,
+  Box: MockBox,
   Flex: ({ children, 'data-replay-layout': layout }: { children?: React.ReactNode; 'data-replay-layout'?: string }) => <div data-replay-layout={layout}>{children}</div>,
   Group: ({ children }: { children?: React.ReactNode }) => <div>{children}</div>,
   SegmentedControl: ({ data, value, onChange }: { data: { label: string; value: string }[]; value: string; onChange: (value: string) => void }) => (
@@ -174,6 +188,21 @@ describe('ScreenRecordingReplay', () => {
     expect(mockDispatch).toHaveBeenCalledWith(mockSetAnalysisHasWebcamRecording(true));
   });
 
+  test('renders a movable webcam-only overlay', async () => {
+    mockIsAnalysis = true;
+    mockStorageEngine = {
+      getScreenRecording: vi.fn().mockResolvedValue(null),
+      getWebcamRecording: vi.fn().mockResolvedValue('http://example.com/webcam.webm'),
+    };
+    mockSearchParams = new URLSearchParams({ participantId: 'p1' });
+    const view = await act(async () => render(<ScreenRecordingReplay webcamOnly />));
+
+    await waitFor(() => expect(view.container.querySelector('video')?.src).toBe('http://example.com/webcam.webm'));
+    const moveHandle = view.getByRole('button', { name: 'Move webcam replay' });
+    expect(view.container.querySelector('[data-replay-layout="webcam-only-overlay"]')).not.toBeNull();
+    expect(moveHandle.style.cursor).toBe('move');
+  });
+
   test('offers replay layout controls when both recordings exist', async () => {
     mockIsAnalysis = true;
     mockStorageEngine = {
diff --git a/src/controllers/ComponentController.tsx b/src/controllers/ComponentController.tsx
index ec00dcbc03..1033f1f7ed 100644
--- a/src/controllers/ComponentController.tsx
+++ b/src/controllers/ComponentController.tsx
@@ -297,7 +297,14 @@ export function ComponentController() {
   const instructionLocation = currentConfig.instructionLocation ?? studyConfig.uiConfig.instructionLocation ?? 'sidebar';
   const instructionInSideBar = instructionLocation === 'sidebar';
 
-  if ((studyHasScreenRecording || studyHasWebcamRecording) && isAnalysis && analysisCanPlayScreenRecording) return <ScreenRecordingReplay key={`${currentStep}-stimulus`} />;
+  const shouldShowRecordingReplay = (studyHasScreenRecording || studyHasWebcamRecording)
+    && isAnalysis
+    && analysisCanPlayScreenRecording;
+  const isWebcamOnlyReplay = shouldShowRecordingReplay
+    && studyHasWebcamRecording
+    && !studyHasScreenRecording;
+
+  if (shouldShowRecordingReplay && !isWebcamOnlyReplay) return <ScreenRecordingReplay key={`${currentStep}-stimulus`} />;
 
   return (
     <>
@@ -337,6 +344,7 @@ export function ComponentController() {
         config={currentConfig}
         location="belowStimulus"
       />
+      {isWebcamOnlyReplay && <ScreenRecordingReplay key={`${currentStep}-webcam-replay`} webcamOnly />}
     </>
   );
 }
diff --git a/src/controllers/tests/ComponentController.spec.tsx b/src/controllers/tests/ComponentController.spec.tsx
index 4aaf616fbe..5867f6e372 100644
--- a/src/controllers/tests/ComponentController.spec.tsx
+++ b/src/controllers/tests/ComponentController.spec.tsx
@@ -92,7 +92,9 @@ vi.mock('../../components/response/ResponseBlock', () => ({
 }));
 
 vi.mock('../../components/screenRecording/ScreenRecordingReplay', () => ({
-  ScreenRecordingReplay: () => <div>ScreenRecordingReplay</div>,
+  ScreenRecordingReplay: ({ webcamOnly }: { webcamOnly?: boolean }) => (
+    <div>{webcamOnly ? 'WebcamOnlyReplay' : 'ScreenRecordingReplay'}</div>
+  ),
 }));
 
 vi.mock('../../utils/getStaticAsset', () => ({
@@ -724,6 +726,32 @@ describe('ComponentController — effect coverage (render-based)', () => {
     const { container } = render(<ComponentController />);
     await waitFor(() => expect(container.textContent).toContain('ScreenRecordingReplay'));
   });
+
+  test('webcam-only replay renders alongside the stimulus', async () => {
+    vi.mocked(useCurrentComponent).mockReturnValue('testTrial');
+    vi.mocked(useIsAnalysis).mockReturnValue(true);
+    vi.mocked(useStorageEngine).mockReturnValue({
+      storageEngine: makeStorageEngine(),
+      setStorageEngine: vi.fn(),
+    });
+    vi.mocked(useRecordingConfig).mockReturnValue({
+      studyHasScreenRecording: false,
+      studyHasAudioRecording: false,
+      studyHasWebcamRecording: true,
+      currentComponentHasAudioRecording: false,
+      currentComponentHasScreenRecording: false,
+      currentComponentHasWebcamRecording: true,
+      currentComponentHasClickToRecord: false,
+    });
+    const stableStateCanPlay = makeStableState({ analysisCanPlayScreenRecording: true });
+    vi.mocked(useStoreSelector).mockImplementation(
+      (selector) => selector(stableStateCanPlay),
+    );
+
+    const { container } = render(<ComponentController />);
+    await waitFor(() => expect(container.textContent).toContain('WebcamOnlyReplay'));
+    expect(container.textContent).toContain('ResponseBlock');
+  });
 });
 
 // ── VegaController — signal and event coverage ────────────────────────────────

From 8d286c086530e14a0729568f0b0070f7ca620b5f Mon Sep 17 00:00:00 2001
From: Jack Wilburn <jackwilburn@tutanota.com>
Date: Thu, 10 Sep 2026 08:08:46 -0600
Subject: [PATCH 11/12] Improve webcam replay layouts

---
 .../screenRecording/ScreenRecordingReplay.tsx | 241 +++++++++++-------
 .../tests/ScreenRecordingReplay.spec.tsx      |  48 +++-
 2 files changed, 194 insertions(+), 95 deletions(-)

diff --git a/src/components/screenRecording/ScreenRecordingReplay.tsx b/src/components/screenRecording/ScreenRecordingReplay.tsx
index 5441737958..d9dbca5f20 100644
--- a/src/components/screenRecording/ScreenRecordingReplay.tsx
+++ b/src/components/screenRecording/ScreenRecordingReplay.tsx
@@ -1,7 +1,9 @@
 import {
   useCallback, useEffect, useMemo, useRef, useState,
 } from 'react';
-import type { PointerEvent as ReactPointerEvent } from 'react';
+import type {
+  CSSProperties, PointerEvent as ReactPointerEvent, RefObject,
+} from 'react';
 import { useSearchParams } from 'react-router';
 import {
   Box, Flex, Group, SegmentedControl, Text,
@@ -25,24 +27,26 @@ type WebcamDrag = {
   offsetY: number;
 };
 
-export function ScreenRecordingReplay({ webcamOnly = false }: ScreenRecordingReplayProps) {
-  const [searchParams] = useSearchParams();
-  const participantId = useMemo(
-    () => searchParams.get('participantId') || undefined,
-    [searchParams],
-  );
+type WebcamOverlayMode = 'webcam-only' | 'picture-in-picture';
 
-  const {
-    screenVideoRef,
-    webcamVideoRef,
-    updateReplayRef,
-    isPlaying,
-    replayLayout,
-    setReplayLayout,
-  } = useReplayContext();
+type WebcamTopSize = 'small' | 'medium' | 'large';
 
-  const [hasScreenVideo, setHasScreenVideo] = useState(false);
-  const [hasWebcamVideo, setHasWebcamVideo] = useState(false);
+type WebcamReplayOverlayProps = {
+  mode: WebcamOverlayMode;
+  videoRef: RefObject<HTMLVideoElement | null>;
+  videoStyle: CSSProperties;
+  hasWebcamVideo: boolean;
+};
+
+const webcamTopWidths: Record<WebcamTopSize, string> = {
+  small: '20%',
+  medium: '28%',
+  large: '36%',
+};
+
+function WebcamReplayOverlay({
+  mode, videoRef, videoStyle, hasWebcamVideo,
+}: WebcamReplayOverlayProps) {
   const webcamOverlayRef = useRef<HTMLDivElement>(null);
   const webcamDragRef = useRef<WebcamDrag | null>(null);
   const [webcamPosition, setWebcamPosition] = useState<{ left: number; top: number } | null>(null);
@@ -80,6 +84,83 @@ export function ScreenRecordingReplay({ webcamOnly = false }: ScreenRecordingRep
     event.currentTarget.releasePointerCapture?.(event.pointerId);
   }, []);
 
+  return (
+    <Box
+      ref={webcamOverlayRef}
+      role="group"
+      aria-label="Webcam recording replay"
+      data-replay-layout={`${mode}-overlay`}
+      style={{
+        position: 'fixed',
+        display: hasWebcamVideo ? undefined : 'none',
+        width: mode === 'webcam-only'
+          ? 'min(320px, calc(100vw - 32px))'
+          : 'min(320px, 28vw, calc(100vw - 32px))',
+        zIndex: 1000,
+        background: 'black',
+        padding: '4px',
+        ...(webcamPosition || (mode === 'webcam-only' ? { right: 16, bottom: 80 } : { right: 16, top: 140 })),
+      }}
+    >
+      <button
+        type="button"
+        aria-label="Move webcam replay"
+        onPointerDown={handleWebcamPointerDown}
+        onPointerMove={handleWebcamPointerMove}
+        onPointerUp={handleWebcamPointerUp}
+        onPointerCancel={handleWebcamPointerUp}
+        style={{
+          display: 'block',
+          width: '100%',
+          padding: '4px 8px',
+          border: 0,
+          color: 'white',
+          background: 'black',
+          textAlign: 'left',
+          cursor: 'move',
+          userSelect: 'none',
+        }}
+      >
+        Webcam Recording · Drag to move
+      </button>
+      <video
+        ref={videoRef}
+        width="100%"
+        style={{
+          ...videoStyle,
+          display: hasWebcamVideo ? 'block' : 'none',
+          margin: 0,
+          maxHeight: '35vh',
+          objectFit: 'cover',
+        }}
+      >
+        <source type="video/mp4" />
+        Your browser does not support the video tag.
+      </video>
+    </Box>
+  );
+}
+
+export function ScreenRecordingReplay({ webcamOnly = false }: ScreenRecordingReplayProps) {
+  const [searchParams] = useSearchParams();
+  const participantId = useMemo(
+    () => searchParams.get('participantId') || undefined,
+    [searchParams],
+  );
+
+  const {
+    screenVideoRef,
+    webcamVideoRef,
+    updateReplayRef,
+    isPlaying,
+    replayLayout,
+    setReplayLayout,
+  } = useReplayContext();
+
+  const [hasScreenVideo, setHasScreenVideo] = useState(false);
+  const [hasWebcamVideo, setHasWebcamVideo] = useState(false);
+  const [webcamTopSize, setWebcamTopSize] = useState<WebcamTopSize>('small');
+
   useEffect(() => {
     updateReplayRef();
   }, [updateReplayRef]);
@@ -228,66 +309,19 @@ export function ScreenRecordingReplay({ webcamOnly = false }: ScreenRecordingRep
   const screenContainerStyle = replayLayout === 'webcam-top' && hasBothVideos
     ? { order: 2 }
     : undefined;
-  const webcamContainerStyle = replayLayout === 'picture-in-picture' && hasBothVideos
-    ? {
-      position: 'absolute' as const, top: 16, right: 16, width: '28%', zIndex: 1,
-    }
-    : replayLayout === 'webcam-top' && hasBothVideos
-      ? { order: 1, width: '32%', alignSelf: 'center' as const }
-      : undefined;
+  const webcamContainerStyle = replayLayout === 'webcam-top' && hasBothVideos
+    ? { order: 1, width: webcamTopWidths[webcamTopSize], alignSelf: 'center' as const }
+    : undefined;
+  const isPictureInPictureLayout = replayLayout === 'picture-in-picture';
 
   if (webcamOnly) {
     return (
-      <Box
-        ref={webcamOverlayRef}
-        role="group"
-        aria-label="Webcam recording replay"
-        data-replay-layout="webcam-only-overlay"
-        style={{
-          position: 'fixed',
-          width: 'min(320px, calc(100vw - 32px))',
-          zIndex: 1000,
-          background: 'black',
-          padding: '4px',
-          ...(webcamPosition || { right: 16, bottom: 80 }),
-        }}
-      >
-        <button
-          type="button"
-          aria-label="Move webcam replay"
-          onPointerDown={handleWebcamPointerDown}
-          onPointerMove={handleWebcamPointerMove}
-          onPointerUp={handleWebcamPointerUp}
-          onPointerCancel={handleWebcamPointerUp}
-          style={{
-            display: 'block',
-            width: '100%',
-            padding: '4px 8px',
-            border: 0,
-            color: 'white',
-            background: 'black',
-            textAlign: 'left',
-            cursor: 'move',
-            userSelect: 'none',
-          }}
-        >
-          Webcam Recording · Drag to move
-        </button>
-        <video
-          ref={webcamVideoRef}
-          width="100%"
-          style={{
-            ...videoStyle,
-            display: hasWebcamVideo ? 'block' : 'none',
-            margin: 0,
-            maxHeight: '35vh',
-            objectFit: 'cover',
-          }}
-        >
-          <source type="video/mp4" />
-          Your browser does not support the video tag.
-        </video>
-      </Box>
+      <WebcamReplayOverlay
+        mode="webcam-only"
+        videoRef={webcamVideoRef}
+        videoStyle={videoStyle}
+        hasWebcamVideo={hasWebcamVideo}
+      />
     );
   }
 
@@ -306,6 +340,18 @@ export function ScreenRecordingReplay({ webcamOnly = false }: ScreenRecordingRep
               { label: 'Webcam on top', value: 'webcam-top' },
             ]}
           />
+          {replayLayout === 'webcam-top' && (
+            <SegmentedControl
+              aria-label="Webcam size"
+              value={webcamTopSize}
+              onChange={(value) => setWebcamTopSize(value as WebcamTopSize)}
+              data={[
+                { label: 'Small', value: 'small' },
+                { label: 'Medium', value: 'medium' },
+                { label: 'Large', value: 'large' },
+              ]}
+            />
+          )}
         </Group>
       )}
       <Flex
@@ -313,7 +359,6 @@ export function ScreenRecordingReplay({ webcamOnly = false }: ScreenRecordingRep
         gap="md"
         direction={layoutDirection}
         align="stretch"
-        style={replayLayout === 'picture-in-picture' && hasBothVideos ? { position: 'relative' } : undefined}
       >
         <Box flex={hasBothVideos ? 2 : 1} style={screenContainerStyle}>
           <Text fw={600} size="sm" ta="center" mb="xs" display={hasScreenVideo ? 'block' : 'none'}>
@@ -332,24 +377,38 @@ export function ScreenRecordingReplay({ webcamOnly = false }: ScreenRecordingRep
           </video>
         </Box>
 
-        <Box flex={1} style={webcamContainerStyle}>
-          <Text fw={600} size="sm" ta="center" mb="xs" display={hasWebcamVideo ? 'block' : 'none'}>
-            Webcam Recording
-          </Text>
-          <video
-            ref={webcamVideoRef}
-            width="100%"
-            style={{
-              ...videoStyle,
-              display: hasWebcamVideo ? 'block' : 'none',
-              objectFit: 'cover',
-            }}
+        {!isPictureInPictureLayout && (
+          <Box
+            flex={1}
+            style={webcamContainerStyle}
+            data-webcam-size={replayLayout === 'webcam-top' ? webcamTopSize : undefined}
           >
-            <source type="video/mp4" />
-            Your browser does not support the video tag.
-          </video>
-        </Box>
+            <Text fw={600} size="sm" ta="center" mb="xs" display={hasWebcamVideo ? 'block' : 'none'}>
+              Webcam Recording
+            </Text>
+            <video
+              ref={webcamVideoRef}
+              width="100%"
+              style={{
+                ...videoStyle,
+                display: hasWebcamVideo ? 'block' : 'none',
+                objectFit: 'cover',
+              }}
+            >
+              <source type="video/mp4" />
+              Your browser does not support the video tag.
+            </video>
+          </Box>
+        )}
       </Flex>
+      {isPictureInPictureLayout && (
+        <WebcamReplayOverlay
+          mode="picture-in-picture"
+          videoRef={webcamVideoRef}
+          videoStyle={videoStyle}
+          hasWebcamVideo={hasWebcamVideo}
+        />
+      )}
     </Box>
   );
 }
diff --git a/src/components/screenRecording/tests/ScreenRecordingReplay.spec.tsx b/src/components/screenRecording/tests/ScreenRecordingReplay.spec.tsx
index 0be2f3a1b6..7ed3221a7b 100644
--- a/src/components/screenRecording/tests/ScreenRecordingReplay.spec.tsx
+++ b/src/components/screenRecording/tests/ScreenRecordingReplay.spec.tsx
@@ -24,12 +24,13 @@ type MockBoxProps = {
   role?: string;
   'aria-label'?: string;
   'data-replay-layout'?: string;
+  'data-webcam-size'?: string;
 };
 
 function MockBox({
-  children, style, role, 'aria-label': ariaLabel, 'data-replay-layout': layout,
+  children, style, role, 'aria-label': ariaLabel, 'data-replay-layout': layout, 'data-webcam-size': webcamSize,
 }: MockBoxProps) {
-  return <div style={style} role={role} aria-label={ariaLabel} data-replay-layout={layout}>{children}</div>;
+  return <div style={style} role={role} aria-label={ariaLabel} data-replay-layout={layout} data-webcam-size={webcamSize}>{children}</div>;
 }
 
 // ── mocks ─────────────────────────────────────────────────────────────────────
@@ -42,8 +43,15 @@ vi.mock('@mantine/core', () => ({
   Box: MockBox,
   Flex: ({ children, 'data-replay-layout': layout }: { children?: React.ReactNode; 'data-replay-layout'?: string }) => <div data-replay-layout={layout}>{children}</div>,
   Group: ({ children }: { children?: React.ReactNode }) => <div>{children}</div>,
-  SegmentedControl: ({ data, value, onChange }: { data: { label: string; value: string }[]; value: string; onChange: (value: string) => void }) => (
-    <div role="radiogroup" aria-label="Replay layout">
+  SegmentedControl: ({
+    data, value, onChange, 'aria-label': ariaLabel,
+  }: {
+    data: { label: string; value: string }[];
+    value: string;
+    onChange: (value: string) => void;
+    'aria-label'?: string;
+  }) => (
+    <div role="radiogroup" aria-label={ariaLabel}>
       {data.map((item) => <button type="button" key={item.value} aria-pressed={item.value === value} onClick={() => onChange(item.value)}>{item.label}</button>)}
     </div>
   ),
@@ -203,6 +211,38 @@ describe('ScreenRecordingReplay', () => {
     expect(moveHandle.style.cursor).toBe('move');
   });
 
+  test('renders the picture-in-picture webcam as a movable overlay', async () => {
+    mockIsAnalysis = true;
+    mockReplayLayout = 'picture-in-picture';
+    mockStorageEngine = {
+      getScreenRecording: vi.fn().mockResolvedValue('http://example.com/video.mp4'),
+      getWebcamRecording: vi.fn().mockResolvedValue('http://example.com/webcam.webm'),
+    };
+    mockSearchParams = new URLSearchParams({ participantId: 'p1' });
+    const view = await act(async () => render(<ScreenRecordingReplay />));
+
+    await waitFor(() => expect(view.container.querySelectorAll('video')[1]?.src).toBe('http://example.com/webcam.webm'));
+    expect(view.container.querySelector('[data-replay-layout="picture-in-picture-overlay"]')).not.toBeNull();
+    expect(view.getByRole('button', { name: 'Move webcam replay' })).toBeDefined();
+  });
+
+  test('allows webcam-top replay to use a smaller size', async () => {
+    mockIsAnalysis = true;
+    mockReplayLayout = 'webcam-top';
+    mockStorageEngine = {
+      getScreenRecording: vi.fn().mockResolvedValue('http://example.com/video.mp4'),
+      getWebcamRecording: vi.fn().mockResolvedValue('http://example.com/webcam.webm'),
+    };
+    mockSearchParams = new URLSearchParams({ participantId: 'p1' });
+    const view = await act(async () => render(<ScreenRecordingReplay />));
+
+    await waitFor(() => expect(view.container.querySelector('[data-webcam-size="small"]')).not.toBeNull());
+    const sizeControl = view.getByRole('radiogroup', { name: 'Webcam size' });
+    expect(sizeControl).toBeDefined();
+    fireEvent.click(view.getByRole('button', { name: 'Medium' }));
+    expect(view.container.querySelector('[data-webcam-size="medium"]')).not.toBeNull();
+  });
+
   test('offers replay layout controls when both recordings exist', async () => {
     mockIsAnalysis = true;
     mockStorageEngine = {

From f0ab321e9c45137aacaeb63375cc7c81a0a0d1d7 Mon Sep 17 00:00:00 2001
From: Jack Wilburn <jackwilburn@tutanota.com>
Date: Tue, 22 Sep 2026 22:34:39 -0600
Subject: [PATCH 12/12] Keep webcam replay available across layouts and dynamic
 trials

---
 .../screenRecording/ScreenRecordingReplay.tsx | 10 +++++++-
 .../tests/ScreenRecordingReplay.spec.tsx      | 23 +++++++++++++++++++
 src/controllers/ComponentController.tsx       |  2 +-
 .../tests/ComponentController.spec.tsx        | 15 +++++++++++-
 4 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/src/components/screenRecording/ScreenRecordingReplay.tsx b/src/components/screenRecording/ScreenRecordingReplay.tsx
index d9dbca5f20..a025eb2b96 100644
--- a/src/components/screenRecording/ScreenRecordingReplay.tsx
+++ b/src/components/screenRecording/ScreenRecordingReplay.tsx
@@ -160,10 +160,15 @@ export function ScreenRecordingReplay({ webcamOnly = false }: ScreenRecordingRep
   const [hasScreenVideo, setHasScreenVideo] = useState(false);
   const [hasWebcamVideo, setHasWebcamVideo] = useState(false);
   const [webcamTopSize, setWebcamTopSize] = useState<WebcamTopSize>('small');
+  const webcamRecordingUrl = useRef<string | null>(null);
 
   useEffect(() => {
+    if (webcamVideoRef.current && webcamRecordingUrl.current
+      && webcamVideoRef.current.src !== webcamRecordingUrl.current) {
+      webcamVideoRef.current.src = webcamRecordingUrl.current;
+    }
     updateReplayRef();
-  }, [updateReplayRef]);
+  }, [replayLayout, updateReplayRef, webcamVideoRef]);
 
   const { storageEngine } = useStorageEngine();
 
@@ -194,6 +199,7 @@ export function ScreenRecordingReplay({ webcamOnly = false }: ScreenRecordingRep
       };
       const screenVideo = screenVideoRef.current;
       const webcamVideo = webcamVideoRef.current;
+      webcamRecordingUrl.current = null;
       clearVideoSource(screenVideo);
       clearVideoSource(webcamVideo);
       updateReplayRef();
@@ -227,6 +233,7 @@ export function ScreenRecordingReplay({ webcamOnly = false }: ScreenRecordingRep
               return;
             }
             loadedUrls = [screenUrl, webcamUrl].filter((url): url is string => !!url);
+            webcamRecordingUrl.current = webcamUrl;
 
             const hasScreenRecording = !!screenUrl;
             const hasWebcamRecording = !!webcamUrl;
@@ -270,6 +277,7 @@ export function ScreenRecordingReplay({ webcamOnly = false }: ScreenRecordingRep
 
       return () => {
         cancelled = true;
+        webcamRecordingUrl.current = null;
         loadedUrls.forEach(releaseUrl);
         loadedUrls = [];
         clearVideoSource(screenVideo);
diff --git a/src/components/screenRecording/tests/ScreenRecordingReplay.spec.tsx b/src/components/screenRecording/tests/ScreenRecordingReplay.spec.tsx
index 7ed3221a7b..1aff821a07 100644
--- a/src/components/screenRecording/tests/ScreenRecordingReplay.spec.tsx
+++ b/src/components/screenRecording/tests/ScreenRecordingReplay.spec.tsx
@@ -226,6 +226,29 @@ describe('ScreenRecordingReplay', () => {
     expect(view.getByRole('button', { name: 'Move webcam replay' })).toBeDefined();
   });
 
+  test('keeps the webcam source when switching replay layouts', async () => {
+    mockIsAnalysis = true;
+    mockStorageEngine = {
+      getScreenRecording: vi.fn().mockResolvedValue('http://example.com/video.mp4'),
+      getWebcamRecording: vi.fn().mockResolvedValue('http://example.com/webcam.webm'),
+    };
+    mockSearchParams = new URLSearchParams({ participantId: 'p1' });
+    const view = await act(async () => render(<ScreenRecordingReplay />));
+    const firstWebcam = view.container.querySelectorAll('video')[1];
+    await waitFor(() => expect(firstWebcam.src).toBe('http://example.com/webcam.webm'));
+    const replayUpdatesBeforeSwitch = mockUpdateReplayRef.mock.calls.length;
+
+    mockReplayLayout = 'picture-in-picture';
+    view.rerender(<ScreenRecordingReplay />);
+    const pictureInPictureWebcam = view.container.querySelectorAll('video')[1];
+    expect(pictureInPictureWebcam.src).toBe('http://example.com/webcam.webm');
+    expect(mockUpdateReplayRef).toHaveBeenCalledTimes(replayUpdatesBeforeSwitch + 1);
+
+    mockReplayLayout = 'side-by-side';
+    view.rerender(<ScreenRecordingReplay />);
+    expect(view.container.querySelectorAll('video')[1].src).toBe('http://example.com/webcam.webm');
+  });
+
   test('allows webcam-top replay to use a smaller size', async () => {
     mockIsAnalysis = true;
     mockReplayLayout = 'webcam-top';
diff --git a/src/controllers/ComponentController.tsx b/src/controllers/ComponentController.tsx
index 82895dd72d..c6488126f9 100644
--- a/src/controllers/ComponentController.tsx
+++ b/src/controllers/ComponentController.tsx
@@ -216,7 +216,7 @@ export function ComponentController() {
     // Assume that screen recording video exists.
     // The value is set to false from ScreenRecordingReplay component if video starts after stimulus start time.
     storeDispatch(setAnalysisCanPlayScreenRecording(true));
-  }, [currentStep, setAnalysisCanPlayScreenRecording, storeDispatch]);
+  }, [currentIdentifier, setAnalysisCanPlayScreenRecording, storeDispatch]);
 
   useFetchStylesheet(currentConfig?.stylesheetPath);
 
diff --git a/src/controllers/tests/ComponentController.spec.tsx b/src/controllers/tests/ComponentController.spec.tsx
index fb6f192e53..03e36a5ba5 100644
--- a/src/controllers/tests/ComponentController.spec.tsx
+++ b/src/controllers/tests/ComponentController.spec.tsx
@@ -24,7 +24,7 @@ import { MarkdownController } from '../MarkdownController';
 import { ReactComponentController } from '../ReactComponentController';
 import { VegaController } from '../VegaController';
 import { VideoController } from '../VideoController';
-import { useCurrentComponent, useCurrentStep } from '../../routes/utils';
+import { useCurrentComponent, useCurrentIdentifier, useCurrentStep } from '../../routes/utils';
 import { useStorageEngine } from '../../storage/storageEngineHooks';
 import { getStaticAssetByPath, getJsonAssetByPath } from '../../utils/getStaticAsset';
 import { useStoreDispatch, useStoreSelector } from '../../store/store';
@@ -604,6 +604,7 @@ describe('ComponentController — effect coverage (render-based)', () => {
   beforeEach(() => {
     vi.clearAllMocks();
     vi.mocked(useCurrentComponent).mockReturnValue('end');
+    vi.mocked(useCurrentIdentifier).mockReturnValue('trial1_0');
     vi.mocked(useCurrentStep).mockReturnValue(0);
     vi.mocked(useIsAnalysis).mockReturnValue(false);
     vi.mocked(useRecordingConfig).mockReturnValue({
@@ -724,6 +725,18 @@ describe('ComponentController — effect coverage (render-based)', () => {
     await waitFor(() => expect(setAnalysisCanPlaySpy).toHaveBeenCalledWith(true));
   });
 
+  test('resets recording replay availability for the next dynamic child', async () => {
+    const setAnalysisCanPlaySpy = vi.fn();
+    mockStoreActions.setAnalysisCanPlayScreenRecording = setAnalysisCanPlaySpy;
+    vi.mocked(useCurrentIdentifier).mockReturnValue('block_0_first_0');
+    const view = render(<ComponentController />);
+    await waitFor(() => expect(setAnalysisCanPlaySpy).toHaveBeenCalledTimes(1));
+
+    vi.mocked(useCurrentIdentifier).mockReturnValue('block_0_second_1');
+    view.rerender(<ComponentController />);
+    await waitFor(() => expect(setAnalysisCanPlaySpy).toHaveBeenCalledTimes(2));
+  });
+
   test('auto-forward navigates when last answer step > currentStep', async () => {
     const mockNavigate = vi.fn();
     vi.mocked(useNavigate).mockReturnValue(mockNavigate);