From a929f2a76e876b768abbc891d0d4fbd12e632a07 Mon Sep 17 00:00:00 2001
From: Collin Bolles <collinbolles@gmail.com>
Date: Wed, 28 May 2025 13:36:06 -0400
Subject: [PATCH] Switch to explicitly using webm

---
 .../backend/src/taskcompletions/taskcompletions.service.ts    | 2 +-
 packages/frontend/src/components/VideoRecord.component.tsx    | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/backend/src/taskcompletions/taskcompletions.service.ts b/packages/backend/src/taskcompletions/taskcompletions.service.ts
index d8b9b37..5e446c8 100644
--- a/packages/backend/src/taskcompletions/taskcompletions.service.ts
+++ b/packages/backend/src/taskcompletions/taskcompletions.service.ts
@@ -171,7 +171,7 @@ export class TaskCompletionsService {
     const studyID = user.affiliation ? user.affiliation : user.id!;
     const site = user.location ? user.location : 'UNKNOWN';
 
-    return `${this.taskIteration}_${site}_${studyID}_${taskDescriptor}.mp4`;
+    return `${this.taskIteration}_${site}_${studyID}_${taskDescriptor}.webm`;
   }
 
   /**
diff --git a/packages/frontend/src/components/VideoRecord.component.tsx b/packages/frontend/src/components/VideoRecord.component.tsx
index 71f2c82..d5ccb3e 100644
--- a/packages/frontend/src/components/VideoRecord.component.tsx
+++ b/packages/frontend/src/components/VideoRecord.component.tsx
@@ -16,6 +16,10 @@ export const VideoRecord: FC<VideoRecordProps> = (props) => {
   const { pushSnackbarMessage } = useSnackbar();
   const recorder = useReactMediaRecorder({
     video: true,
+    audio: true,
+    mediaRecorderOptions: {
+      mimeType: 'video/webm'
+    },
     onStop: (mediaBlobUrl, blob) => handleCompletion(mediaBlobUrl, blob)
   });
   const [countDownState, setCountDownState] = useState<CountDownState>('paused');