From d258a29aae8452fc2a42998e0a5aaed8ea51aabc Mon Sep 17 00:00:00 2001
From: jade <101148768+jadeddelta@users.noreply.github.com>
Date: Sat, 8 Feb 2025 10:18:36 -0500
Subject: [PATCH] implement compatible mimetype searching if no mimetype
 provided

---
 .../src/modules/plugin-api/MediaAPI.ts        | 31 ++++++++++++++++---
 1 file changed, 26 insertions(+), 5 deletions(-)

diff --git a/packages/jspsych/src/modules/plugin-api/MediaAPI.ts b/packages/jspsych/src/modules/plugin-api/MediaAPI.ts
index de50e0af..c019a178 100644
--- a/packages/jspsych/src/modules/plugin-api/MediaAPI.ts
+++ b/packages/jspsych/src/modules/plugin-api/MediaAPI.ts
@@ -284,17 +284,38 @@ export class MediaAPI {
   private camera_recorder: MediaRecorder = null;
 
   initializeCameraRecorder(stream: MediaStream, opts?: MediaRecorderOptions) {
-    if (!opts) {
-      opts = { mimeType: "video/webm" };
-    } else if (!opts.mimeType) {
-      opts.mimeType = "video/webm";
+    let mimeType = this.getCompatibleMimeType() || "video/webm";
+    const recorderOptions: MediaRecorderOptions = {
+      ...opts,
+      mimeType
     }
 
     this.camera_stream = stream;
-    const recorder = new MediaRecorder(stream, opts);
+    const recorder = new MediaRecorder(stream, recorderOptions);
     this.camera_recorder = recorder;
   }
 
+  // mimetype checking code adapted from https://github.com/lookit/lookit-jspsych/blob/develop/packages/record/src/videoConfig.ts#L673-L699
+  /** returns a compatible mimetype string, or null if none from the array are supported. */
+  private getCompatibleMimeType(): string {
+    const types = [
+      // chrome firefox edge
+      "video/webm;codecs=vp9,opus",
+      "video/webm;codecs=vp8,opus",
+      // general
+      'video/mp4; codecs="avc1.42E01E, mp4a.40.2"',
+      // safari
+      "video/mp4;codecs=h264,aac",
+      "video/mp4;codecs=hevc,aac",
+    ]
+    for (const mimeType of types) {
+      if (MediaRecorder.isTypeSupported(mimeType)) {
+        return mimeType;
+      }
+    }
+    return null;
+  }
+
   getCameraStream(): MediaStream {
     return this.camera_stream;
   }