From 56cff9eb0916fbb7c0d9c33b316ef1cdd9aef1a6 Mon Sep 17 00:00:00 2001
From: Collin Bolles <collinbolles@gmail.com>
Date: Thu, 29 May 2025 14:59:11 -0400
Subject: [PATCH] Specify mimetype in two places

---
 .../frontend/src/components/VideoRecord.component.tsx    | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/components/VideoRecord.component.tsx b/packages/frontend/src/components/VideoRecord.component.tsx
index d5ccb3e..544d631 100644
--- a/packages/frontend/src/components/VideoRecord.component.tsx
+++ b/packages/frontend/src/components/VideoRecord.component.tsx
@@ -5,6 +5,8 @@ import { useSnackbar } from '../contexts/Snackbar.context';
 import { CountDownTimer, CountDownState } from './CountDownTimer.component';
 import { ResolvePermissionError } from './ResolvePermissionError.component';
 
+const mimeType = 'video/webm; codecs="opus,vp8"';
+
 export interface VideoRecordProps {
   downloadRecording: boolean;
   onRecordingStop?: (mediaBlobUrl: string, blob: Blob) => void;
@@ -18,9 +20,12 @@ export const VideoRecord: FC<VideoRecordProps> = (props) => {
     video: true,
     audio: true,
     mediaRecorderOptions: {
-      mimeType: 'video/webm'
+      mimeType
     },
-    onStop: (mediaBlobUrl, blob) => handleCompletion(mediaBlobUrl, blob)
+    onStop: (mediaBlobUrl, blob) => handleCompletion(mediaBlobUrl, blob),
+    blobPropertyBag: {
+      type: mimeType
+    }
   });
   const [countDownState, setCountDownState] = useState<CountDownState>('paused');
   const [blobPayload, setBlobPayload] = useState<{ blobURL: string; blob: Blob } | null>(null);