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

---
 public/libraries/webcam-recording/config.json |  21 +
 .../assets/screen-recording-introduction.md   |   6 +-
 .../assets/screen-recording-page.md           |   3 +-
 public/library-screen-recording/config.json   |   7 +-
 .../assets/webcam-recording-introduction.md   |  13 +
 .../assets/webcam-recording-page.md           |   5 +
 public/library-webcam-recording/config.json   |  46 ++
 .../individualStudy/StudyAnalysisTabs.tsx     |   3 +-
 .../thinkAloud/ThinkAloudFooter.tsx           |  40 +-
 src/components/ConfigSwitcher.tsx             |   9 +-
 src/components/StepRenderer.tsx               |   3 +-
 .../audioAnalysis/AudioProvenanceVis.tsx      |   8 +-
 src/components/downloader/DownloadButtons.tsx |  52 +-
 src/components/interface/AppAside.tsx         |   9 +-
 .../screenRecording/ScreenRecordingReplay.tsx | 144 +++--
 src/controllers/ComponentController.tsx       |   4 +-
 src/parser/LibraryConfigSchema.json           |  40 ++
 src/parser/StudyConfigSchema.json             |  44 ++
 src/parser/types.ts                           |   4 +
 .../assets/ScreenRecording.tsx                | 199 ++++---
 .../assets/WebcamRecording.tsx                | 164 ++++++
 src/storage/engines/FirebaseStorageEngine.ts  |  15 +
 src/storage/engines/LocalStorageEngine.ts     |  12 +
 src/storage/engines/SupabaseStorageEngine.ts  |  11 +
 src/storage/engines/types.ts                  |  33 ++
 src/store/hooks/recordingConfigUtils.ts       |  14 +
 src/store/hooks/useRecording.ts               | 539 ++++++++++--------
 src/store/hooks/useRecordingConfig.spec.ts    |  77 +++
 src/store/hooks/useRecordingConfig.ts         |  26 +-
 src/store/hooks/useReplay.ts                  | 212 ++++---
 src/store/store.tsx                           |   4 +
 src/store/types.ts                            |   1 +
 src/utils/handleDownloadFiles.ts              |  90 +++
 src/utils/useStudyRecordings.spec.ts          |  81 +++
 src/utils/useStudyRecordings.ts               |  44 +-
 35 files changed, 1494 insertions(+), 489 deletions(-)
 create mode 100644 public/libraries/webcam-recording/config.json
 create mode 100644 public/library-webcam-recording/assets/webcam-recording-introduction.md
 create mode 100644 public/library-webcam-recording/assets/webcam-recording-page.md
 create mode 100644 public/library-webcam-recording/config.json
 create mode 100644 src/public/libraries/webcam-recording/assets/WebcamRecording.tsx
 create mode 100644 src/store/hooks/recordingConfigUtils.ts
 create mode 100644 src/store/hooks/useRecordingConfig.spec.ts
 create mode 100644 src/utils/useStudyRecordings.spec.ts

diff --git a/public/libraries/webcam-recording/config.json b/public/libraries/webcam-recording/config.json
new file mode 100644
index 0000000000..59da888745
--- /dev/null
+++ b/public/libraries/webcam-recording/config.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://raw.githubusercontent.com/revisit-studies/study/v2.4.1/src/parser/LibraryConfigSchema.json",
+  "description": "This is a library for getting webcam recording permissions and starting webcam recording.",
+  "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-introduction.md b/public/library-screen-recording/assets/screen-recording-introduction.md
index 7f159cc397..f96c44d9cf 100644
--- a/public/library-screen-recording/assets/screen-recording-introduction.md
+++ b/public/library-screen-recording/assets/screen-recording-introduction.md
@@ -1,11 +1,10 @@
 
-# Screen Recording
-
+# Screen And Webcam Recording
 
 
 This is a demo of the library `screen-recording`.
 
-This is a required library for screen recording. It provides a component that request user permission for screen and microphone permissions. Then, it starts screen capture until the end of the study.
+This library provides a component that can request screen, webcam, and microphone permissions together. In this example, screen and webcam capture are both enabled and continue until the end of the study.
 
 
 ## Available Components
@@ -16,4 +15,3 @@ This is a required library for screen recording. It provides a component that re
 
 None
 
-
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/config.json b/public/library-screen-recording/config.json
index 9a162a5512..1e804bfb05 100644
--- a/public/library-screen-recording/config.json
+++ b/public/library-screen-recording/config.json
@@ -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"
@@ -43,4 +44,4 @@
       "demo-recording"
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/public/library-webcam-recording/assets/webcam-recording-introduction.md b/public/library-webcam-recording/assets/webcam-recording-introduction.md
new file mode 100644
index 0000000000..247577bba7
--- /dev/null
+++ b/public/library-webcam-recording/assets/webcam-recording-introduction.md
@@ -0,0 +1,13 @@
+# Webcam Recording
+
+This is a demo of the library `webcam-recording`.
+
+This library provides a component that requests webcam permissions without screen capture. In this example, webcam recording is enabled for the study and remains active until the end.
+
+## Available Components
+
+- webcamRecordingPermission
+
+## Available Sequences
+
+None
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/config.json b/public/library-webcam-recording/config.json
new file mode 100644
index 0000000000..d8b1f43bad
--- /dev/null
+++ b/public/library-webcam-recording/config.json
@@ -0,0 +1,46 @@
+{
+  "$schema": "https://raw.githubusercontent.com/revisit-studies/study/v2.4.1/src/parser/StudyConfigSchema.json",
+  "studyMetadata": {
+    "title": "Webcam Recording",
+    "version": "1.0.0",
+    "authors": [
+      "The reVISit Team"
+    ],
+    "date": "2026-03-18",
+    "description": "Example study using the webcam-recording library.",
+    "organizations": [
+      "University of Utah",
+      "WPI"
+    ]
+  },
+  "uiConfig": {
+    "contactEmail": "",
+    "logoPath": "revisitAssets/revisitLogoSquare.svg",
+    "withProgressBar": true,
+    "withSidebar": false,
+    "recordWebcam": true
+  },
+  "importedLibraries": [
+    "webcam-recording"
+  ],
+  "components": {
+    "introduction": {
+      "type": "markdown",
+      "path": "library-webcam-recording/assets/webcam-recording-introduction.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 0c2ad6c127..6d7c04c369 100644
--- a/src/analysis/individualStudy/StudyAnalysisTabs.tsx
+++ b/src/analysis/individualStudy/StudyAnalysisTabs.tsx
@@ -77,7 +77,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();
@@ -315,6 +315,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 704e101c5e..7844b307bf 100644
--- a/src/analysis/individualStudy/thinkAloud/ThinkAloudFooter.tsx
+++ b/src/analysis/individualStudy/thinkAloud/ThinkAloudFooter.tsx
@@ -15,7 +15,7 @@ import {
 import * as d3 from 'd3';
 
 import {
-  IconArrowLeft, IconArrowRight, IconDeviceDesktopDown, IconInfoCircle, IconMusicDown, IconPalette, IconPlayerPauseFilled, IconPlayerPlayFilled, IconRestore,
+  IconArrowLeft, IconArrowRight, IconCamera, IconDeviceDesktopDown, IconInfoCircle, IconMusicDown, IconPalette, IconPlayerPauseFilled, IconPlayerPlayFilled, IconRestore,
 } from '@tabler/icons-react';
 import { useAsync } from '../../../store/hooks/useAsync';
 import { useAuth } from '../../../store/hooks/useAuth';
@@ -28,7 +28,11 @@ 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,
+  handleTaskScreenRecording,
+  handleTaskWebcamRecording,
+} from '../../../utils/handleDownloadFiles';
 import { ParticipantRejectModal } from '../ParticipantRejectModal';
 import { StorageEngine } from '../../../storage/engines/types';
 import { useReplayContext } from '../../../store/hooks/useReplay';
@@ -94,11 +98,14 @@ export function ThinkAloudFooter({
 
   const [audioUrl, setAudioUrl] = useState<string | null>(null);
   const [screenRecordingUrl, setScreenRecordingUrl] = useState<string | null>(null);
+  const [webcamRecordingUrl, setWebcamRecordingUrl] = useState<string | null>(null);
 
   useEffect(() => {
     async function fetchAssetsUrl() {
       if (!storageEngine || !participantId || !currentTrial) {
         setAudioUrl(null);
+        setScreenRecordingUrl(null);
+        setWebcamRecordingUrl(null);
         return;
       }
 
@@ -115,10 +122,17 @@ export function ThinkAloudFooter({
       } catch {
         setScreenRecordingUrl(null);
       }
+
+      try {
+        const url = await storageEngine.getWebcamRecording(currentTrial, participantId);
+        setWebcamRecordingUrl(url);
+      } catch {
+        setWebcamRecordingUrl(null);
+      }
     }
 
     fetchAssetsUrl();
-  }, [storageEngine, participantId, currentTrial]);
+  }, [storageEngine, participantId, currentTrial, screenRecordingUrl]);
 
   const handleDownloadAudio = useCallback(async () => {
     if (!storageEngine || !participantId || !currentTrial) {
@@ -146,6 +160,19 @@ export function ThinkAloudFooter({
     });
   }, [storageEngine, participantId, currentTrial, screenRecordingUrl]);
 
+  const handleDownloadWebcamRecording = useCallback(async () => {
+    if (!storageEngine || !participantId || !currentTrial) {
+      return;
+    }
+
+    await handleTaskWebcamRecording({
+      storageEngine,
+      participantId,
+      identifier: currentTrial,
+      webcamRecordingUrl,
+    });
+  }, [storageEngine, participantId, currentTrial, webcamRecordingUrl]);
+
   const [transcriptLines, setTranscriptLines] = useState<TranscriptLinesWithTimes[] | null>(null);
 
   const { value: participantTags, execute: pullParticipantTags } = useAsync(getParticipantTags, [auth.user.user?.email || 'temp', participantId, studyId, storageEngine]);
@@ -579,6 +606,13 @@ export function ThinkAloudFooter({
                 </ActionIcon>
               </Tooltip>
             )}
+            {webcamRecordingUrl && (
+              <Tooltip label="Download webcam recording">
+                <ActionIcon variant="light" size={30} onClick={handleDownloadWebcamRecording}>
+                  <IconCamera />
+                </ActionIcon>
+              </Tooltip>
+            )}
             <ParticipantRejectModal selectedParticipants={[]} footer />
           </Group>
           {provenanceLegendEntries.size > 1 && (
diff --git a/src/components/ConfigSwitcher.tsx b/src/components/ConfigSwitcher.tsx
index 68082ee91e..b9bef98ce7 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';
@@ -73,7 +73,7 @@ function StudyCard({
     }
     return 'Data Collection Disabled';
   }, [modes, studyStatusAndTiming]);
-  const { hasAudioRecording, hasScreenRecording } = useStudyRecordings(config);
+  const { hasAudioRecording, hasScreenRecording, hasWebcamRecording } = useStudyRecordings(config);
   const {
     isBrowserAllowed,
     isDeviceAllowed,
@@ -198,6 +198,11 @@ function StudyCard({
                     <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 ceea4eb1ef..e3b5e78a04 100644
--- a/src/components/StepRenderer.tsx
+++ b/src/components/StepRenderer.tsx
@@ -55,6 +55,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);
 
   // Attach event listeners
@@ -135,7 +136,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 5a92c9dc6e..8fb99b5c68 100644
--- a/src/components/audioAnalysis/AudioProvenanceVis.tsx
+++ b/src/components/audioAnalysis/AudioProvenanceVis.tsx
@@ -282,12 +282,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);
@@ -303,7 +305,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 2b30208fb3..516be0aa75 100644
--- a/src/components/downloader/DownloadButtons.tsx
+++ b/src/components/downloader/DownloadButtons.tsx
@@ -2,24 +2,37 @@ import {
   Button, Group, Tooltip,
 } from '@mantine/core';
 import {
-  IconDatabaseExport, IconDeviceDesktopDown, IconMusicDown, IconTableExport,
+  IconCamera, IconDatabaseExport, IconDeviceDesktopDown, IconMusicDown, IconTableExport,
 } from '@tabler/icons-react';
 import { useState } from 'react';
 import { useDisclosure } from '@mantine/hooks';
 import { DownloadTidy, download } from './DownloadTidy';
 import { ParticipantData } from '../../storage/types';
 import { useStorageEngine } from '../../storage/storageEngineHooks';
-import { downloadParticipantsAudioZip, downloadParticipantsScreenRecordingZip } from '../../utils/handleDownloadFiles';
+import {
+  downloadParticipantsAudioZip,
+  downloadParticipantsScreenRecordingZip,
+  downloadParticipantsWebcamRecordingZip,
+} from '../../utils/handleDownloadFiles';
 
 type ParticipantDataFetcher = ParticipantData[] | (() => Promise<ParticipantData[]>);
 
 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<ParticipantData[]>([]);
   const [loadingAudio, setLoadingAudio] = useState(false);
   const [loadingScreenRecording, setLoadingScreenRecording] = useState(false);
+  const [loadingWebcamRecording, setLoadingWebcamRecording] = useState(false);
   const { storageEngine } = useStorageEngine();
 
   const fetchParticipants = async () => {
@@ -73,6 +86,23 @@ export function DownloadButtons({
     }
   };
 
+  const handleDownloadWebcamRecording = async () => {
+    setLoadingWebcamRecording(true);
+
+    try {
+      const currParticipants = await fetchParticipants();
+      if (!storageEngine) return;
+      await downloadParticipantsWebcamRecordingZip({
+        storageEngine,
+        participants: currParticipants,
+        studyId,
+        fileName,
+      });
+    } finally {
+      setLoadingWebcamRecording(false);
+    }
+  };
+
   const tooltipText = typeof visibleParticipants !== 'function' ? `Download ${visibleParticipants.length} participants` : 'Download participants data';
 
   return (
@@ -126,6 +156,20 @@ export function DownloadButtons({
           </Tooltip>
         )}
 
+        {hasWebcamRecording && (
+          <Tooltip label={`${tooltipText} webcam recordings ZIP`}>
+            <Button
+              variant="light"
+              disabled={visibleParticipants.length === 0 && typeof visibleParticipants !== 'function'}
+              onClick={handleDownloadWebcamRecording}
+              px={4}
+              loading={loadingWebcamRecording}
+            >
+              <IconCamera />
+            </Button>
+          </Tooltip>
+        )}
+
       </Group>
 
       {openDownload && participants.length > 0 && (
diff --git a/src/components/interface/AppAside.tsx b/src/components/interface/AppAside.tsx
index ffa2694eba..8a542f6c39 100644
--- a/src/components/interface/AppAside.tsx
+++ b/src/components/interface/AppAside.tsx
@@ -11,7 +11,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';
@@ -55,7 +55,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,
@@ -129,6 +129,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/screenRecording/ScreenRecordingReplay.tsx b/src/components/screenRecording/ScreenRecordingReplay.tsx
index 63112a579d..18e8eeb3a3 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,59 @@ 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');
+              throw new Error('Participant ID is required to load recordings');
             }
-            const url = await storageEngine.getScreenRecording(identifier, participantId);
-            if (!url) {
-              storeDispatch(setAnalysisHasScreenRecording(false));
-              storeDispatch(setAnalysisCanPlayScreenRecording(false));
-              return;
+
+            const [screenUrl, webcamUrl] = await Promise.all([
+              storageEngine.getScreenRecording(identifier, participantId),
+              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 || '';
             }
-            storeDispatch(setAnalysisHasScreenRecording(true));
-            if (videoRef.current) {
-              const video = videoRef.current;
-              video.preload = 'metadata';
-              if (url) {
-                videoRef.current.src = url;
-                updateReplayRef();
-              }
+
+            if (webcamVideoRef.current) {
+              webcamVideoRef.current.preload = 'metadata';
+              webcamVideoRef.current.src = webcamUrl || '';
             }
+
+            updateReplayRef();
           } catch (error) {
+            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 +109,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/controllers/ComponentController.tsx b/src/controllers/ComponentController.tsx
index 148e4f79cd..8935ad0890 100644
--- a/src/controllers/ComponentController.tsx
+++ b/src/controllers/ComponentController.tsx
@@ -58,7 +58,7 @@ export function ComponentController() {
 
   const navigate = useNavigate();
 
-  const { studyHasScreenRecording } = useRecordingConfig();
+  const { studyHasScreenRecording, studyHasWebcamRecording } = useRecordingConfig();
 
   const isAnalysis = useIsAnalysis();
 
@@ -214,7 +214,7 @@ export function ComponentController() {
   const instructionInSideBar = instructionLocation === 'sidebar';
   const componentContainerStyle = getComponentContainerStyle(currentConfig.type, currentConfig.style);
 
-  if (studyHasScreenRecording && isAnalysis && analysisCanPlayScreenRecording) return <ScreenRecordingReplay key={`${currentStep}-stimulus`} />;
+  if ((studyHasScreenRecording || studyHasWebcamRecording) && isAnalysis && analysisCanPlayScreenRecording) return <ScreenRecordingReplay key={`${currentStep}-stimulus`} />;
 
   return (
     <>
diff --git a/src/parser/LibraryConfigSchema.json b/src/parser/LibraryConfigSchema.json
index b2a85d1879..be6a406b4e 100644
--- a/src/parser/LibraryConfigSchema.json
+++ b/src/parser/LibraryConfigSchema.json
@@ -164,6 +164,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": {
@@ -899,6 +903,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": {
@@ -1202,6 +1210,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": {
@@ -1647,6 +1659,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": {
@@ -2201,6 +2217,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": {
@@ -2620,6 +2640,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": {
@@ -3414,6 +3438,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": {
@@ -3573,6 +3601,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": {
@@ -3736,6 +3768,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": {
@@ -3900,6 +3936,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 23f0bb4683..27f833563c 100644
--- a/src/parser/StudyConfigSchema.json
+++ b/src/parser/StudyConfigSchema.json
@@ -164,6 +164,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": {
@@ -972,6 +976,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": {
@@ -1275,6 +1283,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": {
@@ -1671,6 +1683,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": {
@@ -2225,6 +2241,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": {
@@ -2644,6 +2664,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": {
@@ -3562,6 +3586,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"
@@ -3750,6 +3778,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": {
@@ -3909,6 +3941,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": {
@@ -4072,6 +4108,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": {
@@ -4236,6 +4276,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 344337ff2a..4fd4bfb8e0 100644
--- a/src/parser/types.ts
+++ b/src/parser/types.ts
@@ -286,6 +286,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. */
@@ -997,6 +999,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 ce56172910..fcac771c9a 100644
--- a/src/public/libraries/screen-recording/assets/ScreenRecording.tsx
+++ b/src/public/libraries/screen-recording/assets/ScreenRecording.tsx
@@ -1,7 +1,7 @@
 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';
@@ -9,39 +9,57 @@ import { RecordingAudioWaveform } from '../../../../components/interface/Recordi
 function ScreenRecordingPermission({ setAnswer }: StimulusParams<undefined>) {
   const {
     recordAudio,
+    recordWebcam,
     recordVideoRef,
+    webcamVideoRef,
     startScreenCapture: startCapture,
     stopScreenCapture: stopCapture,
     isScreenCapturing: screenCapturing,
+    isWebcamCapturing: webcamCapturing,
     screenRecordingError: error,
     audioMediaStream,
   } = useRecordingContext();
 
-  // audioCapturingSuccess is set to true when we detect sound.
   const [audioCapturingSuccess, setAudioCapturingSuccess] = useState(false);
 
+  const setupComplete = useMemo(
+    () => screenCapturing && (!recordWebcam || webcamCapturing) && (!recordAudio || audioCapturingSuccess),
+    [audioCapturingSuccess, recordAudio, recordWebcam, screenCapturing, webcamCapturing],
+  );
+
+  const recordingTargets = useMemo(() => {
+    const targets = ['screen'];
+
+    if (recordWebcam) {
+      targets.push('webcam');
+    }
+    if (recordAudio) {
+      targets.push('audio');
+    }
+
+    return targets;
+  }, [recordAudio, recordWebcam]);
+
   useEffect(() => {
     setAnswer({
-      status: screenCapturing && (recordAudio ? audioCapturingSuccess : true),
+      status: setupComplete,
       provenanceGraph: undefined,
       answers: {
         screenRecordingPermission: screenCapturing,
       },
     });
-  }, [screenCapturing, audioCapturingSuccess, setAnswer, recordAudio]);
+  }, [screenCapturing, setAnswer, setupComplete]);
 
   useEffect(() => {
-    if (!screenCapturing) {
-      return;
+    if (!screenCapturing || !recordAudio) {
+      return undefined;
     }
+
     const stream = audioMediaStream.current;
     if (!stream) {
-      return;
+      return undefined;
     }
 
-    const mediaRecorder = new MediaRecorder(stream);
-    mediaRecorder.start();
-
     const audioContext = new AudioContext();
     const audioStreamSource = audioContext.createMediaStreamSource(stream);
     const analyser = audioContext.createAnalyser();
@@ -51,8 +69,8 @@ function ScreenRecordingPermission({ setAnswer }: StimulusParams<undefined>) {
 
     const bufferLength = analyser.frequencyBinCount;
     const domainData = new Uint8Array(bufferLength);
-
     let soundDetected = false;
+    let animationFrame = 0;
 
     const detectSound = () => {
       if (soundDetected) {
@@ -65,108 +83,103 @@ function ScreenRecordingPermission({ setAnswer }: StimulusParams<undefined>) {
         if (domainData[i] > 0) {
           soundDetected = true;
           setAudioCapturingSuccess(true);
+          return;
         }
       }
 
-      window.requestAnimationFrame(detectSound);
+      animationFrame = window.requestAnimationFrame(detectSound);
     };
 
-    window.requestAnimationFrame(detectSound);
-  }, [audioMediaStream, screenCapturing, setAnswer]);
+    animationFrame = window.requestAnimationFrame(detectSound);
+
+    return () => {
+      window.cancelAnimationFrame(animationFrame);
+      audioStreamSource.disconnect();
+      analyser.disconnect();
+      audioContext.close().catch(() => undefined);
+    };
+  }, [audioMediaStream, recordAudio, screenCapturing]);
 
   return (
     <Box p="md">
       <Title order={1} size="h2">
         Screen
-        {recordAudio && ' and Audio'}
+        {recordWebcam && ', Webcam'}
+        {recordAudio && `${recordWebcam ? ',' : ' and'} Audio`}
         {' '}
         Recording Permission
       </Title>
 
-      {recordAudio ? (
-        <>
-          {/* 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>
-
-          <ol>
-            <li>
-              <strong>Click the button below</strong>
-              {' '}
-              to enable screen and audio recording.
-              <Button type="button" onClick={screenCapturing ? stopCapture : startCapture} 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' }}
-              />
-              {error && <p style={{ color: 'red' }}>{error}</p>}
-              <p><i>Note: 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.
-              {(recordAudio && screenCapturing) ? <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
-            {' '}
-            <strong>screen</strong>
-            . If you&apos;re not comfortable, you may exit and return the study.
-          </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 recording.
+          to enable the required recording streams.
           <Button type="button" onClick={screenCapturing ? stopCapture : startCapture} 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' }}
-          />
           {error && <p style={{ color: 'red' }}>{error}</p>}
           <p><i>Note: 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>
-        </>
-      )}
+        </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' }}
+              />
+            </Box>
+            {recordWebcam && (
+              <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>
+        {recordAudio && (
+          <li>
+            <strong>Speak</strong>
+            {' '}
+            into your microphone to check if audio is working.
+            {screenCapturing ? <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>
+        {recordAudio && (
+          <li>
+            After we hear you say something, the
+            {' '}
+            <b>Continue</b>
+            {' '}
+            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..6df57604e9
--- /dev/null
+++ b/src/public/libraries/webcam-recording/assets/WebcamRecording.tsx
@@ -0,0 +1,164 @@
+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 {
+    recordAudio,
+    webcamVideoRef,
+    startWebcamCapture,
+    stopScreenCapture,
+    isWebcamCapturing,
+    screenRecordingError: error,
+    audioMediaStream,
+  } = useRecordingContext();
+
+  const [audioCapturingSuccess, setAudioCapturingSuccess] = useState(false);
+
+  const setupComplete = useMemo(
+    () => isWebcamCapturing && (!recordAudio || audioCapturingSuccess),
+    [audioCapturingSuccess, isWebcamCapturing, recordAudio],
+  );
+
+  useEffect(() => {
+    setAnswer({
+      status: setupComplete,
+      provenanceGraph: undefined,
+      answers: {
+        webcamRecordingPermission: isWebcamCapturing,
+      },
+    });
+  }, [isWebcamCapturing, setAnswer, setupComplete]);
+
+  useEffect(() => {
+    if (!isWebcamCapturing || !recordAudio) {
+      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, recordAudio]);
+
+  return (
+    <Box p="md">
+      <Title order={1} size="h2">
+        Webcam
+        {recordAudio && ' and Audio'}
+        {' '}
+        Recording Permission
+      </Title>
+
+      <p>
+        This study requires recording of your
+        {' '}
+        <strong>
+          webcam
+          {recordAudio ? ' 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>}
+        </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>
+        {recordAudio && (
+          <li>
+            <strong>Speak</strong>
+            {' '}
+            into your microphone to check if audio is working.
+            {isWebcamCapturing ? (
+              <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>
+        {recordAudio && (
+          <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 c43be5eba6..2d0f08dd76 100644
--- a/src/storage/engines/FirebaseStorageEngine.ts
+++ b/src/storage/engines/FirebaseStorageEngine.ts
@@ -488,6 +488,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 c66c714550..b55b66bc7c 100644
--- a/src/storage/engines/LocalStorageEngine.ts
+++ b/src/storage/engines/LocalStorageEngine.ts
@@ -251,6 +251,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 41dbc7ee5b..460ba30c24 100644
--- a/src/storage/engines/SupabaseStorageEngine.ts
+++ b/src/storage/engines/SupabaseStorageEngine.ts
@@ -470,6 +470,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 11043cf4ba..b81c7ddf0a 100644
--- a/src/storage/engines/types.ts
+++ b/src/storage/engines/types.ts
@@ -231,6 +231,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. This method is used to fetch the webcam recording video file from the storage engine.
+  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>;
 
@@ -1119,6 +1122,15 @@ export abstract class StorageEngine {
     return this.getAsset(url);
   }
 
+  // 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 video stream to the storage engine. This method is used to save the screen recorded video data from a MediaRecorder stream.
   async saveScreenRecording(
     blob: Blob,
@@ -1134,6 +1146,21 @@ export abstract class StorageEngine {
     return this.saveAsset('screenRecording', blob, taskName);
   }
 
+  // Saves the webcam stream to the storage engine. This method is used to save the webcam recorded video data from a MediaRecorder stream.
+  async saveWebcamRecording(
+    blob: Blob,
+    taskName: string,
+  ) {
+    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();
@@ -1201,6 +1228,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, targetName);
       await this._copyRealtimeData(sourceName, targetName);
     }
@@ -1248,6 +1276,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);
         await this._deleteRealtimeData(deletionTarget);
       }
@@ -1317,6 +1346,10 @@ export abstract class StorageEngine {
         `${snapshotName}/screenRecording`,
         `${originalName}/screenRecording`,
       );
+      await this._copyDirectory(
+        `${snapshotName}/webcamRecording`,
+        `${originalName}/webcamRecording`,
+      );
       await this._copyDirectory(snapshotName, originalName);
       await this._copyRealtimeData(snapshotName, originalName);
       successNotifications.push({
diff --git a/src/store/hooks/recordingConfigUtils.ts b/src/store/hooks/recordingConfigUtils.ts
new file mode 100644
index 0000000000..8c1be65a60
--- /dev/null
+++ b/src/store/hooks/recordingConfigUtils.ts
@@ -0,0 +1,14 @@
+import { StudyConfig } from '../../parser/types';
+
+export function getStudyRecordingConfig(
+  sequenceComponentIds: string[],
+  studyConfig: StudyConfig,
+) {
+  const { recordScreen, recordAudio, recordWebcam } = studyConfig.uiConfig;
+
+  return {
+    studyHasScreenRecording: recordScreen || sequenceComponentIds.some((comp) => studyConfig.components[comp]?.recordScreen),
+    studyHasAudioRecording: recordAudio || sequenceComponentIds.some((comp) => studyConfig.components[comp]?.recordAudio),
+    studyHasWebcamRecording: recordWebcam || sequenceComponentIds.some((comp) => studyConfig.components[comp]?.recordWebcam),
+  };
+}
diff --git a/src/store/hooks/useRecording.ts b/src/store/hooks/useRecording.ts
index b90b443443..f253b9c45f 100644
--- a/src/store/hooks/useRecording.ts
+++ b/src/store/hooks/useRecording.ts
@@ -8,35 +8,61 @@ import { useRecordingConfig } from './useRecordingConfig';
 import { useStoredAnswer } from './useStoredAnswer';
 import { useIsAnalysis } from './useIsAnalysis';
 
+const SCREEN_PERMISSION_COMPONENT = '$screen-recording.components.screenRecordingPermission';
+const WEBCAM_PERMISSION_COMPONENT = '$webcam-recording.components.webcamRecordingPermission';
+
+function stopMediaTracks(stream: MediaStream | null) {
+  if (!stream) {
+    return;
+  }
+
+  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.
- * When just audio recording is enabled throughout the study, recording is initiated on each screen separately.
+ * Captures and records the screen, webcam, and audio.
+ * When screen or webcam recording is enabled in at least one stimulus, the corresponding capture
+ * should be started once from a permission component before recording begins.
+ * When the study uses only audio recording, recording is initiated on each screen separately.
  */
 export function useRecording() {
   const studyConfig = useStudyConfig();
 
-  const { recordScreenFPS, recordAudio } = studyConfig.uiConfig;
+  const { recordScreenFPS } = studyConfig.uiConfig;
 
   const recordVideoRef = useRef<HTMLVideoElement>(null);
+  const webcamVideoRef = useRef<HTMLVideoElement>(null);
   const [screenRecordingError, setRecordingError] = 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 [isScreenCapturing, setIsScreenCapturing] = useState(false);
   const [isAudioCapturing, setIsAudioCapturing] = useState(false);
+  const [isWebcamCapturing, setIsWebcamCapturing] = useState(false);
   const [isMediaCapturing, setIsMediaCapturing] = useState(false);
+  const [mediaCaptureStarted, setMediaCaptureStarted] = useState(false);
   const [isRejected, setIsRejected] = useState(false);
   const [isMuted, setIsMuted] = 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 screenMediaRecorder = useRef<MediaRecorder | null>(null);
+  const webcamMediaRecorder = useRef<MediaRecorder | null>(null);
+  const audioMediaRecorder = 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.
-  const screenMediaStream = useRef<MediaStream>(null);
+  const screenMediaStream = useRef<MediaStream | null>(null);
+  const webcamMediaStream = useRef<MediaStream | null>(null);
 
+  const isStoppingCapture = useRef(false);
   const currentTrialName = useRef<string | null>(null);
   const identifier = useCurrentIdentifier();
   const status = useStoredAnswer();
@@ -51,8 +77,10 @@ export function useRecording() {
   const {
     studyHasScreenRecording,
     studyHasAudioRecording,
+    studyHasWebcamRecording,
     currentComponentHasAudioRecording,
     currentComponentHasScreenRecording,
+    currentComponentHasWebcamRecording,
     currentComponentHasClickToRecord,
   } = useRecordingConfig();
 
@@ -60,225 +88,237 @@ export function useRecording() {
     setIsMuted(currentComponentHasClickToRecord);
   }, [currentComponentHasClickToRecord]);
 
-  // Screen capture starts once and stops at the end of the study.
-  // At the beginning of each stimulus, recording starts by calling `startScreenRecording`.
-  // At the end of each stimulus, recording stops by calling `stopScreenRecording`.
+  const syncCaptureFlags = useCallback(() => {
+    const screenCapturing = !!screenMediaStream.current?.getVideoTracks().length;
+    const audioCapturing = !!audioMediaStream.current?.getAudioTracks().length;
+    const webcamCapturing = !!webcamMediaStream.current?.getVideoTracks().length;
 
-  // Stop the screen capture.
-  const stopScreenCapture = useCallback(() => {
-    if (recordVideoRef.current) {
-      recordVideoRef.current.srcObject = null;
-    }
-    setIsScreenCapturing(false);
-    setIsAudioCapturing(false);
-    setIsMediaCapturing(false);
+    setIsScreenCapturing(screenCapturing);
+    setIsAudioCapturing(audioCapturing);
+    setIsWebcamCapturing(webcamCapturing);
+    setIsMediaCapturing(screenCapturing || audioCapturing || webcamCapturing);
+  }, []);
+
+  const stopTrialRecording = useCallback(() => {
     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;
-    }
-
-    if (screenMediaStream.current) {
-      screenMediaStream.current.getTracks().forEach((track) => {
-        track.stop();
-        screenMediaStream.current?.removeTrack(track);
-      });
-      screenMediaStream.current = null;
-    }
+    stopRecorder(screenMediaRecorder.current);
+    stopRecorder(webcamMediaRecorder.current);
+    stopRecorder(audioMediaRecorder.current);
 
-    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;
-    }
+    currentMediaRecorder.current = null;
+    screenMediaRecorder.current = null;
+    webcamMediaRecorder.current = null;
+    audioMediaRecorder.current = null;
   }, []);
 
-  // Start screen recording
-  const startScreenRecording = useCallback((trialName: string) => {
-    // check if the current stimulus needs combined or just screen
-
-    if (!(currentComponentHasAudioRecording || currentComponentHasScreenRecording)) {
+  const stopScreenCapture = useCallback(() => {
+    if (isStoppingCapture.current) {
       return;
     }
 
-    if (!screenMediaStream.current) {
-      return;
+    isStoppingCapture.current = true;
+
+    if (recordVideoRef.current) {
+      recordVideoRef.current.srcObject = null;
+    }
+    if (webcamVideoRef.current) {
+      webcamVideoRef.current.srcObject = null;
     }
 
-    currentMediaStream.current = new MediaStream([
-      ...((currentComponentHasScreenRecording ? screenMediaStream.current?.getVideoTracks() : []) ?? []),
-      ...((currentComponentHasAudioRecording ? audioMediaStream.current?.getAudioTracks() : []) ?? []),
-    ]);
+    stopTrialRecording();
+    stopMediaTracks(audioMediaStream.current);
+    stopMediaTracks(screenMediaStream.current);
+    stopMediaTracks(webcamMediaStream.current);
 
-    const stream = currentMediaStream.current;
+    audioMediaStream.current = null;
+    screenMediaStream.current = null;
+    webcamMediaStream.current = null;
 
-    stream.getAudioTracks().forEach((track) => {
-      track.enabled = !isMuted;
-    });
+    syncCaptureFlags();
 
-    const mediaRecorder = new MediaRecorder(stream);
+    window.setTimeout(() => {
+      isStoppingCapture.current = false;
+    }, 0);
+  }, [stopTrialRecording, syncCaptureFlags]);
 
-    currentMediaRecorder.current = mediaRecorder;
+  const attachSaveHandler = useCallback((
+    recorder: MediaRecorder,
+    saveBlob: ((blob: Blob, trialName: string) => Promise<void>) | undefined,
+    trialName: string,
+    errorLabel: string,
+  ) => {
+    let chunks: Blob[] = [];
 
-    const audioRecorder = (currentComponentHasAudioRecording && audioMediaStream.current) ? new MediaRecorder(audioMediaStream.current) : null;
-    audioMediaRecorder.current = audioRecorder;
+    recorder.addEventListener('start', () => {
+      chunks = [];
+    });
 
-    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;
       }
+      const { mimeType } = recorder;
+      const blob = new Blob(chunks, { type: mimeType });
+      saveBlob(blob, trialName).catch((error) => {
+        console.error(`Error saving ${errorLabel}:`, error);
+      });
     });
+  }, []);
 
-    mediaRecorder.addEventListener('start', () => {
-      chunks = [];
-    });
+  const startScreenRecording = useCallback((trialName: string) => {
+    const wantsScreen = currentComponentHasScreenRecording;
+    const wantsAudio = currentComponentHasAudioRecording;
+    const wantsWebcam = currentComponentHasWebcamRecording;
 
-    audioRecorder?.addEventListener('start', () => {
-      audioChunks = [];
-    });
+    if (!(wantsScreen || wantsAudio || wantsWebcam)) {
+      return;
+    }
 
-    if (currentComponentHasScreenRecording) {
-      mediaRecorder.addEventListener('stop', () => {
-        const { mimeType } = mediaRecorder;
+    if (wantsScreen && !screenMediaStream.current) {
+      return;
+    }
 
-        const blob = new Blob(chunks, { type: mimeType });
-        storageEngine?.saveScreenRecording(blob, trialName).catch((error) => {
-          console.error('Error saving screen recording:', error);
-        });
-      });
+    if (wantsWebcam && !webcamMediaStream.current) {
+      return;
+    }
 
-      audioRecorder?.addEventListener('stop', () => {
-        const { mimeType } = audioRecorder;
+    if (wantsAudio && !audioMediaStream.current) {
+      return;
+    }
 
-        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;
-
-        const blob = new Blob(chunks, { type: mimeType });
-        storageEngine?.saveAudioRecording(blob, trialName).catch((error) => {
-          console.error('Error saving audio recording:', error);
-        });
-      });
+    if (wantsScreen && screenMediaStream.current) {
+      const screenStream = new MediaStream([
+        ...screenMediaStream.current.getVideoTracks(),
+        ...(wantsAudio ? audioMediaStream.current?.getAudioTracks() ?? [] : []),
+      ]);
+      const mediaRecorder = new MediaRecorder(screenStream);
+      screenMediaRecorder.current = mediaRecorder;
+      currentMediaRecorder.current = mediaRecorder;
+      attachSaveHandler(mediaRecorder, storageEngine ? storageEngine.saveScreenRecording.bind(storageEngine) : undefined, trialName, 'screen recording');
+      mediaRecorder.start(1000);
     }
 
-    setIsScreenCapturing(true);
-    setScreenCaptureStarted(true);
-    setScreenWithAudioRecording(currentComponentHasAudioRecording);
-    setRecordingError(null);
+    if (wantsWebcam && webcamMediaStream.current) {
+      const webcamStream = new MediaStream([
+        ...webcamMediaStream.current.getVideoTracks(),
+      ]);
+      const mediaRecorder = new MediaRecorder(webcamStream);
+      webcamMediaRecorder.current = mediaRecorder;
+      attachSaveHandler(mediaRecorder, storageEngine ? storageEngine.saveWebcamRecording.bind(storageEngine) : undefined, trialName, 'webcam recording');
+      mediaRecorder.start(1000);
+    }
 
-    setIsAudioRecording(currentComponentHasAudioRecording);
-    setIsScreenRecording(currentComponentHasScreenRecording);
+    if (wantsAudio && audioMediaStream.current) {
+      const audioStream = new MediaStream([
+        ...audioMediaStream.current.getAudioTracks(),
+      ]);
+      const audioRecorder = new MediaRecorder(audioStream);
+      audioMediaRecorder.current = audioRecorder;
+      attachSaveHandler(audioRecorder, storageEngine ? storageEngine.saveAudioRecording.bind(storageEngine) : undefined, trialName, 'audio recording');
+      audioRecorder.start(1000);
+    }
 
-    mediaRecorder.start(1000); // 1s chunks
-    audioRecorder?.start(1000);
-  }, [currentComponentHasAudioRecording, currentComponentHasScreenRecording, storageEngine, isMuted]);
+    setMediaCaptureStarted(true);
+    setRecordingError(null);
+    setIsAudioRecording(wantsAudio);
+    setIsScreenRecording(wantsScreen);
+    setIsWebcamRecording(wantsWebcam);
+    setScreenWithAudioRecording(wantsScreen && wantsAudio);
+  }, [
+    attachSaveHandler,
+    currentComponentHasAudioRecording,
+    currentComponentHasScreenRecording,
+    currentComponentHasWebcamRecording,
+    storageEngine,
+  ]);
 
-  // Stop screen recording. This does not stop screen capture.
   const stopScreenRecording = useCallback(() => {
-    setIsScreenRecording(false);
-    setScreenWithAudioRecording(false);
-    currentMediaRecorder.current?.stop();
-    audioMediaRecorder.current?.stop();
-  }, []);
+    stopTrialRecording();
+  }, [stopTrialRecording]);
 
   const stopAudioRecording = useCallback(() => {
-    setIsScreenRecording(false);
-    setScreenWithAudioRecording(false);
-    setIsAudioRecording(false);
+    stopTrialRecording();
 
-    currentMediaRecorder.current?.stop();
-    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;
+    if (!(studyHasScreenRecording || studyHasWebcamRecording)) {
+      stopMediaTracks(audioMediaStream.current);
+      audioMediaStream.current = null;
+      syncCaptureFlags();
     }
-  }, []);
+  }, [stopTrialRecording, studyHasScreenRecording, studyHasWebcamRecording, syncCaptureFlags]);
 
   useEffect(() => {
-    if (currentComponent !== '$screen-recording.components.screenRecordingPermission' && currentComponent !== 'end' && screenCaptureStarted && !isScreenCapturing) {
+    const permissionComponents = [SCREEN_PERMISSION_COMPONENT, WEBCAM_PERMISSION_COMPONENT];
+    const missingRequiredCapture = (
+      (studyHasScreenRecording && !isScreenCapturing)
+      || (studyHasWebcamRecording && !isWebcamCapturing)
+      || (((studyHasScreenRecording || studyHasWebcamRecording) && studyHasAudioRecording) && !isAudioCapturing)
+    );
+
+    if (!permissionComponents.includes(currentComponent) && currentComponent !== 'end' && mediaCaptureStarted && missingRequiredCapture) {
       setIsRejected(true);
     }
-  }, [currentComponent, isScreenCapturing, screenCaptureStarted]);
+  }, [
+    currentComponent,
+    isAudioCapturing,
+    isScreenCapturing,
+    isWebcamCapturing,
+    mediaCaptureStarted,
+    studyHasAudioRecording,
+    studyHasScreenRecording,
+    studyHasWebcamRecording,
+  ]);
 
   const startAudioRecording = useCallback((trialName: string) => {
     navigator.mediaDevices.getUserMedia({
       audio: true,
-    }).then((s) => {
-      audioMediaStream.current = s;
-      currentMediaStream.current = s;
-
-      s.getAudioTracks().forEach((track) => {
+    }).then((stream) => {
+      audioMediaStream.current = stream;
+      stream.getAudioTracks().forEach((track) => {
         track.enabled = !isMuted;
       });
 
-      const recorder = new MediaRecorder(s);
+      const recorder = new MediaRecorder(stream);
       audioMediaRecorder.current = recorder;
 
-      let chunks : Blob[] = [];
-
-      recorder.addEventListener('start', () => {
-        chunks = [];
-      });
-
-      recorder.addEventListener('dataavailable', (event: BlobEvent) => {
-        if (event.data && event.data.size > 0) {
-          chunks.push(event.data);
-        }
-      });
+      attachSaveHandler(recorder, storageEngine ? storageEngine.saveAudioRecording.bind(storageEngine) : undefined, trialName, 'audio recording');
 
-      recorder.addEventListener('stop', () => {
-        const { mimeType } = recorder;
-        const blob = new Blob(chunks, { type: mimeType });
-        storageEngine?.saveAudioRecording(blob, trialName).catch((error) => {
-          console.error('Error saving audio recording:', error);
-        });
-      });
-
-      recorder.start();
+      recorder.start(1000);
+      syncCaptureFlags();
+    }).catch((error) => {
+      console.error('Error accessing audio:', error);
+      setRecordingError('Recording permission denied or not supported.');
     });
 
     setIsAudioRecording(true);
-  }, [storageEngine, isMuted]);
+  }, [attachSaveHandler, isMuted, storageEngine, syncCaptureFlags]);
 
   // For study with just audio recording
   useEffect(() => {
-    // Always stop recording when navigating to a trial without audio recording
     if (!currentComponentHasAudioRecording && audioMediaRecorder.current) {
       stopAudioRecording();
       currentTrialName.current = null;
       return;
     }
 
-    if (!studyConfig || studyHasScreenRecording || !studyHasAudioRecording || !storageEngine || (status && status.endTime > 0) || isAnalysis) {
+    if (
+      !studyConfig
+      || studyHasScreenRecording
+      || studyHasWebcamRecording
+      || !studyHasAudioRecording
+      || !storageEngine
+      || (status && status.endTime > 0)
+      || isAnalysis
+    ) {
       return;
     }
 
@@ -287,26 +327,36 @@ export function useRecording() {
       currentTrialName.current = null;
     }
 
-    if (currentComponent !== 'end' && currentTrialName.current !== identifier && (currentComponentHasAudioRecording)) {
+    if (currentComponent !== 'end' && currentTrialName.current !== identifier && currentComponentHasAudioRecording) {
       currentTrialName.current = identifier;
       startAudioRecording(identifier);
     }
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentComponent, identifier, currentComponentHasAudioRecording]);
 
-  // For study with screen recording
+  // For study 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 (screenMediaRecorder.current || webcamMediaRecorder.current || audioMediaRecorder.current) {
       stopScreenRecording();
       currentTrialName.current = null;
     }
 
-    if (currentComponent !== 'end' && isMediaCapturing && currentTrialName.current !== identifier && (currentComponentHasAudioRecording || currentComponentHasScreenRecording)) {
+    const shouldRecordCurrentComponent = currentComponentHasAudioRecording
+      || currentComponentHasScreenRecording
+      || currentComponentHasWebcamRecording;
+
+    if (currentComponent !== 'end' && isMediaCapturing && currentTrialName.current !== identifier && shouldRecordCurrentComponent) {
       currentTrialName.current = identifier;
       startScreenRecording(identifier);
     }
@@ -316,65 +366,101 @@ export function useRecording() {
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentComponent, identifier, currentComponentHasAudioRecording, currentComponentHasScreenRecording, isMediaCapturing]);
+  }, [
+    currentComponent,
+    identifier,
+    currentComponentHasAudioRecording,
+    currentComponentHasScreenRecording,
+    currentComponentHasWebcamRecording,
+    isMediaCapturing,
+  ]);
+
+  const startMediaCapture = useCallback(async ({
+    includeScreen,
+    includeAudio,
+    includeWebcam,
+  }: {
+    includeScreen: boolean;
+    includeAudio: boolean;
+    includeWebcam: boolean;
+  }) => {
+    document.title = includeScreen ? `RECORD THIS TAB: ${pageTitle}` : pageTitle;
+
+    try {
+      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)
+        selfBrowserSurface: 'include',
+        preferCurrentTab: true,
+      }) : null;
+
+      const webcamStream = includeWebcam ? await navigator.mediaDevices.getUserMedia({
+        video: true,
+        audio: false,
+      }) : null;
+
+      const micStream = includeAudio ? await navigator.mediaDevices.getUserMedia({
+        audio: true,
+        video: false,
+      }) : null;
+
+      screenMediaStream.current = screenStream;
+      webcamMediaStream.current = webcamStream;
+      audioMediaStream.current = micStream;
+
+      const stopOnEnded = () => {
+        if (!isStoppingCapture.current) {
+          stopScreenCapture();
+        }
+      };
 
-  // Start screen capture. This does not begin recording.
-  const startScreenCapture = useCallback(() => {
-    const captureFn = async () => {
-      document.title = `RECORD THIS TAB: ${pageTitle}`;
-
-      try {
-        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;
-
-        const micStream = studyHasAudioRecording ? await navigator.mediaDevices.getUserMedia({
-          audio: true,
-          video: false,
-        }) : null;
-
-        audioMediaStream.current = micStream;
-
-        const combinedStream = new MediaStream([
-          ...screenStream?.getVideoTracks() || [],
-          ...(micStream?.getAudioTracks() ?? []),
-        ]);
-
-        currentMediaStream.current = combinedStream;
-
-        if (recordVideoRef.current) {
-          recordVideoRef.current.srcObject = combinedStream;
-          recordVideoRef.current.play();
+      screenStream?.getTracks().forEach((track) => track.addEventListener('ended', stopOnEnded));
+      webcamStream?.getTracks().forEach((track) => track.addEventListener('ended', stopOnEnded));
+      micStream?.getTracks().forEach((track) => track.addEventListener('ended', stopOnEnded));
+
+      if (recordVideoRef.current) {
+        recordVideoRef.current.srcObject = screenStream;
+        if (screenStream) {
+          recordVideoRef.current.play().catch(() => undefined);
         }
+      }
 
-        combinedStream.getTracks().forEach((track) => {
-          track.addEventListener('ended', () => {
-            stopScreenCapture();
-          });
-        });
-
-        setIsScreenCapturing(screenStream !== null);
-        setIsAudioCapturing(micStream !== null);
-        setIsMediaCapturing(screenStream !== null || micStream !== null);
-        setScreenCaptureStarted(true);
-        setScreenWithAudioRecording(!!recordAudio);
-        setRecordingError(null);
-      } catch (err) {
-        console.error('Error accessing screen:', err);
-        setRecordingError('Recording permission denied or not supported.');
-      } finally {
-        document.title = pageTitle;
+      if (webcamVideoRef.current) {
+        webcamVideoRef.current.srcObject = webcamStream;
+        if (webcamStream) {
+          webcamVideoRef.current.play().catch(() => undefined);
+        }
       }
-    };
-    captureFn();
-  }, [pageTitle, recordAudio, recordScreenFPS, stopScreenCapture, studyHasAudioRecording, studyHasScreenRecording]);
+
+      setIsRejected(false);
+      setMediaCaptureStarted(true);
+      setRecordingError(null);
+      syncCaptureFlags();
+    } catch (err) {
+      console.error('Error accessing media:', err);
+      setRecordingError('Recording permission denied or not supported.');
+      stopScreenCapture();
+    } finally {
+      document.title = pageTitle;
+    }
+  }, [pageTitle, recordScreenFPS, stopScreenCapture, syncCaptureFlags]);
+
+  const startScreenCapture = useCallback(() => {
+    startMediaCapture({
+      includeScreen: true,
+      includeAudio: studyHasAudioRecording,
+      includeWebcam: studyHasWebcamRecording,
+    });
+  }, [startMediaCapture, studyHasAudioRecording, studyHasWebcamRecording]);
+
+  const startWebcamCapture = useCallback(() => {
+    startMediaCapture({
+      includeScreen: false,
+      includeAudio: studyHasAudioRecording,
+      includeWebcam: true,
+    });
+  }, [startMediaCapture, studyHasAudioRecording]);
 
   useEffect(() => {
     audioMediaStream.current?.getAudioTracks().forEach((track) => {
@@ -384,19 +470,26 @@ export function useRecording() {
 
   return {
     recordVideoRef,
+    webcamVideoRef,
     studyHasScreenRecording,
+    studyHasWebcamRecording,
     isMuted,
     setIsMuted,
-    recordAudio,
+    recordAudio: studyHasAudioRecording,
+    recordWebcam: studyHasWebcamRecording,
     startScreenCapture,
+    startWebcamCapture,
     stopScreenCapture,
-    startScreenRecording,
     stopScreenRecording,
+    startScreenRecording,
+    stopAudioRecording,
     screenRecordingError,
     isScreenRecording,
     isAudioRecording,
+    isWebcamRecording,
     isScreenCapturing,
     isAudioCapturing,
+    isWebcamCapturing,
     isMediaCapturing,
     combinedMediaRecorder: currentMediaRecorder,
     audioMediaStream,
diff --git a/src/store/hooks/useRecordingConfig.spec.ts b/src/store/hooks/useRecordingConfig.spec.ts
new file mode 100644
index 0000000000..01fa04585e
--- /dev/null
+++ b/src/store/hooks/useRecordingConfig.spec.ts
@@ -0,0 +1,77 @@
+import { describe, expect, test } from 'vitest';
+import { StudyConfig } from '../../parser/types';
+import { getStudyRecordingConfig } from './recordingConfigUtils';
+
+function createStudyConfig(overrides?: Partial<StudyConfig>): StudyConfig {
+  return {
+    uiConfig: {
+      contactEmail: 'test@example.com',
+      logoPath: 'logo.svg',
+      withProgressBar: true,
+      withSidebar: true,
+      recordAudio: false,
+      recordScreen: false,
+      recordWebcam: false,
+    },
+    components: {},
+    sequence: {
+      order: 'fixed',
+      components: [],
+    },
+    ...overrides,
+  } as StudyConfig;
+}
+
+describe('getStudyRecordingConfig', () => {
+  test('detects independent webcam recording from a component override', () => {
+    const studyConfig = createStudyConfig({
+      components: {
+        intro: {
+          type: 'markdown',
+          path: 'test.md',
+          response: [],
+        },
+        webcamTrial: {
+          type: 'markdown',
+          path: 'test.md',
+          response: [],
+          recordWebcam: true,
+        },
+      },
+    });
+
+    expect(getStudyRecordingConfig(['intro', 'webcamTrial'], studyConfig)).toEqual({
+      studyHasAudioRecording: false,
+      studyHasScreenRecording: false,
+      studyHasWebcamRecording: true,
+    });
+  });
+
+  test('detects mixed screen, audio, and webcam recording without coupling webcam to screen', () => {
+    const studyConfig = createStudyConfig({
+      uiConfig: {
+        contactEmail: 'test@example.com',
+        logoPath: 'logo.svg',
+        withProgressBar: true,
+        withSidebar: true,
+        recordAudio: true,
+        recordScreen: false,
+        recordWebcam: true,
+      },
+      components: {
+        screenTrial: {
+          type: 'markdown',
+          path: 'test.md',
+          response: [],
+          recordScreen: true,
+        },
+      },
+    });
+
+    expect(getStudyRecordingConfig(['screenTrial'], studyConfig)).toEqual({
+      studyHasAudioRecording: true,
+      studyHasScreenRecording: true,
+      studyHasWebcamRecording: true,
+    });
+  });
+});
diff --git a/src/store/hooks/useRecordingConfig.ts b/src/store/hooks/useRecordingConfig.ts
index 77d4cff7e0..baad542bdc 100644
--- a/src/store/hooks/useRecordingConfig.ts
+++ b/src/store/hooks/useRecordingConfig.ts
@@ -2,6 +2,7 @@ import { useMemo } from 'react';
 import { useStudyConfig } from './useStudyConfig';
 import { useFlatSequence } from '../store';
 import { useCurrentComponent } from '../../routes/utils';
+import { getStudyRecordingConfig } from './recordingConfigUtils';
 
 export function useRecordingConfig() {
   const studyConfig = useStudyConfig();
@@ -9,11 +10,21 @@ 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 {
+    studyHasScreenRecording,
+    studyHasAudioRecording,
+    studyHasWebcamRecording,
+  } = useMemo(
+    () => getStudyRecordingConfig(participantSequence, studyConfig),
+    [participantSequence, studyConfig],
+  );
 
   const currentComponentHasScreenRecording = useMemo(
     () => stepConfig?.recordScreen ?? !!recordScreen,
@@ -25,6 +36,11 @@ export function useRecordingConfig() {
     [recordAudio, stepConfig],
   );
 
+  const currentComponentHasWebcamRecording = useMemo(
+    () => stepConfig?.recordWebcam ?? !!recordWebcam,
+    [recordWebcam, stepConfig],
+  );
+
   const currentComponentHasClickToRecord = useMemo(
     () => stepConfig?.clickToRecord ?? !!clickToRecord,
     [clickToRecord, stepConfig],
@@ -33,8 +49,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 dac9061034..a4a2611953 100644
--- a/src/store/hooks/useReplay.ts
+++ b/src/store/hooks/useReplay.ts
@@ -6,21 +6,24 @@ import { syncChannel, syncEmitter } from '../../utils/syncReplay';
 import EventEmitter from '../../utils/EventEmitter';
 import { getNextSyntheticReplayTime } from './replayTimer';
 
+type ReplayMediaElement = HTMLVideoElement | HTMLAudioElement;
+
 /**
  * Hook to subscribe to video/audio/provenance timing events for replay
  */
 export function useReplay() {
-  const videoRef = useRef<HTMLVideoElement | null>(null);
+  const screenVideoRef = useRef<HTMLVideoElement | null>(null);
+  const webcamVideoRef = useRef<HTMLVideoElement | null>(null);
   const audioRef = useRef<HTMLAudioElement | null>(null);
 
-  // isMasterplayer is true for the window where play button is clicked.
+  // 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 emitterRef = useRef(new EventEmitter());
 
-  // Replay ref points to whichever is active (video preferred)
-  const replayRef = useRef<HTMLVideoElement | HTMLAudioElement | null>(null);
+  // Replay ref points to the preferred active media element (screen, then webcam, then audio).
+  const replayRef = useRef<ReplayMediaElement | null>(null);
 
   const [seekTime, _setSeekTime] = useState(0);
 
@@ -42,6 +45,43 @@ export function useReplay() {
 
   const timerValue = useRef<number>(0);
 
+  const getActiveMediaElements = useCallback((): ReplayMediaElement[] => (
+    [screenVideoRef.current, webcamVideoRef.current, audioRef.current]
+      .filter((element): element is ReplayMediaElement => !!element && !!element.src)
+  ), []);
+
+  const getSecondaryMediaElements = useCallback((): ReplayMediaElement[] => (
+    getActiveMediaElements().filter((element) => element !== replayRef.current)
+  ), [getActiveMediaElements]);
+
+  const syncSecondaryMediaToMaster = useCallback((targetTime?: number) => {
+    const master = replayRef.current;
+    const masterTime = targetTime ?? master?.currentTime ?? timerValue.current;
+
+    getSecondaryMediaElements().forEach((element) => {
+      if (Math.abs(element.currentTime - masterTime) > 0.15) {
+        element.currentTime = masterTime;
+      }
+    });
+  }, [getSecondaryMediaElements]);
+
+  const updateMutedState = useCallback(() => {
+    const master = replayRef.current;
+
+    if (screenVideoRef.current) {
+      screenVideoRef.current.muted = !isMasterPlayer || master !== screenVideoRef.current;
+    }
+
+    if (webcamVideoRef.current) {
+      webcamVideoRef.current.muted = true;
+    }
+
+    if (audioRef.current) {
+      const replayingScreenWithAudio = master === screenVideoRef.current;
+      audioRef.current.muted = !isMasterPlayer || replayingScreenWithAudio;
+    }
+  }, [isMasterPlayer]);
+
   useEffect(() => {
     if (duration > 0 && (timerValue.current >= duration || (replayRef.current && timerValue.current >= replayRef.current.duration))) {
       setHasEnded(true);
@@ -65,7 +105,6 @@ export function useReplay() {
       return 0;
     }
 
-    // If the searchParamTimestamp is already in milliseconds, return it
     if (!Number.isNaN(Number(searchParamTimestamp))) {
       return parseInt(searchParamTimestamp, 10) / 1000;
     }
@@ -74,8 +113,7 @@ export function useReplay() {
     const minutes = parseInt(searchParamTimestamp.match(/(\d+)m/)?.[1] || '0', 10);
     const seconds = parseInt(searchParamTimestamp.match(/(\d+)s/)?.[1] || '0', 10);
 
-    const totalSeconds = hours * 3600 + minutes * 60 + seconds;
-    return totalSeconds;
+    return hours * 3600 + minutes * 60 + seconds;
   }, [searchParamTimestamp]);
 
   useEffect(() => {
@@ -92,56 +130,43 @@ 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]);
+    getActiveMediaElements().forEach((element) => {
+      element.playbackRate = speed;
+    });
+  }, [getActiveMediaElements, speed]);
 
   const handlePlay = useCallback(() => {
     _setIsPlaying(true);
 
     const t = replayRef.current?.currentTime || 0;
     emitterRef.current.emit('play', t);
+    syncSecondaryMediaToMaster(t);
+    updateMutedState();
 
-    if (videoRef.current === replayRef.current) {
-      if (audioRef.current) {
-        audioRef.current.muted = true;
-        audioRef.current.play();
-      }
-    } else {
-      videoRef.current?.play();
-    }
+    getSecondaryMediaElements().forEach((element) => {
+      element.play().catch(() => undefined);
+    });
 
     const elem = replayRef.current;
     if (elem) {
       timer.current = setInterval(() => {
+        syncSecondaryMediaToMaster(elem.currentTime);
         emitterRef.current.emit('timeupdate', elem.currentTime);
       }, 30);
     }
-  }, []);
+  }, [getSecondaryMediaElements, syncSecondaryMediaToMaster, updateMutedState]);
 
   const handleSeeked = useCallback(() => {
     const t = replayRef.current?.currentTime || 0;
     _setSeekTime(t);
 
+    syncSecondaryMediaToMaster(t);
     emitterRef.current.emit('timeupdate', t);
-    if (videoRef.current === replayRef.current) {
-      if (audioRef.current) {
-        audioRef.current.currentTime = t;
-      }
-    } else if (videoRef.current) {
-      videoRef.current.currentTime = t;
-    }
-  }, []);
+  }, [syncSecondaryMediaToMaster]);
 
   const setSeekTime = useCallback((time: number, isRemoteTriggered = false) => {
     setIsMasterPlayer(!isRemoteTriggered);
@@ -150,69 +175,66 @@ export function useReplay() {
     if (replayRef.current) {
       replayRef.current.currentTime = time;
     }
+    syncSecondaryMediaToMaster(time);
     emitterRef.current.emit('timeupdate', time);
     timerValue.current = time;
     setHasEnded(false);
-  }, []);
+  }, [syncSecondaryMediaToMaster]);
 
   const handlePause = useCallback(() => {
     _setIsPlaying(false);
 
-    timer.current && clearInterval(timer.current);
+    if (timer.current) {
+      clearInterval(timer.current);
+    }
     const t = replayRef.current?.currentTime || 0;
     emitterRef.current.emit('pause', t);
     timerValue.current = t;
 
-    if (videoRef.current === replayRef.current) {
-      if (audioRef.current) {
-        audioRef.current.pause();
-      }
-    } else {
-      videoRef.current?.pause();
-    }
-  }, []);
+    getSecondaryMediaElements().forEach((element) => {
+      element.pause();
+    });
+  }, [getSecondaryMediaElements]);
 
   const forceEmitTimeUpdate = useCallback(() => {
     emitterRef.current.emit('timeupdate', timerValue.current);
   }, []);
 
-  /**
-   * Whenever either video or audio mounts, update replayRef once.
-   * This avoids re-assigning on every render.
-   */
   const updateReplayRef = useCallback(() => {
-    const originalVideo = videoRef.current;
-    const originalAudio = audioRef.current;
+    const mediaElements = getActiveMediaElements();
 
-    if (originalVideo) {
-      originalVideo.playbackRate = internalSpeed.current;
-      originalVideo.currentTime = initialTimestamp;
+    mediaElements.forEach((element) => {
+      element.playbackRate = internalSpeed.current;
+      element.currentTime = initialTimestamp;
+      element.removeEventListener('play', handlePlay);
+      element.removeEventListener('pause', handlePause);
+      element.removeEventListener('seeked', handleSeeked);
+    });
 
-      originalVideo.removeEventListener('play', handlePlay);
-      originalVideo.removeEventListener('pause', handlePause);
-      originalVideo.removeEventListener('seeked', handleSeeked);
-    }
-
-    if (originalAudio) {
-      originalAudio.playbackRate = internalSpeed.current;
-      originalAudio.currentTime = initialTimestamp;
-
-      originalAudio.removeEventListener('play', handlePlay);
-      originalAudio.removeEventListener('pause', handlePause);
-      originalAudio.removeEventListener('seeked', handleSeeked);
-    }
-
-    replayRef.current = (videoRef.current?.src ? videoRef.current : null) ?? (audioRef.current?.src ? audioRef.current : null);
+    replayRef.current = (screenVideoRef.current?.src ? screenVideoRef.current : null)
+      ?? (webcamVideoRef.current?.src ? webcamVideoRef.current : null)
+      ?? (audioRef.current?.src ? audioRef.current : null);
 
     if (replayRef.current) {
       replayRef.current.addEventListener('play', handlePlay);
       replayRef.current.addEventListener('pause', handlePause);
       replayRef.current.addEventListener('seeked', handleSeeked);
     }
+
+    updateMutedState();
+    syncSecondaryMediaToMaster(initialTimestamp);
     forceEmitTimeUpdate();
-  }, [handlePlay, handlePause, handleSeeked, initialTimestamp, forceEmitTimeUpdate]);
+  }, [
+    forceEmitTimeUpdate,
+    getActiveMediaElements,
+    handlePause,
+    handlePlay,
+    handleSeeked,
+    initialTimestamp,
+    syncSecondaryMediaToMaster,
+    updateMutedState,
+  ]);
 
-  // this should be the only way to start video/audio
   const setIsPlaying = useCallback((playing: boolean, isRemoteTriggered = false) => {
     setIsMasterPlayer(!isRemoteTriggered);
     if (hasEnded) {
@@ -221,7 +243,7 @@ export function useReplay() {
     }
     _setIsPlaying(playing);
     if (playing) {
-      replayRef.current?.play();
+      replayRef.current?.play().catch(() => undefined);
     } else {
       replayRef.current?.pause();
     }
@@ -232,17 +254,17 @@ export function useReplay() {
       playTimeStamp.current = Date.now();
     } else {
       _setSeekTime((t) => {
-        const diff = ((Date.now() - playTimeStamp.current) * internalSpeed.current) / 1000; // issue
-        const ctime = diff < 0.5 ? t : t + diff;
+        const diff = ((Date.now() - playTimeStamp.current) * internalSpeed.current) / 1000;
+        const currentTime = diff < 0.5 ? t : t + diff;
         if (replayRef.current) {
-          replayRef.current.currentTime = ctime;
+          replayRef.current.currentTime = currentTime;
         }
-        return ctime;
+        syncSecondaryMediaToMaster(currentTime);
+        return currentTime;
       });
     }
 
-    // setup timer to emit events if both video and audio aren't present.
-    if (!audioRef.current && !videoRef.current) {
+    if (!audioRef.current && !screenVideoRef.current && !webcamVideoRef.current) {
       if (isPlaying) {
         let lastTickTime = Date.now();
         timer.current = setInterval(() => {
@@ -259,22 +281,22 @@ export function useReplay() {
             setIsPlaying(false);
           }
         }, 30);
-      } else {
-        timer.current && clearInterval(timer.current);
+      } else if (timer.current) {
+        clearInterval(timer.current);
       }
     }
-  }, [isPlaying, setIsPlaying]);
+  }, [isPlaying, setIsPlaying, syncSecondaryMediaToMaster]);
 
   useEffect(() => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const replaySyncListener = (newValue: any) => {
       const {
-        seekTime: __seekTime, isPlaying: __isPlaying, speed: __speed,
+        seekTime: remoteSeekTime, isPlaying: remoteIsPlaying, speed: remoteSpeed,
       } = newValue || {};
       setIsMasterPlayer(false);
-      setSpeed(__speed, true);
-      setSeekTime(__seekTime, true);
-      setIsPlaying(__isPlaying, true);
+      setSpeed(remoteSpeed, true);
+      setSeekTime(remoteSeekTime, true);
+      setIsPlaying(remoteIsPlaying, true);
     };
 
     syncEmitter.on('replaySync', replaySyncListener);
@@ -293,11 +315,12 @@ export function useReplay() {
     off: emitterRef.current.off.bind(emitterRef.current),
   }), []);
 
-  // Return a memoized object so context value is stable across renders
   const value = useMemo(
     () => ({
       replayRef,
-      videoRef,
+      videoRef: screenVideoRef,
+      screenVideoRef,
+      webcamVideoRef,
       audioRef,
       updateReplayRef,
       seekTime,
@@ -312,7 +335,20 @@ export function useReplay() {
       forceEmitTimeUpdate,
       hasEnded,
     }),
-    [replayEvent, seekTime, setSeekTime, duration, speed, isPlaying, setIsPlaying, updateReplayRef, setSpeed, forceEmitTimeUpdate, setDuration, hasEnded],
+    [
+      replayEvent,
+      seekTime,
+      setSeekTime,
+      duration,
+      speed,
+      isPlaying,
+      setIsPlaying,
+      updateReplayRef,
+      setSpeed,
+      forceEmitTimeUpdate,
+      setDuration,
+      hasEnded,
+    ],
   );
 
   return value;
diff --git a/src/store/store.tsx b/src/store/store.tsx
index 4466853900..2fed65f8f7 100644
--- a/src/store/store.tsx
+++ b/src/store/store.tsx
@@ -124,6 +124,7 @@ export async function studyStoreCreator(
     analysisIsPlaying: false,
     analysisHasAudio: false,
     analysisHasScreenRecording: false,
+    analysisHasWebcamRecording: false,
     analysisCanPlayScreenRecording: true,
     analysisHasProvenance: false,
     provenanceJumpTime: 0,
@@ -222,6 +223,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 0f047bcd32..92e3d0908e 100644
--- a/src/store/types.ts
+++ b/src/store/types.ts
@@ -177,6 +177,7 @@ export interface StoreState {
   analysisIsPlaying: boolean;
   analysisHasAudio: boolean;
   analysisHasScreenRecording: boolean;
+  analysisHasWebcamRecording: boolean;
   analysisCanPlayScreenRecording: boolean;
   provenanceJumpTime: number;
   analysisHasProvenance: boolean;
diff --git a/src/utils/handleDownloadFiles.ts b/src/utils/handleDownloadFiles.ts
index a6e96d1541..8c466a1742 100644
--- a/src/utils/handleDownloadFiles.ts
+++ b/src/utils/handleDownloadFiles.ts
@@ -68,6 +68,32 @@ export async function handleTaskScreenRecording({
   }
 }
 
+export async function handleTaskWebcamRecording({
+  storageEngine,
+  participantId,
+  identifier,
+  webcamRecordingUrl,
+}: {
+  storageEngine: StorageEngine;
+  participantId: string;
+  identifier: string;
+  webcamRecordingUrl?: string | null;
+}) {
+  const finalWebcamRecordingUrl = webcamRecordingUrl || await storageEngine.getWebcamRecording(identifier, participantId);
+
+  if (finalWebcamRecordingUrl) {
+    const blob = await (await fetch(finalWebcamRecordingUrl)).blob();
+    const url = URL.createObjectURL(blob);
+
+    Object.assign(document.createElement('a'), {
+      href: url,
+      download: `${participantId}_${identifier}_webcamRecording.webm`,
+    }).click();
+
+    URL.revokeObjectURL(url);
+  }
+}
+
 async function loadAssetToZip(zip: JSZip, fileName: string, assetUrl: string | null) {
   if (assetUrl) {
     const asset = await fetch(assetUrl);
@@ -180,6 +206,33 @@ async function downloadParticipantsScreenRecording({
   }
 }
 
+async function downloadParticipantsWebcamRecording({
+  storageEngine,
+  participantId,
+  identifier,
+  namePrefix,
+  zip,
+}: {
+  storageEngine: StorageEngine;
+  participantId: string;
+  identifier: string;
+  namePrefix: string;
+  zip?: JSZip;
+}) {
+  const webcamRecordingZip = zip || new JSZip();
+
+  try {
+    const webcamRecordingUrl = await storageEngine.getWebcamRecording(identifier, participantId);
+    await loadAssetToZip(webcamRecordingZip, `${namePrefix}_${participantId}_${identifier}.webm`, webcamRecordingUrl);
+
+    if (!zip) {
+      downloadZip(webcamRecordingZip, `${namePrefix}_${participantId}_${identifier}_webcamRecording.zip`);
+    }
+  } catch (error) {
+    console.warn(`Failed to fetch files for ${identifier}:`, error);
+  }
+}
+
 export async function downloadParticipantsScreenRecordingZip({
   storageEngine,
   participants,
@@ -217,6 +270,43 @@ export async function downloadParticipantsScreenRecordingZip({
   await downloadZip(zip, `${namePrefix}_screenRecording.zip`);
 }
 
+export async function downloadParticipantsWebcamRecordingZip({
+  storageEngine,
+  participants,
+  studyId,
+  fileName,
+}: {
+  storageEngine: StorageEngine;
+  participants: Array<{ participantId: string; answers: Record<string, { endTime: number; startTime: number; componentName: string; trialOrder: string }> }>;
+  studyId: string;
+  fileName?: string | null;
+}) {
+  const namePrefix = fileName || studyId;
+  const zip = new JSZip();
+
+  const webcamRecordingPromises = participants.flatMap((participant) => {
+    const entries = Object.values(participant.answers)
+      .filter((ans) => ans.endTime > 0)
+      .sort((a, b) => a.startTime - b.startTime);
+
+    return entries.map(async (ans) => {
+      const identifier = `${ans.componentName}_${ans.trialOrder}`;
+
+      await downloadParticipantsWebcamRecording({
+        storageEngine,
+        participantId: participant.participantId,
+        identifier,
+        namePrefix,
+        zip,
+      });
+    });
+  });
+
+  await Promise.all(webcamRecordingPromises);
+
+  await downloadZip(zip, `${namePrefix}_webcamRecording.zip`);
+}
+
 export async function downloadConfigFile({
   studyId,
   hash,
diff --git a/src/utils/useStudyRecordings.spec.ts b/src/utils/useStudyRecordings.spec.ts
new file mode 100644
index 0000000000..35a0b70402
--- /dev/null
+++ b/src/utils/useStudyRecordings.spec.ts
@@ -0,0 +1,81 @@
+import { describe, expect, test } from 'vitest';
+import { StudyConfig } from '../parser/types';
+import { getStudyRecordings } from './useStudyRecordings';
+
+function createStudyConfig(overrides?: Partial<StudyConfig>): StudyConfig {
+  return {
+    uiConfig: {
+      contactEmail: 'test@example.com',
+      logoPath: 'logo.svg',
+      withProgressBar: true,
+      withSidebar: true,
+      recordAudio: false,
+      recordScreen: false,
+      recordWebcam: false,
+    },
+    components: {},
+    sequence: {
+      order: 'fixed',
+      components: [],
+    },
+    ...overrides,
+  } as StudyConfig;
+}
+
+describe('getStudyRecordings', () => {
+  test('returns false for all recording types when config is undefined', () => {
+    expect(getStudyRecordings(undefined)).toEqual({
+      hasAudioRecording: false,
+      hasScreenRecording: false,
+      hasWebcamRecording: false,
+    });
+  });
+
+  test('detects webcam-only recording studies', () => {
+    const studyConfig = createStudyConfig({
+      uiConfig: {
+        contactEmail: 'test@example.com',
+        logoPath: 'logo.svg',
+        withProgressBar: true,
+        withSidebar: true,
+        recordAudio: false,
+        recordScreen: false,
+        recordWebcam: true,
+      },
+    });
+
+    expect(getStudyRecordings(studyConfig)).toEqual({
+      hasAudioRecording: false,
+      hasScreenRecording: false,
+      hasWebcamRecording: true,
+    });
+  });
+
+  test('detects component-level webcam recording alongside screen recording', () => {
+    const studyConfig = createStudyConfig({
+      uiConfig: {
+        contactEmail: 'test@example.com',
+        logoPath: 'logo.svg',
+        withProgressBar: true,
+        withSidebar: true,
+        recordAudio: false,
+        recordScreen: true,
+        recordWebcam: false,
+      },
+      components: {
+        webcamTrial: {
+          type: 'markdown',
+          path: 'test.md',
+          response: [],
+          recordWebcam: true,
+        },
+      },
+    });
+
+    expect(getStudyRecordings(studyConfig)).toEqual({
+      hasAudioRecording: false,
+      hasScreenRecording: true,
+      hasWebcamRecording: true,
+    });
+  });
+});
diff --git a/src/utils/useStudyRecordings.ts b/src/utils/useStudyRecordings.ts
index 4d9e6aba40..7a3f30b5f0 100644
--- a/src/utils/useStudyRecordings.ts
+++ b/src/utils/useStudyRecordings.ts
@@ -2,30 +2,48 @@ import { useEffect, useState } from 'react';
 import { StudyConfig } from '../parser/types';
 import { studyComponentToIndividualComponent } from './handleComponentInheritance';
 
+export function getStudyRecordings(studyConfig: StudyConfig | undefined) {
+  if (!studyConfig) {
+    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((a) => a.recordAudio),
+    hasScreenRecording: recordScreen || componentConfig.some((a) => a.recordScreen),
+    hasWebcamRecording: recordWebcam || componentConfig.some((a) => a.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) {
-      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,
   };
 }